Slide 1

Slide 1 text

JavaScript&可視化講習会 #1 2015/5/24 @OUCC

Slide 2

Slide 2 text

始める前に • 次の用語がわかる人？  変数  関数  オブジェクト  クラス • 次の言語が使える人？  C言語  C#  Python  Java

Slide 3

Slide 3 text

始める前に • 全ての用語がしっかりと理解できている方はおそらく恐ろしく暇だと思うので練習問題を解くか、僕がKC3のときに使った資料と練習問題を使ってください。(そこそこ難しいです) https://github.com/domitry/KC3_D3js • 質問はslackで飛ばしてください。僕が喋っている途中でも大丈夫です。

Slide 4

Slide 4 text

私は誰 • どみとり(@domitry) • 基礎工の3年 • 神経科学とかそっちら辺の人 • 普段はRuby, Python, Cあたりを書く

Slide 5

Slide 5 text

JavaScriptとは • 主にWebで使われる • Javaとはあんまし関係ない言語 • 僕と同い年

Slide 6

Slide 6 text

どこでも見かけるJavaScript

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

最近のJavaScript • 高速化高速化  V8 Engine  asm.js • 際限なく広がっていくJavaScriptの世界  Node.js (サーバーサイド)  WebGL (3D)  WebCL (並列化) • もうJavaScript書きたくない人たち  AltJS (TypeScript, CoffeeScript, JSX, etc.)  babel

Slide 10

Slide 10 text

今日やること・可視化 • 今可視化が熱い！！！

Slide 11

Slide 11 text

可視化のコミュニティ

Slide 12

Slide 12 text

Python

Slide 13

Slide 13 text

Ruby

Slide 14

Slide 14 text

D3.js

Slide 15

Slide 15 text

D3.js • Webエンジニア向けのライブラリ(not研究者) • 色々なことができる反面、複雑 • JavaScript文化の影響が強い

Slide 16

Slide 16 text

D3.jsを学ぶ意義 • データサイエンティストとかがもてはやされる時代、可視化にも一定の需要がある • 割とJavaScript的なライブラリなので JavaScriptに慣れるにはいいかも

Slide 17

Slide 17 text

お品書き • JavaScript入門 • HTML • Inline-SVG • D3.js入門

Slide 18

Slide 18 text

JavaScript入門

Slide 19

Slide 19 text

JavaScriptの実行環境 • 右上からその他のツール -> JavaScriptコンソール • コードを入力してEnterで実行 • Shift+Enterで複数行入力

Slide 20

Slide 20 text

Hello, world console.log("Hello, world!"); • コンソールで試してみよう

Slide 21

Slide 21 text

九九の表 for(var i=0; i<=9; i++){ for(var j=0; j<=9; j++){ console.log(i + " * " + j + " = " + i*j); } } • コンソールで試してみよう

Slide 22

Slide 22 text

念のため用語の説明 • メモリ…記憶領域 • 変数…メモリ上で値をしまっておく領域 • 制御文…プログラムを制御する分。分岐(if) や繰り返し(for, while)など • 演算子…+, -, %, =, ==みたいなやつ。

Slide 23

Slide 23 text

念のため用語の説明 • 手続き … procedure, 処理そのもの。 • 状態 … 処理の結果生まれたもの。(または処理の前段階で準備してあったもの) • アルゴリズム … 手順を記したもの。料理本のレシピみたいなもの

Slide 24

Slide 24 text

演算子と制御文、関数

Slide 25

Slide 25 text

JavaScriptの特徴 • 制御文(if, forなど)はC言語に似ている • ブロックは{}, 文の終わりに; for(var i=0; i<=9; i++){ if(i%3 && i%5)console.log(“FizzBuzz”); else if(i%3)console.log(“Fizz”); else if(i%5)console.log(“Buzz”); else console.log(i); }

Slide 26

Slide 26 text

JavaScriptの特徴 • 変数はvarで宣言 • 動的型付け言語、変数に何でも入れられる var hoge = 30; hoge = “Hello, world!”; hoge = [“a”, 1, 10, “hogehoge”]; console.log(hoge);

Slide 27

Slide 27 text

JavaScriptの特徴 • 演算子  +, -, *, /, %, ++, --, << , >>, >, <, =, ==, ===等 • 大体Cと一緒。 var a = 10, b = 3, c = 10; console.log(a+1, a%3, a++, a--, a==b, a==c); var hoge = [“a”, “b”, “c”]; var nya = [“a”, “b”, “c”]; console.log(a===b);

Slide 28

Slide 28 text

演算子 • +,-,*,/ … 四則演算 • ++, -- …一つずつ足す, 引く • A % B… 剰余(A mod B)

Slide 29

Slide 29 text

演算子 • = … 代入 • == … 値の比較 • === … 厳密等価演算子(型を含めて比較, 暗黙の型変換を行わない)  Ex: console.log(“1” === 1); // false console.log(“1” == 1); // true

Slide 30

Slide 30 text

演算子 • A && B … AかつB • A || B … AまたはB • !(falseかtrue)で真偽を反転 console.log(1==1, 1==2); console.log(1==1 && 2==2, 1!=2 || 1==2); console.log(!false, !true);

Slide 31

Slide 31 text

typeof, instanceof演算子 • 変数はそれぞれ”型, type”を持っている。(型については後述) • typeof A (Aは変数)とすると変数の型の名前を文字列で返す。 var a = “HogeHoge”; var b = 10; console.log(typeof a); // => “string” console.log(typeof b); // => “number”

Slide 32

Slide 32 text

if文 • 先ほどの条件演算子を使う • if(A){B}else{C}で、Aの条件が真だったらB を実行。偽だったらCを実行。 var a = 10, b = 20; if(a==b){ console.log(“Nyaaa”); }else{ console.log(“Nyan”); }

Slide 33

Slide 33 text

if文 • If-else if-else if-elseのように重ねることもできる • If-else{if-else}のように入れ子にもできる • {}の中身が一行だったら省略できる if(){ }else if(){ if(){ }else(){ } }else{ } if(a==b)console.log(“Hogeeee”);

Slide 34

Slide 34 text

練習問題 • 変数a, bを作り、それぞれに文字列と数値を代入する。a, bの型が一致するときはHoge, 一致しないときはNyaと出力せよ。

Slide 35

Slide 35 text

for文 • for(A;B;C){D}  1. Aで変数を初期化する。  2. Bの条件を満たしていればDを実行する。  3. Cを実行して2に戻る。後は繰り返し。 for(var i=0; i<10; i++){ for(var j=0; j>-5; j--){ console.log(i*j); } }

Slide 36

Slide 36 text

for文 • if文と同じく{}の中身が1行であれば{}は省略できる。 for(var i=0; i<10; i++)console.log(i);

Slide 37

Slide 37 text

練習問題 • 変数aに任意の数字を代入し、aが素数かどうか判定せよ。(a-1から2までforでループさせ、どれかで割り切れたら素数である。)

Slide 38

Slide 38 text

関数 • function 関数の名前(引数){処理内容}で手続きを関数にまとめることができる • 数学の関数と違って必ずしも値を返す必要はない function printHello(){ console.log(“Hello, world!”); } function plus(a, b){ return a + b; } console.log(plus(3, 4));

Slide 39

Slide 39 text

練習問題 • 与えられた数のmodを求める関数を作ろう  mod(10, 3); // 1 • nの階乗を求める関数を作ろう  fanc(3); // 6 • n番目のフィボナッチ数を求める関数を作ろう  fib(3); // 1+1 = 2

Slide 40

Slide 40 text

型とデータ構造

Slide 41

Slide 41 text

変数とデータ型 • JavaScriptは動的型付け言語。 • 型はちゃんとある。 var hoge = 30; hoge = “Hello, world!”; hoge = [“a”, 1, 10, “hogehoge”]; console.log(hoge);

Slide 42

Slide 42 text

変数とデータ型 • C言語における型の意味は主にメモリ上のサイズと解釈の仕方だった。 • JavaScriptではメモリ上の配置を気にする必要は(基本的には)ない。型はデータ構造と密接に関係している。 var arr = [“a”, “b”]; console.log(typeof arr); var hash = {a: “b”, c: “d”}; console.log(typeof hash);

Slide 43

Slide 43 text

数値型(number) • 整数や少数の区別なし var num0 = 1; var num1 = 1/3; var num2 = 100000000000000000000000000000000000000000000; console.log(typeof num0, typeof num1, typeof num2); console.log(num2);

Slide 44

Slide 44 text

文字列型(string) • “文字”と”文字列”は別物！でもJavaScriptではその違いを意識しなくてもよい！ • str[0]などで一文字づつ配列のようにアクセスできる。C言語ぽい。でもあくまでarray 型とは別物で、char型みたいなのはない。 var hoge = "Hello, world!"; console.log(typeof hoge); console.log(hoge + 3);

Slide 45

Slide 45 text

配列型(array) • 値を一杯入れられるデータ構造。順番を持つ。 • arr[0]のように順番に要素にアクセスできる。 var arr = [1, 2, 3, 4]; for(var i=0; i

Slide 46

Slide 46 text

連想配列型(object) • 鍵keyと値valueの組み合わせからなるデータ構造。順番はない。 • 他の言語だとhashやdictと呼ばれているもの • 実はJavaScriptにおいてはとてつもなく大きな意味を持っている(後述) var obj = {“a”: 10, “b”: 30}; console.log(obj);

Slide 47

Slide 47 text

連想配列型(object) • 鍵から値にアクセスできる。アクセスの仕方は二種類。  obj[“key”]  obj.key • どちらも同じ意味。だけどこれのおかげで JavaScriptは面白い。(後述) var obj = {“a”: 10, “b”: 30}; console.log(obj.a, obj[“a”]); obj[“c”] = 40; obj.d = 100; console.log(obj);

Slide 48

Slide 48 text

関数型(function) • 関数も文字列や配列と同じ扱い(これを関数を第一級オブジェクトとして扱う、と表現したりする。) • つまり、変数に代入したり、配列や連想配列の要素にしたりできる。

Slide 49

Slide 49 text

関数型(function) • 変数に代入するときは以下のように書く。 • この右辺の書き方を無名関数と呼ぶ。 var HogeHuga = function(){ console.log(“Hoge”); }

Slide 50

Slide 50 text

関数型(function) • JavaScriptでは無名関数を使った以下のような記法をよく見かける。これは一時変数を新たに宣言してスコープを汚さないためである。 (function(a){ var i = a*a; console.log(a*i); })(100); // ここで新しくiを宣言しても何の問題も起きない！

Slide 51

Slide 51 text

関数型(function) • 以下の2つは基本的に同じ意味。 function HogeHuga1(){ console.log(“Hoge”); } var HogeHuga2 = function(){ console.log(“Hoge”); };

Slide 52

Slide 52 text

関数型(function) • 以下のように、無名関数はその外側のスコープで宣言された変数を使うことができる。 var a = 100; var hogehuga = function(){ console.log(a); }; hogehuga(); // => 100 a = 200; hogehuga(); // => 200

Slide 53

Slide 53 text

関数型(function) • 以下のように、無名関数が生き続ける限りその無名関数が使う変数も生き続ける。 • これをこのクロージャclosureが変数aを束縛すると表現する。 var func = (function(){ var a = 100; return function(){ console.log(a); }; )(); func(); //=> 100

Slide 54

Slide 54 text

練習問題 • 与えられた連想配列に”hoge”というキーが存在するか確かめる関数を作ろう  hasHoge({hoge: 3}); //-> true  hasHoge({nya: 4}); //-> false • 与えられた配列の中に入っているのがすべて数値であるか確かめる関数を作ろう  isAllNumber([3, 4, 5]); //-> true  isAllNumber([1,2,”hoge”]); //-> false

Slide 55

Slide 55 text

Slide 56

Slide 56 text

ライブラリ等

Slide 57

Slide 57 text

ライブラリ • JavaScriptには標準で便利ライブラリがいくつか添付されている。 • 例えば正規表現のRegExpや数値計算用のもろもろが入ったMathなど。 • この内Mathは可視化でほぼ必ず使うのでいくつか機能を確かめておこう。

Slide 58

Slide 58 text

ライブラリ • Math.log, pow, exp, cos, sin, tan, acos, atan, atan2, … それぞれの値を求める関数 • Math.PI, Math.E …定数 • Math.floor, ceil, round…切り捨て切り上げ四捨五入の関数 • Math.min, Math.max…渡された引数の内最小最大のものを返す関数等々。使い方がわからなければググろう。

Slide 59

Slide 59 text

練習問題 • ラジアンから度に変換する関数を作ろう • Math.expやMath.powを自分の手で実装してみよう • Math.minとMath.maxの使い方を確かめよう

Slide 60

Slide 60 text

オブジェクト指向

Slide 61

Slide 61 text

オブジェクト指向 • JavaScriptはprototype型のオブジェクト指向言語 • 他の言語と性格が大きく違うので注意  classは存在しない！(ECMA6で入ったけどびみょ)  継承はできると思うな！(似たようなことはできる)  thisは一意に定まらない！(超大事) • LL言語でもLuaとかPerlあたりとは似てる仕組み。RubyとかPythonとは全然違う。

Slide 62

Slide 62 text

オブジェクトとは何か • 手続きと状態を持つもの。 • (まあ色々な考え方があるけどJavaScriptではこう考えておいて支障はない) • この手続きのことをメソッド、状態のことをプロパティやメンバ変数、メンバなどと呼ぶ。

Slide 63

Slide 63 text

オブジェクトとは何か • 関数はJavaScriptでは変数に代入でき、また連想配列などの要素としても利用できる。 • つまり配列や連想配列は手続きと状態の両方を持ちうる。 var obj = { hoge: 100, printHoge: function(){ console.log(this.hoge); } };

Slide 64

Slide 64 text

連想配列とオブジェクト • 配列よりも連想配列の方がラベリングしやすい・名前から実態が探索しやすいため、 JavaScriptにおけるオブジェクトは連想配列と同一のものとみなされる。 • だから連想配列がオブジェクトという名前 • “配列オブジェクト”はオブジェクト=連想配列の一種。(配列型とは一応別物。)

Slide 65

Slide 65 text

例 • 例:以下のfloor, ceil, roundはそれぞれMath オブジェクトの持つメソッドである。

Slide 66

Slide 66 text

クラスとは • ここでオブジェクトの他にクラスという概念を新しく導入する。すでに他の言語でクラスの概念を習得した人は読み飛ばしても ok。 • クラスとは似た性質を持つオブジェクトの” 鋳型”のようなものである。 A a クラスA printHoge() hoge printHoge() hoge オブジェクトa

Slide 67

Slide 67 text

クラスとは • あるクラスから作られるオブジェクトのことをそのクラスのインスタンスと呼ぶ。 • あるクラスから作られるオブジェクトは同じメソッドと同じ名前のプロパティを共通して持っている。これらのことをインスタンスメソッド、インスタンス変数などと呼ぶ。 A a c b インスタンスa,b,c クラスA printHoge() printHoge() printHoge() hoge hoge hoge printHoge() hoge

Slide 68

Slide 68 text

クラスとは • クラスからオブジェクトを作る際に使うメソッド(関数)のことをコンストラクタと呼ぶ。 • ここまでの説明はオブジェクト指向を標榜する言語でそれなりに広く使われる定義・用語である。 A a クラスA printHoge() hoge printHoge() hoge オブジェクトa コンストラクタ

Slide 69

Slide 69 text

JavaScriptにおけるクラス • classという言葉は使わないがクラス的に使える機能ならある。 function A(val){ this.hoge = val; } A.prototype.printHoge = function(){ console.log(this.hoge); }; var a = new A(100); a.printHoge(); //=> 100

Slide 70

Slide 70 text

JavaScriptにおけるクラス • 下の例ではAがコンストラクタ的な関数、 printHogeがAクラスのメソッド, aはAクラスのインスタンスと表現することができる。 function A(val){ this.hoge = val; } A.prototype.printHoge = function(){ console.log(this.hoge); }; var a = new A(100); a.printHoge(); //=> 100

Slide 71

Slide 71 text

JavaScriptにおけるクラス • hogeはAクラスのインスタンスが共通して持つプロパティである。このプロパティにはメソッドの中からthisを介してアクセスできる。 function A(val){ this.hoge = val; } A.prototype.printHoge = function(){ console.log(this.hoge); }; var a = new A(100); a.printHoge(); //=> 100

Slide 72

Slide 72 text

thisに注意！ • thisは便利なのだが、時々直観的でない動作をする。例えば前頁のサンプルを改変した以下のコードを実行してみると、Undefined と表示される。 function A(val){ this.hoge = val; } A.prototype.printHoge = function(){ console.log(this.hoge); }; var a = new A(100); var func = a.printHoge; func(); //=> Undefined

Slide 73

Slide 73 text

thisに注意！ • 実はthisはメソッドを呼び出す際に . の左に書いたオブジェクトを指す変数なのである。 • 下の用に.を省略すると、thisにはグローバルオブジェクトのwindowが入る。 function A(val){ this.hoge = val; } A.prototype.printHoge = function(){ console.log(this.hoge); }; var a = new A(100); var func = a.printHoge; func(); //=> Undefined

Slide 74

Slide 74 text

thisに注意！ • メソッドを呼び出す際.の左に何を書いたかでthisは変動する。 • これはかなり大きな落とし穴なので注意。僕も未だに時々やります。

Slide 75

Slide 75 text

問題 • 以下の3つのコードを実行し、thisが何になっているか確認してください。  _.apply({a: 3, b: 4}, function(){console.log(this);})  function A(){ console.log(this); } A();  function B(){ this.hoge = “Hoge”; } B.prototype.printHoge = function(){ console.log(this.hoge); } var b = new B(); var func = b.printHoge; func();

Slide 76

Slide 76 text

問題 • 先ほどの項でオレオレpow，オレオレexpを作った人はついでにオレオレMathオブジェクトを作ってみてください。

Slide 77

Slide 77 text

オブジェクト指向の続き • (ここからは特に説明しないと思うので好きな人だけ読んでください)

Slide 78

Slide 78 text

型とオブジェクト

Slide 79

Slide 79 text

型とオブジェクト

Slide 80

Slide 80 text

JavaScriptにおける継承 • みんな大好き”継承”はJavaScriptにおいてどう実装されているのか？

Slide 81

Slide 81 text

JavaScriptにおける継承

Slide 82

Slide 82 text

HTML

Slide 83

Slide 83 text

HTMLとは • Webサイトの静的な部分を記述するためのマークアップ言語 • ちょっと前までXHTMLとかに潰されるのではという雰囲気があったがHTML5で復権 • 昔は何でもHTMLでできたけど最近(というほど最近でもないけど)は見た目はcss、動きをつけるのはJSでやろうという流れ。

Slide 84

Slide 84 text

HTMLとは • 下のようにで囲まれた部分をname要素と呼ぶ。 • classやidのことを属性attributesと呼ぶ。

Hello

Hello, world!

Slide 85

Slide 85 text

HTMLとは • 要素は入れ子にすることができる。 • 下のdivを親要素、h1やpを子要素と呼ぶ。

Hello

Hello, world!

Slide 86

Slide 86 text

HTMLとは • 下に書いてある属性の内、classは複数の要素につける名前、idは一つの要素にしかつけられない名前のことをさす。 • styleの中身がCSS。よく見たら別言語であることがわかる。

Hello

Hello, world!

Slide 87

Slide 87 text

問題 • 適当なWebページを開いてソースコードを眺めてみてください。d3.jsの公式サイトとかお勧め。

Slide 88

Slide 88 text

Inline-SVG

Slide 89

Slide 89 text

SVGとは • HTMLの規格を策定しているのと同じ団体 W3Cが策定しているベクターグラフィックの規格 • HTMLのようなマークアップ言語(正確には XMLで)画像が書ける。 • 拡大縮小しても品質が劣化しない。

Slide 90

Slide 90 text

例えば • Wikipedia日本語版のマスコットキャラクターの配布形式がsvg http://upload.wikimedia.org/wikipedia/co mmons/1/1b/Neko_Wikipe-tan.svg • 右クリックしてソースコードを表示してみよう

Slide 91

Slide 91 text

Inline-SVGとは • 元々HTMLもSVGもxmlの一種なのでいっしょくたに書いても問題ないんじゃないの？という規格。 • SVGが一時期下火だったこともありブラウザに実装されてきたのはごく最近。 • 実装が新しいのでブラウザ間で辻褄が合わないことがままある。規格にも穴があったりする。

Slide 92

Slide 92 text

例えば • Snap.svg(http://snapsvg.io/) のワニなんかはinline-svgで動いてる。

Slide 93

Slide 93 text

実際のInline-SVG • 一つの図形(円、矩形、線…etc.)が一つの要素として扱われる。

Slide 94

Slide 94 text

Inline-SVGの各要素について • • この中に色々な図形を表す子要素を入れていく。 • 今回使う属性はwidth, heightくらいのものだと思う。 •

Slide 95

Slide 95 text

矩形(くけい) Attributes: x, y, width, height Example:

Slide 96

Slide 96 text

円 Attributes: cx, cy, r, stroke, stroke-width, fill Example:

Slide 97

Slide 97 text

線① Attributes: x1, y1, x2, y2, stroke, stroke-width, fill Example:

Slide 98

Slide 98 text

線② Attributes: d, fill, stroke, stroke-width, fill Example: 省略。ここら辺を参考に。 http://www.hcn.zaq.ne.jp/___/SVG11- 2nd/paths.html

Slide 99

Slide 99 text

グループ Attributes: Example:

Slide 100

Slide 100 text

transform属性 • transform=“translate(10, 30) rotate(100)” でx, y方向にそれぞれ10, 30平行移動, 100度回転という意味。 • これがあるからgroupが便利になる。

Slide 101

Slide 101 text

その他 • 他にもなど色々な要素、属性がありますが省略します。詳しくは以下の Webページでどうぞ。 • http://www.w3.org/TR/SVG/Overview.ht ml • http://www.w3schools.com/svg/default.a sp

Slide 102

Slide 102 text

問題 • 次の図形を書いてください。

Slide 103

Slide 103 text

D3.js入門

Slide 104

Slide 104 text

D3.jsとは • inline-svgの要素を付けたり消したり、属性を書き換えたりをJavaScriptから楽に行おうというライブラリ。 • jQueryを知っている人ならば感覚がすぐつかめるかもしれない。

Slide 105

Slide 105 text

D3.jsの基本 • Selection: HTMLやInline-SVGの要素をラップしたもの。  d3.select(str);  d3.selectAll(str); • 等を使って作る。 Rect selection

Slide 106

Slide 106 text

d3.select, d3.selection • d3.select(“#hoge”)でid属性にhogeが指定された要素を一つ取ってくる。 • d3.selectAll(“.nya”)でclass属性にnyaが指定された要素をすべて取ってくる。 • d3.select(“body”)でbody要素を取ってくる。 Rect #hoge .nya Rect #nyan .nya body selection selection selectAll(“.nya”) selectAll(“body”)

Slide 107

Slide 107 text

練習問題 • サンプルのd3_select.htmlを開き、以下のコマンドをコンソールで実行してください。それぞれのselectionに何が入っているかを console.logで確認してください。  var s1 = d3.select(“rect”);  var s2 = d3.selectAll(“rect”);  var s3 = d3.select(“#hoge”);  var s4 = d3.selectAll(“nya”);

Slide 108

Slide 108 text

Selection • Selection.attr(属性の名前, 新しい値) • セレクションがラップする要素の属性を書き換える。 • Example:  var selection = d3.select(“rect”);  selection.css(width, 300);

Slide 109

Slide 109 text

Selection • Selection.css(プロパティの名前, 新しい値) • Selection.attrと同様にCSSのプロパティを更新する。  var selection = d3.select(“div”);  selection.css(“width”, 1000);

Slide 110

Slide 110 text

Selectionその他のAPI • Selection.append(str)  新しい要素を付け足す。strはrectなど要素名。 • Selection.remove()  selectionがラップする要素を削除する。 • Selection.text(str) 

hoge

のhogeにあたる部分を変更する。 • Selection.select(str), selectAll(str)  子要素から条件に合う要素を探す。

Slide 111

Slide 111 text

練習問題 • サンプルのd3_select.htmlを開き、以下の操作を実行してください。  divの子供のrectをすべて選択して、console.logでその中身を確認する。 • サンプルのd3_select.htmlを開き、以下の操作を実行してください。  真ん中の赤い円の半径を3倍にする  赤い円に黒い縁を付ける  bodyに新しいdiv要素をつけたし、その中に Hello,worldの文字を入れる。

Slide 112

Slide 112 text

Selection.attrの謎 • 実はSelection.attrの第二引数には即値だけでなく関数を入れることができる。 var arr = [1, 10, 30]; d3.select("svg") .selectAll("rect") .data(arr) .enter() .append("rect") .attr({ x: function(d, i){return 40*i}, y: 0, height: function(d, i){return 10*d;}, width: 30, fill: "#000" });

Slide 113

Slide 113 text

Selection.data • 肝は4行目の.data()である。ここでarrの各要素とhtmlの要素をひとつずつ紐づけしている。 • そしてxとheightに指定した関数では各要素に紐づけされた配列の要素とそのインデックスを受け取り、属性に反映している。

Slide 114

Slide 114 text

Selection.data • 下のenter()や存在しない要素へのselectAll を理解するにはstageの概念が必要である。 var arr = [1, 10, 30]; d3.select("svg") .selectAll("rect") .data(arr) .enter() .append("rect") .attr({ x: function(d, i){return 40*i}, y: 0, height: function(d, i){return 10*d;}, width: 30, fill: "#000" });

Slide 115

Slide 115 text

Selection.data • stageの概念はd3.jsを使いこなすには必須であるが、当面のところ棒グラフを作ったり、散布図を作る際には理解せずとも大丈夫なので一回目では触れないこととする。 • 理解のためには以下のページを参照のこと。 • http://ja.d3js.node.ws/document/tutorial/ circle.html

Slide 116

Slide 116 text

練習問題 • d3_bar_chartを改変してそれぞれの棒の色を変えてみましょう。色はfill属性の値を変更することで変えられます。

Slide 117

Slide 117 text

まとめ • 皆さんの気力が残っているならば2回目に続く。

Slide 118

Slide 118 text

出展 • Wikipedia-tan:  CC-BY-SAで配布されています。  Wikipe-tan  User:Lokisis  User:Malyszkz/gallery  File:Neko Wikipe-tan.png • 猫のイラストは全てPublic Domainで配布されています。