2016年3月29日火曜日

【もう一度、英語をやり直そう】英会話日記(3/23) ~本八幡getgo英会話

最近体調が悪く、勉強不足なので、早く治して、英語も勉強しないと。


【今週覚えたこと】
funeral  = 葬式
I belong to life insurance for funeral.

【授業内容】Setting up a meeting on the phone. ( Setting up = Arrange)
1、下の例文のtelephone Englishを覚えて、telephone Englishを出来るように勉強する。

A: TA Insurance. TA speaking. Can I help you?
B: Good morning. This is Tarou from Tokyo Office. How are you, TA?
A: Fine thanks. What can I do for you, Tarou?
B: Well, I'd like to discuss The ABC Project. Are you free tomorrow?
A: Sorry, tomorrow's no good. How about the day after that?
B: Sounds good. What are you doing at 3pm.
A: 3pm works for me. Why don't we both go online at 3pm my time the day after tomorrow, and I'll call you then?
B: Great. Let's do that. Talk to you the day after tomorrow, then.

insurance:保険会社
3pm works for me: 3時はちょうどいい
Why don't you : ~しませんか
go online : skype meetingなどする
my time: 現地時間
Let's do that : そうしましょう

2、文法
質問:(何時・いつ・どこ)がいいですか
What time/When/Where suits you?
What time/When/Where works for you?
What time/When/Where is good for you?

答え:(例:2時)がいいです
2pm suits me.
2pm works for me.
2pm is good for me.

【宿題】
次の動画を見る(分からない点を次回のレッスンで質問する)

Learn English conversation successful telephone convesation(Full Lesson)
 https://www.youtube.com/watch?v=LLC_KNlXOyE

【その他】
telephone Englishで使う文をまとめているページがありましたので、
こちらも一読おすすめします。
http://www.learn-english-today.com/business-english/telephone.html

リスニングはこちらのサイトが簡単でよさげです。
http://www.talkenglish.com/lessonpractice.aspx?ALID=483

こちらの動画はいい感じです。
https://www.youtube.com/watch?v=NWawMZxDh9Y&ebc=ANyPxKpyRh57Wwf6WZusoPVqRgxnXU_tS1-JHtuSU8copcoUF2r6VAHATBkyR2DzWUchnA8B1yq8fBXxOktmg-qyphR8WW02AQ


 

2016年3月28日月曜日

【TypeScript/JavaScript】ColorPickerを実装する

 参考URLにあるColorPickerの実装を試してみました。

--------------------------------------------------------------

Microsoft Office 2010のような色選択コントロールを実装します。

【実装コード】
1、jQuery (v1.7 or greater), jQuery UI (v1.8 or greater)をダウンロードして、実装する
HTMLにコード追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>


2、使うCSSを記述HTMLにコード追加

 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" />
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css" />



3、inputタブに、colorpickerの実装
HTMLにコード追加
<div style="width:128px;">
   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
   <div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>

<script type="text/javascript">
   $(document).ready(function() {
       $("#mycolor").colorpicker();
   });
</script>



4、オプション設定
(1) 初期色設定
$("#mycolor").colorpicker({
    color: "#ffffff"
});

(2) ColorPickerのパレットデフォルト表示
$("#mycolor").colorpicker({
    defaultPalette: 'web'
});




(3) プレート内で色クリック及びマウスオーバー時の情報を下段に表示しない
$("#mycolor").colorpicker({
    displayIndicator: false
});


(4) ボタン非表示
$("#mycolor").colorpicker({
    hideButton: true
});


(5) パレットはボタンのみで表示
このオプションをしないと、inputのfocusを受けた時にパレット表示される。
デフォルトは、inputフォーカス時とボタンクリック時に表示されます。
$('#mycolor').colorpicker({showOn:'button'});

(6) パレット内表示文字変更
$("#mycolor").colorpicker({
   strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
});

(7) パレットに透明色("#0000ffff")選択可能にする
$("#mycolor").colorpicker({
    transparentColor: true
});


5、イベント処理
(1) 色選択時
$("#mycolor").on("change.color", function(event, color){
    $("#title").attr("style", "background-color:" + color);
})


(2) パレット内のカラーボックスマウスオーバー時
$("#mycolor").on("mouseover.color", function(event, color){
    $('#title').attr("style", "background-color:" + color);
})


6、メソッド
(1) 色クリア
$("#mycolor").colorpicker("clear");

(2) グレーアウト(パレット表示できないようにする)
$('#mycolor').colorpicker("disable");
反対(パレット表示可能)の場合
$("#mycolor").colorpicker("enable");

(3) パレットの選択色設定・取得
var color = $("#mycolor").colorpicker("val");
$("#mycolor").colorpicker("val", "#d0d0d0");


(4) パレット表示(ボタンやinputから表示以外の方法)
$("#mycolor").colorpicker("showPalette");

(5) パレット非表示(ボタンやinputから表示以外の方法)
$("#mycolor").colorpicker("hidePalette");


7、カラーパレットテーマ(デザイン色)変更
 jQuery UI widgetと同じテーマで変更できます
独自のテーマ作成もきます
http://jqueryui.com/themeroller/#!themeGallery=undefined



<link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
の"ui-lightness"を変更します。

またはプログラム内で行う場合は、以下のような感じで行います。
        var theme = "ui-darkness";
        $('#jquiCSS').attr('href','http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/'+ theme +'/jquery-ui.css');
        $('.css').removeClass('sel');
        $(this).addClass('sel');



8、実装例

    <div class="demoPanel" style="width:130px">
        <input id="cpButton" value="#92cddc" />
    </div>
    <script type="text/javascript">
        $('#cpButton').colorpicker({ showOn: 'button' });

        $("#cpButton").colorpicker({
            strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
        });
        $("#cpButton").colorpicker({
            displayIndicator: false
        });
        $("#cpButton").colorpicker({
            color: "#ffffff"
        });
        var theme = "ui-darkness";
        $('#jquiCSS').attr('href', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/' + theme + '/jquery-ui.css');
        $('.css').removeClass('sel');
        $(this).addClass('sel');
    </script>


9、実装例をTypeScriptで実装
JavaScriptファイル(test.js)を作成して、8で記載したコードを追加する
function SetColorPicker() {
    $('#cpButton').colorpicker({ showOn: 'button' });
    $("#cpButton").colorpicker({
        strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
    });
    $("#cpButton").colorpicker({
        displayIndicator: false
    });
    $("#cpButton").colorpicker({
        color: "#ffffff"
    });
    var theme = "ui-darkness";
    $('#jquiCSS').attr('href', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/' + theme + '/jquery-ui.css');
    $('.css').removeClass('sel');
    $(this).addClass('sel');
}


TypeScriptファイル(app.ts)で以下のコードを追加する 。
(declare宣言(アンビエント)で、JavaScriptで定義した関数を宣言する)
 declare function SetColorPicker();
$(document.body).ready(function () {
    SetColorPicker();

}


【参考URL】
http://www.codeproject.com/Articles/452401/ColorPicker-a-jQuery-UI-Widget

【Javascript】使えそうで、覚えておくと良い関数など

指定したURLへ移動
location.hrefプロパティを手動で設定し、指定したURLにジャンプさせることができます。 
window.location.href = "http://www.google.co.jp/";


ページ内の指定したアンカー名へ移動
移動先となる場所には、<a name="アンカー名"></a>のように、a要素のname属性にアンカー名を指定します。
例えば、
ページの先頭に<a name="pagetop"></a>と記述しておくと、ページの要所要所で
<a href="#" onClick="location.hash='pagetop'; return false;">先頭へ</a>
と記述したリンクをクリックすれば、ページの先頭へジャンプさせることができます。

新しいドキュメントを読み込む
 assignメソッドは、新しいドキュメントを読み込み、現在のlocationを変更します。 第1引数URLには、新しいドキュメントのURLを指定します。
location.assign("http://www.google.co.jp/"); 

ページの履歴を残さずにジャンプ
replaceメソッドは、現在のURLを指定したURLに置換します。
このreplaceメソッドで、現在のURLを任意のURLに置換すれば、ページの履歴を残さずに任意のページへ移動させることも可能です。 ブラウザの[戻るボタン]をクリックしても、前に閲覧していたページに戻ることはできません。
<input type="button" value="ジャンプ" onclick="location.replace('http://www.google.co.jp/');" />


ノード内のHTML要素の取得・設定
エレメント.innerHTML = HTML文
対象ノード内のHTML文を取得・設定します。
 HTMLタグを含めずにプレーンテキストのみ取得・設定したい場合は、innerText/textContentを使用します。
 document.getElementById("message").innerHTML="<p>"+str+"、"+username+"さん<\/p>";



【JavaScript文法】
throw文
例外エラーを発生させ、キーワードをcatch文に渡す
 try ... catch...finally文で処理できるエラー条件を生成します。 式には任意の式を指定します。
        try{
            try{
                if(x == 0) throw "x は 0 と等しい";
                else throw "x は 0 と等しくない";
            }
            catch(e){
                if(e=="x は 0 と等しい") return(e); /* エラーメッセージを返す */
                else throw e;
            }
        }
        catch(e){
            return(e); /* エラーメッセージを返す */
        }

 try...catch...finally文
 エラーをキャッチしてエラー処理を実装する
 try {
  [ try文 ]
} catch ( 変数名 ) {
  [ catch文 ]
} finally {
  [ finally文 ]
}

【参考URL】





http://phpjavascriptroom.com/?t=js

2016年3月25日金曜日

「お役所言葉」改善の手引 by 佐賀県を読んで


こちらの記事を参考に、文書を読んで、覚えておくといいことを、メモとして、まとめてみました。
http://web-tan.forum.impressrd.jp/e/2016/03/15/22393

------------------------------------------------------------------------------

・ 佐賀県:いわゆる「お役所ことば」改善の手引きの策定
http://cc.mas.impress.co.jp/c/008mve_0001bwzi_a0
※ ページ内「いわゆる『お役所言葉』改善の手引(最終)(PDF)」のリンクから

分かりやすく、読みやすく、
そして、親しみやすい
そんな文書をつくるために

文章を書くための基本をシンプルかつ明確に、具体的な例を示しながら解説しています。

1、できるだけ具体的な表現を
「○ ○ 的」「○ ○ 化」「○ ○ 性」「等」などの言葉は、簡潔な表現ではあるものの、文意が不明確になる場合があるため、使いすぎに注意する。

 《あいまいな表現の言い換え例》
 検討する。

ア 結論がはっきりしている場合
   ・・・については、○ ○ までに実施します。ただし、・・・など
   の問題点があるため、・・・・・・・。
   ・・・などの理由により、実施できません。
イ 結論がはっきりせず、対応を検討中の場合
   実施できるかどうか、現在検討中です
   (なお、・・・までには、その結論を出す予定です。)



善処する
鋭意努力する
可及的速やかに
所要の
若干の


あいまいな表現のため、なるべく使用しない。


2、的確で簡潔な文章を、まずは結論から
 《注意点》
(1) まず結論を書く。その後に、理由や説明などを書いていく。
(2) 長い文章を短くするために、接続助詞や中止形のところで一応区切り、「しかし」
「けれども」「したがって」などの接続詞を使ったり、前の文と関係のある語句を
持ってきて、後の文を書いたりする。
(3) 複数の内容を有する文章の場合は、箇条書にする
(4) 標題や見出しは、文書の内容を把握して的確に付ける

《簡潔な文章の例》
 ○ ○ については、これまで、・・・していますが、○ ○ のため・・・とい
う状況です。
こうしたことから、○○までには・・・・・を実施できるのではないかと
考えています。
↓ (まず結論を書き、その後で説明を加える。)
○○については、・・・○○までに・・・を実施します。
その理由は、・・・・・・・・・だからです。
なお、これまでの経緯について簡単に説明すると、・・・という状況です。



○○会議を平成△年△月△日に△時から□□において開催しますので、御
出席ください。
なお、議題は、××に関する基本方針(案)についてです。
                ↓  (箇条書にする。)
○○会議を次のとおり開催しますので、御出席ください。
1  日時  平成△年△月△日  △時から 
2  場所  □□ 
3  議題  ××に関する基本方針(案)について
 


《参考》
ア  一文の長さの目安 
適当な文章の長さは一概には言えませんが、一つの目安として文化庁が発行した文章の書き方(ことばシリーズ20)によると、
「なるべく字数で一文平均50字、
文節数で一文平均15文節を超えないように注意して書くのがよい。

」となっています。


3、行政で多用される慣用語の見直しを
 《注意点》
(1) 文章中の用語は、日常的に使われる分かりやすい言葉を用いる。
(2) 文書を読む人の立場や年齢などを考えて言葉を選択する。

《言い換え例》    注意すべき用語の例                           言い換え例  
-------------------------------------------------------------------                      
~に当たっては                                   ~されるときは         
遺憾である                                         残念である              
諸般の事情にかんがみ                         様々な事情を考えて  
御高配                                                 御配慮                  
講じる                                                 行う、実行する                  
今般                                                   今回、このたび                    
~に資する                                           ~に役立てる              
先般                                                   先日、先ごろ  又は  具体的な日付を書く 
遅滞なく                                              遅れないように、滞りなく                
万全を期すよう                                     間違いのないよう(に)       



4、カタカナ語(外来語)は普及しているものを

5、専門用語は言い換えや説明を

6、命令調は禁物
命令調は禁物です。
また、「である体」よりも、「ます体」の方が話し言葉に近く、親近感を与え、丁寧です。
例規文や契約書などの「である体」を用いるべきもの以外の文章は、「ます体」を用いるように努めましょう。
自分がその文書を受け取る立場になって、できるだけ親しみやすく、好感が持てるものとなるように心掛けましょう。     

7、回りくどい表現は止めて
《注意点》 (1)必要以上に言葉を多用しない。
(2)推定の言葉の重複を避ける
 

8、肯定的で前向きな表現を
 《注意点》 (1)  否定形の表現は、なるべく使わない。
(2)  否定形と肯定形の文章が混在するときは、肯定形の文章を先に書く。
(3)  二重否定の表現をやめ、肯定形の表現にする。

9、敬語表現は適切かつ簡潔に
 《注意点》 (1) 敬語の基本的な使い方を理解し、適切に使用する。敬語には、尊敬語、謙譲語、丁寧語があるため、その使い分けにも注意する。
尊敬語は「話の中身」に登場する人物や動作を高く扱う場合に使い、謙譲語は「話の中身」に登場する自分の側でする動作を低く扱う場合に使います。
(2) 敬語を使い過ぎない。
ア  「特段の」「御高配」「賜る」等の言葉がその文書に必要なものかを考えてみる。
イ  「ございます」や「存じます」は、できるだけ使わない
ウ  接頭語の「御」や「お」は、何度も続けて使わない
エ  自分の行為に対して敬語を使わない
オ  一つの文中に敬語が続く場合は、できるだけ前の方を省略し、後の方を残す  

《言い換え例》 希望します。
                ↓  (漢語の動詞を尊敬語にする。)
ア  「御」を付ける方法 
漢語の上に「御」を付けて、「御希望になる」「御希望なさる」とする。
イ  「される」を使用する方法 
「希望される」とし、このとき「御」は必要ない。 


特段の御高配を賜りますようお願い申し上げます。
                ↓  (簡潔な表現にする。)
  格別の御配慮をお願いします。


  なお、一層の御活躍を期待申し上げまして、祝辞といたします。     
○○○を御持参ください。
                ↓  (謙譲語なので、相手の動作に使わない。)
○○○をお持ちください。
        

《「御」と「お」の使用例》
 
「御」と「お」は、語の頭に付けて尊敬語とします。原則として、和語には「お」を、漢語には「御(ご)」を使用する。※漢語とは、漢字二字以上からなる音読みの言葉
ア  接頭語の「御(ご)」は、後の語を漢字で書く場合は漢字を、後の語を仮名で書く
場合は仮名を用います。
    例  御案内、御指導、ごあいさつ 
イ  接頭語の「お」は、仮名を用います。 
    例  お手紙、お礼、お願い、お気軽に、お話

《よく使う敬語の例》 通常語                     尊敬語                                   謙譲語
------------------------------------------------------------                  
言う               おっしゃる                                          申す・申し上げる       
行く               行かれる・いらっしゃる・おいでになる        うかがう・参る       
いる               いらっしゃる・おいでになる                    おる・おります       
受け取る        お納めになる・お受け取りいただく           いただく・頂戴する   
聞く               お聞きになる                                      うかがう・うけたまわる       
来る               いらっしゃる・お見えになる                   うかがう・参る       
知る               (お知りになる)・ご存じ(になる)            存じる・存じ上げる    
する               なさる                                              いたす       
尋ねる             お尋ねになる                                   うかがう・お聞きする     
食べる             お食べになる・召し上がる                   いただく・頂戴する     
見る               ご覧になる                                        拝見する       
もらう             おもらいになる                                   いただく・頂戴する      

10、言葉の乱れにも敏感に
 《注意点》 「ら抜き言葉」や「さ入れ言葉」は、使わない。

《ら抜き言葉の言い換え例》 この○○は、食べれませんので御注意ください。
                ↓

この○○は、食べれませんので御注意ください。 

「食べる」という動詞の活用型は、下一段活用である  ため、可能の意味を持たせるときは、「れる」ではなく 「られる」を使う。 

 《さ入れ言葉の言い換え例》 
今日は、休ませていただきます。
                ↓

 今日は、休ませていただきます。 

「休む」という動詞の活用型は、五段活用であるた め、使役の意味を持たせるときは、「させる」では なく「せる」を使う。


11、レイアウトにも工夫を
 《注意点》 (1)文書の字間、行間、余白の設定は、空きすぎても詰めすぎても見づらいので、全体のバランスを考えて工夫をする。
(2)下線を引いたり、字体を換えたりするなど重要箇所を強調する、文字サイズを変更するなど見やすくするための工夫をする。

12、親しみやすい文書にするために

13、最後に、声に出して読んでみる



―心したいこと―
野口悠紀雄氏が書かれた『「超」文章法』という本に、「誤字・脱字を根絶せよ」という文章があります。
その中に、「誤字・脱字は、真面目に書いていない証拠と受け取られる。」「人名の誤字がないように、細心の注意を払おう。
とくに、ワープロを使っている場合にはそうである。ワープロの変換が正しいとは限らない。」とあります。



2016年3月18日金曜日

【TypeScript/JavaScript】d3.jsでグラフを作ろう(棒グラフ)

TypeScript及びJavaScriptを使って、グラフ作成する方法で、d3.jsを使う方法があります。
前回に続いて、グラフのつくり方を纏めてみました。

(1)データ
キー(label/value)と値(labelに対する値/valueに対する値)に値を設定したJsonデータを作成します。

            var res = [
                { label: "利益", value:  7943546 }
                , { label: "損失", value: 19508020 }
            ];



(2)線データ(ステップライン)の作成
idは、HTMLファイルdivタグ要素とします。
idにsvg要素を追加します。
widthは幅、marginは余白、heightは高さを表します。
svg要素を作成して、g要素を追加します。

                var svg = d3.select(id).append("svg")
                    .attr({
                        width: width,
                        height: height
                    })
                    .append("g")
                    .attr("transform", "translate(" + 200 + "," + 100 + ")");

taransformは位置を指定します。

棒(四角=rect)を定義します。
rectにクラス定義(bar)をして、CSSで色など属性を与えます。
               var rec = this.svg.selectAll(".bar")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", function (d) { return x(d.label); })
                    .attr("width", x.rangeBand())
                    .attr("style", "fill:" + barcolor)
                    .attr("style", "stroke:black")
                    .attr("y", function (d) { return height; })
                    .attr("height", function (d) {
                        return height - y(d.value);
                    })
                    .append("title")
                    .text(function (d) { return d.value.toLocaleString(); })
                    ;
                this.svg.selectAll("rect").attr("height", 0);



svg要素に棒グラフアニメーション(下から上に伸びる)定義します。
2秒間アニメーションを設定します。(transiton,durationを使用する)
                this.svg.selectAll("rect")
                    .transition().duration(2000)
                    .delay(function (d, i) {
                        return i * 300;
                    })
                    .attr("y", function (d) {
                        return y(d.value);
                    })
                    .attr("height", function (d) {
                        return height - y(d.value);
                    });

(2) 軸
d3.scale.ordinal() ・・・domain の配列の n 番目の値が、 range の配列の n 番目の値に対応
  ※こちらのサイトを一読すると理解しやすいです。
  http://blog.livedoor.jp/kamikaze_cyclone/archives/34197135.html
d3.scale.linear() ・・・ リニアスケールを設定
を使って、スケール定義します。

スケール定義することで、height/width内にデータが収まるように、スケールできるようになります。
            var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.3);
            var y = d3.scale.linear().range([height, 0]);


 d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
ticksで刻みも定義します。

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
            var yAxis = d3.svg.axis()
                .ticks(5) // 軸のチックの数。
                .scale(y)
                .orient("left"); 

x,yの範囲を定義します。

           x.domain(data.map(function (d) { return d.label; }));
            var dmax = d3.max(data, function (d) { return d.value; });
            var no = String(dmax).length;
            var unit = Math.pow(10, no - 1);
            var res = Math.floor(dmax / unit);
            dmax = (res + 1) * unit;
            y.domain([0, dmax]);
            y.range([height, 0]);


X軸、y軸を追加します。
 classはaxisにして、CSSファイルに軸の属性定義を行います。
            this.svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
            this.svg.append("g")
                .attr("class", "axis")
                .call(yAxis);

横方向のグリッド間隔を自動生成します。
attrにて、属性定義を行います。
            var ts = height / (res + 1);
            var rangeY = d3.range(0, height, ts);
            this.svg.selectAll("line.y")
                .data(rangeY)
                .enter()
                .append("line")
                .attr("x1", 0).attr("y1", function (d, i) {
                    return d;
                })
                .attr("x2", width).attr("y2", function (d, i) { return d; });

            this.svg.selectAll("line")
                .attr("stroke", "black")
                .attr("stroke-width", 1)
                .attr("stroke-dasharray", "1, 3")
                .attr("shape-rendering", "crispEdges");

(4) 情報表示 
値棒グラフ上表示します。
クラスはbarvalとして、属性をCSSファイルで定義します。

            this.svg.selectAll(".barval")
                .data(data)
                .enter().append("text")
                .attr("class", "barval")
                .attr("x", function (d) {
                    return x(d.label) + 5;
                })
                .attr("y", function (d) {
                    return y(d.value) - 2;
                })
                .text(function (d) {
                    return d.value.toLocaleString();
                });



on("mouseover")で、円弧をbrawon色にして、infoクラス定義したg要素を表示させて、
そのg要素に情報表示させます。

on("mouseout")で色をbarcolorで定義した色に戻します。
            this.svg.selectAll("rect")
                .on("mouseover", function (d, i) {
                    d3.select(this).attr("style", "cursor:pointer");
                    d3.select(this).attr("style", "fill:brown");
                    d3.select(this).attr("style", "stroke:black");                
       .on("mouseout", function (d, i) {
                    var color = barcolor;
                    var rec = d3.select(id).select("svg");
                    d3.select(this).attr("style", "fill:" + color);
                    d3.select(this).attr("style", "stroke:black");
                });





2016年3月16日水曜日

【TypeScript/JavaScript】d3.jsでグラフを作ろう(円グラフ)

TypeScript及びJavaScriptを使って、グラフ作成する方法で、d3.jsを使う方法があります。
前回に続いて、グラフのつくり方を纏めてみました。


(1)データ
キー(label/value)と値(labelに対する値/valueに対する値)に値を設定したJsonデータを作成します。

            res = [
                { label: "USD/JPY", value: 87 }
                , { label: "GBP/JPY", value: 6 }
                , { label: "EUR/USD", value: 3 }
                , { label: "CHF/JPY", value: 2 }
                , { label: "AUD/JPY", value: 1 }
                , { label: "EUR/JPY", value: 1 }
            ];


※Jsonデータの詳細は以下サイトに詳しく書かれています。
 http://hakuhin.jp/js/json.html

(2)線データ(ステップライン)の作成
idは、HTMLファイルdivタグ要素とします。
idにsvg要素を追加します。
widthは幅、marginは余白、heightは高さを表します。
svg要素を作成して、g要素を追加します。

                var svg = d3.select(id).append("svg")
                    .attr({
                        width: width,
                        height: height
                    })
                    .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

taransformは位置を指定します。

円弧を定義します。
            var pie = d3.layout.pie()
                .sort(null)
                .value(function (d: any) { return d.value; });


円弧の外径と内径を定義します。
            var arc = d3.svg.arc()
                .outerRadius(radius - 10)
                .innerRadius(0);


データバインドして、円弧を作成します。
classはarcとして、CSSファイルにarcの属性定義を行います。
g要素に円弧要素(arc)を設定します。

            var g = this.svg.selectAll("path")
                .data(pie(datas))
                .enter()
                .append("g")
                .attr("class", "arc");





            g.append("path")
                .attr("d", arc);


colorArrに円弧色を定義して、g要素に色を設定します。
colorArr.push("#00000"); などとして、円弧分設定します。

            g.attr("stroke", "black")   
                .style({
                    fill: function (d, i) {
                        return colorArr[i];
                    }
                });


svg要素に円弧アニメーション定義します。
svgにdataを使って円弧要素を作成します。
2秒で透過アニメーションを設定します。(transiton,durationを使用する)

                this.svg.selectAll("path")
                    .transition()   // トランジション開始
                    .duration(2000) // 1秒間でアニメーションさせる
                    .attrTween("d", function (d) {    // 指定した範囲で値を変化させアニメーションさせる
                        var interpolate = d3.interpolate(
                            { startAngle: 0, endAngle: 0 },   // 各円グラフの開始角度
                            { startAngle: d.startAngle, endAngle: d.endAngle }    // 各円グラフの終了角度
                        );
                        return function (t) {
                            return arc(interpolate(t)); // 時間に応じて処理
                        };
                    });


(3) 円弧にデータ表示
円弧にデータ(テキスト)させます。
尚、データ10以下は表示させないようにします。
            g.append("text")
                .attr("transform", function (d: any) { return "translate(" + D3Chart.arc.centroid(d) + ")"; })
                .attr("font-size", "10")
                .attr("font-family", "sans-serif")
                .style("text-anchor", "middle")
                .style("fill", "#ffffff")
                .text(function (d: any) { if (d.data.value < 10) return ""; return d.data.value; });


(4) 情報表示 


on("mouseover")で、円弧をbrawon色にして、infoクラス定義したg要素を表示させて、
そのg要素に情報表示させます。

var mousePos = d3.mouse(this);
にて、円弧の位置が取得できますので、情報g要素をその位置に表示させます。

on("mouseout")で表示した情報g要素を非表示させます。

            this.svg.selectAll("path")
                .on("mouseover", function (d, i) {
                    d3.select(this).attr("style", "cursor:pointer");
                    d3.select(this).attr("style", "fill:brown");
                    var lab = datas[i].label;
                    var val = datas[i].value + "%";
                    var pie = d3.select(id).select("svg");
                    var info = pie.append("g")
                        .attr("class", "info")
                        .attr("x", 0)
                        .attr("width", 70)
                        .attr("height", 62)
                        .style("fill", function (d) {
                            return d;
                        });
                    var width = d3.select(id).select("svg").attr("width");
                    var height = d3.select(id).select("svg").attr("height");
                    var mousePos = d3.mouse(this);
                    var info_x = mousePos[0] ;
                    var info_y = mousePos[1];
                    info.append("rect")
                        .attr("x", info_x)
                        .attr("y", info_y)
                        .attr("width", 100)
                        .attr("height", 50)
                        .attr("stroke", "black")
                        .attr("fill", "white");
                    info.append("text")
                        .attr("x", info_x +5)
                        .attr("y", info_y +20 )
                        .attr("font-family", "selif")
                        .style("fill", "black")
                        .text(lab);
                    info.append("text")
                        .attr("x", info_x +5)
                        .attr("y", info_y + 40 )
                        .attr("font-family", "selif")
                        .style("fill", "black")
                        .text(val);
                })
                .on("mouseout", function (d, i) {
                    var color = colorArr[i];
                    var pie = d3.select(id).select("svg");
                    d3.select(this).attr("style", "fill:" + color);
                    pie.select('g.info').remove();   
                });



(4) 凡例作成
円弧データ説明(凡例)を作成します。
            var legend = this.svg.selectAll(".legend")
                .data(colorArr)
                .enter().append("g")
                .attr("class", "legend")
                .attr("transform", function (d, i) {
                    return "translate(120," + i * 20 + ")";
                });


凡例の色を描画します。
            legend.append("rect")
                .attr("x", 0)
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", function (d) {
                    return d;
                });


凡例の説明を描画します。
            legend.append("text")
                .attr("x", 20)
                .attr("y", 9)
                .attr("dy", ".35em")  // width
                .attr("font-family", "selif")
                .style("text-anchor", "start")
                .style("fill", "#ffffff")
                .text(function (d, i) {
                    return datas[i].label;
                });


2016年3月14日月曜日

【TypeScript/JavaScript】d3.jsでグラフを作ろう(線フラフ)

TypeScript及びJavaScriptを使って、グラフ作成する方法で、d3.jsを使う方法があります。
ここでは、d3.jsの使い方及び、折れ線グラフ(ステップライングラフ)のつくり方を纏めてみました。

1、d3.jsについて
D3.jsはデータに基づいてDocumentを操作するためのJavaScritpライブラリで、SVG(※)を作成します。
D3はHTML/SVG/CSSを使って、Googleアナリティクスみたいなグラフを作成することができます。
マウスオーバーとかクリックで任意のデータをDOMと結合させ、データ表示することもできます。
Data-Driven な DOM 操作手順(頭のDを取って、D3というみたいです))

※SVG(スケーラブル・ベクター・グラフィックス)
SVG はテキストベースの画像フォーマットです。
簡単なマークアップコードの記述だけで指定でき、SVG コードを直接 HTML ドキュメント内に記述することもできます。
 実際に、小さな青い円を表示する場合、次のように記載すれば、ブラウザで表示できます。
<svg width="50" height="50">
   <circle cx="25" cy="25" r="22"
   fill="blue" stroke="gray" stroke-width="2"/>
</svg>

d3.jsの特徴:
・商用利用可能
・豊富なサンプル、ドキュメント
・インタラクティブなグラフの作成

・アニメーション
・jQueryライクなセレクタ(ドットによるメソッドチェイン)

 ⇒メソッドチェインが可能

2、TypeScriptでのd3.jsを使う
Visual Studio 2015を使って、TypeScript + d3.jsを使用します。
D3ライブラリとD3定義ファイル(d3.d.ts)をダウンロードして、VisualStudioに追加する。

(1) D3のライブラリ
 D3公式サイトからダウンロード。

(2) D3の型定義ファイル
 DefinitelyTypedからD3の型定義ファイルd3.d.tsをダウンロード。
 このファイルがあるとVisual Studio上でD3を使用するときにメソッド名等々を補完してくれます。

(3) Visual Studioでプロジェクトの作成及び、D3ライブラリの配置
 TypeScriptのプロジェクトを作成し、D3のライブラリを配置します。


d3フォルダを作成(例:project-folder)して、d3.jsを保存します。
d3.d.tsも同様)
【d3ファイル】 
・project-folder/d3/d3.js
project-folder/d3/d3.min.js (必要な場合)
d3.jsファイルのサイズを小さくし、読み込み時間を速くするために通常版から空白文字を除去したバージョンです。どちらを使っても機能に変わりありません。 
【d3定義ファイル】 
project-folder/d3/d3.d.ts
【HTMLファイル】 
  project-folder/d3/index.html


<!DOCTYPE html>
   <html lang="en">
      <head>
         <meta charset="utf-8">
         <title>D3 Test</title>
         <script type="text/javascript" src="d3/d3.v3.js"></script>
      </head>
      <body>
         <script type="text/javascript">
            // ここに D3 スクリプトを書きます
         </script>
      </body>
</html>
 
(4) グラフを作成
 あとは、body内に、d3を使ってグラフを記述します。
(1)~(4)までの手順は、以下のサイトを参照して、実行してみると良いです。
https://xnn.sakura.ne.jp/blog/2015/03/using_d3-js_with_typescript/

3、折れ線グラフのつくり方
 下のステップライングラフのつくり方について説明いたします。

ここでは、以下について説明します。
・データの扱い方
・線データ(ステップライン)の作成
・アニメーション
・イベント処理(マウスオン)
・情報表示 ・軸(スケール)

(1)データ
Xに日付、Yに値を設定したデータを作成します。
日付はDate型に変換します。
※Date型にしないと、グラフがうまく作れなかったので注意

            var parseDate = d3.time.format('%Y/%m/%d').parse;
            var data = [
                { date: "2015/03/01", value: -2518914 },
                { date: "2015/04/01", value: -2182314 },
                { date: "2015/05/01", value: -2019494 },
                { date: "2015/06/01", value: -1701534 },
                { date: "2015/07/01", value: -1548854 },
                { date: "2015/08/01", value: -1437104 },
                { date: "2015/09/01", value: -138463 },
                { date: "2015/10/01", value: 1000587 },
                { date: "2015/11/01", value: 1000587 },
                { date: "2015/12/01", value: 1000587 }
            ];
            data.forEach(function (d : any) {
                d.date = parseDate(d.date);
                d.value = d.value;
            });


(2)線データ(ステップライン)の作成
idは、HTMLファイルdivタグ要素とします。
idにsvg要素を追加します。
widthは幅、marginは余白、heightは高さを表します。
            var svg = d3.select(id).append('svg')
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .append('g')
                .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


svgにdataを使って線要素を作成します。
classはlineとして、CSSファイルにlineの属性定義を行います。
1秒で透過アニメーションを設定します。(transiton,durationを使用する)
            svg.append('path')
                .datum(data)
                .attr('class', 'line' )
                .attr('d', line0)
                .attr('opacity', '0')
                .transition()
                .duration(1000)
                .attr('opacity', '2.0');

線要素に点列を追加します。
classはcircle0にして、CSSファイルにlineの属性定義を行います。
on('mouseover',)で、#tooltipに情報表示します。
on("mouseout")で、情報表示を非表示にします。
 0.1秒ごとに、透過アニメーションを設定します。(transiton,durationを使用する)
            svg.selectAll('circle.t')
                    .data(data)
                    .enter()
                    .append('circle')
                    .attr('cx', function (d, i) {
                        return x(d.date);
                    })
                    .attr('cy', function (d, i) { return y0(d.value); })
                    .attr('r', 0)
                    .attr('class', 'circle0')
                    .style('stroke', 'black')
                    .on('mouseover', function (d) {
                        $('#tooltip').fadeIn();
                        $('#date').text(d.date);
                        $('#value').text(d.value);
                    })
                    .on("mouseout", function (d, i) {
                        $('#tooltip').fadeOut();
                    })
                    .transition()
                    .delay(function (d, i) {
                        return (i + 1) * 100;
                    })
                    .duration(1000)
                    .attr('r', 6);

線データを定義します(interpolateにて、ステップライン設定します)
            var line0 = d3.svg.line()
                .x(function (d: any) { return x(d.date); })
                .y(function (d: any) { return y0(d.value); });
            line0.interpolate("step-after");

(3) スケール・軸
 d3.time.scale()を使って、スケール定義します。
スケール定義することで、height/width内にデータが収まるように、スケールできるようになります。
 d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
            var x = d3.time.scale() .range([0, width]);
            var y0 = d3.scale.linear().range([height, 0]);  

 d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient('bottom')
                .ticks(d3.time.months, 1)
                .tickFormat(d3.time.format('%Y/%m/%d'));
            var yAxisLeft = d3.svg.axis()
                .scale(y0)
                .orient("left")
                .innerTickSize(-width)
                .outerTickSize(0)
                .tickPadding(10);
            x.domain(d3.extent(data, function (d) { return d.date; })).nice();
            y0.domain([d3.min(data, function (d) { return Math.min(d.value); }), d3.max(data, function (d) { return Math.max(d.value); })]).nice();
nice()を使うと、値の範囲を丁度良い幅に設定してくれます。

X軸、y軸を追加します。
 classはaxisにして、CSSファイルに軸の属性定義を行います。
            svg.append('g')
                .attr('class', 'axis')
                .attr('transform', 'translate(0,' + height + ')')
                .attr('fill', 'rgba(0,0,0,0.85)')
                .call(xAxis);
            svg.append('g')
                .attr('class', 'axis')
                .attr('fill', 'rgba(255,0,0,0.85)')
                .call(yAxisLeft);

横方向のグリッド間隔を自動生成します。
 classはglineにして、CSSファイルにグリッド線の属性定義を行います。
            var rangeY = d3.range(0, height, 50);
            svg.selectAll('line')
                .attr('class', 'gline')
                .attr("stroke-width", 1)
                .attr("stroke-dasharray", "1, 3")
                .attr("shape-rendering", "crispEdges");

塗り潰し領域を生成します。
 classはlareaにして、CSSファイルにグリッド線の属性定義を行います。
            var area = d3.svg.area()
                .x(function (d : any, i) { return x(d.date) })
                .y0(function (d: any, i) { return y0(d.value); })
                .y1(function (d, i) { return height; });
            area.interpolate("step-after");
            svg.append("path")
                .attr("d", area(data))
                .attr('class', 'larea')
                .attr("opacity", 0.2);


※「円グラフ」「棒グラフ」については、 別の投稿にて、説明いたします。

(4) 情報表示 
tooltipというidにて、div要素を作成します。
(2)で説明したように、on('mouseover',)で点列上にマウスがのった時にtooltipを表示させて、情報表示します。
            var tag: string =
                "<div id='tooltip'>" +
                "<p> <strong id='date'> </strong></p>" +
                "<p>値: <span id='value'> </span></p>" +
                "</div>";
            $(id).append(tag);

【参考URL】
http://ja.d3js.info/alignedleft/tutorials/d3/ 
http://tech-sketch.github.io/graph-d3js/
http://blog.okazuki.jp/entry/2014/02/08/230843
http://blog.okazuki.jp/entry/2014/02/09/161540
http://blog.okazuki.jp/entry/2014/02/09/212419
⇒プログラミングの一連の流れを書いてあるサイト

https://xnn.sakura.ne.jp/blog/2015/03/using_d3-js_with_typescript/
 ⇒TypeScriptを使ったd3.jsについて詳しく書かれているサイト

 https://d3js.org/
⇒公式サイト

http://dataisfun.org/series/d3-tutorial-elemental
http://ja.d3js.node.ws/ 
https://github.com/mbostock/d3/wiki/Gallery
⇒サンプル(こんなことができるよ、って)

http://dotinstall.com/lessons/basic_d3js
http://dotinstall.com/lessons/basic_svg
 ⇒最初は、「ドットインストール」で動画をみて学習するといいと思います。

http://www.openspc2.org/reibun/D3.js/
 ⇒細かい説明が書かれているサイト