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

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

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で配布さ れています。