d3.js demonstration

%KTΛ ࢖ͬͯΈΑ͏ !NVEEZEJYPO (56((JSMT.FFUVQ

!NVEEZEJYPO "NVEEZEJYPO #NVEEZEJYPO ! /PEFKT 1FSM 7JTVBMJ[BUJPO 5JNF4FSJFT /FVSBM/FUXPSL ࢲJT

ΞδΣϯμ %KTͱ͸ %KTͷྲྀΕ %KTͷαϯϓϧ঺հ %KTϋϯζΦϯ ࢄ෍ਤ ๮άϥϑ ંઢάϥϑ άϥϑͷՄࢹԽ

σʔλՄࢹԽͱ͸ The main goal of data visualization is its ability
to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ σʔλՄࢹԽͷ໨త͸ɺσʔλΛՄࢹԽ͠ɺ ৘ใΛ໌͔֬ͭޮ཰తʹ఻͑Δ͜ͱͰ͋Δ $

ࠓ೔ͷࢿྉͰ͢ IUUQTHJUIVCDPNNVEEZEJYPO (56((*3-450,:0

%KTͱ͸

ΩϥΩϥԵ

%KTͱ͸ %BUB%SJWFO%PDVNFOUT JOMJOF47( IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT 47(@*O@)5.-@*OUSPEVDUJPO ෳ߹ϥΠϒϥϦ 47(ૢ࡞ ਺஋ॲཧ ՄࢹԽϢʔςΟϦςΟ

%KTͱ͸d%%%d < > 図形化

%KTͱ͸d%%%d < > <
> 正規化

%KTͱ͸d%%%d < > <
> 正規化図形化

%KTͱ͸d%%%d < > <
> 正規化図形化 %BUB%SJWFO %PDVNFOUT

%KTͱ͸d%%%d 4FQBM-FOHUI 4FQBM8JEUI 1FUBM-FOHUI 1FUBM8JEUI 4QFDJFT
TFUPTB TFUPTB TFUPTB TFUPTB TFUPTB WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB

%KTͱ͸d%%%d 4FQBM-FOHUI 4FQBM8JEUI 1FUBM-FOHUI 1FUBM8JEUI 4QFDJFT
TFUPTB TFUPTB TFUPTB TFUPTB TFUPTB WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB %BUB%SJWFO %PDVNFOUT

%KTͱ͸d47(d 47(4DBMBCMF7FDUPS(SBQIJDT ! ! ! ! ! )5.-ͰʮJOMJOF47(ʯ͕ར༻Մೳʹʂ IUNMʹTWH YNM
ΛຒΊࠐΜͰར༻Մೳʂ http://www.slideshare.net/k

%KTͱ͸d47(d IUNM IFBEུIFBE CPEZ TWHXJEUIIFJHIU DJSDMFDYDZ SpMMSFE TWH CPEZ IUNM

%KTͱ͸d47(d IUNM IFBEུIFBE CPEZ TWHXJEUIIFJHIU DJSDMFDYDZ SpMMSFE TWH CPEZ IUNM
JOMJOF47( ಥવͷؙ

%KTͱ͸d47(d 9.-Ͱ͔͚Δʂ Ξχϝʔγϣϯʹڧ͍ʂ *OTQFDUPSͰݟΒΕΔʂ ֦େॖখʹڧ͍ʂ ൓ରʹ 8FC(-Ͱ%ʹʂ ฏ໘ͷඳըΛߴ଎ʹߦ͑Δʂ ໘ੵ͕ܾ·͍ͬͯΕ͹ҰఆͷύϑΥʔϚϯε ը૾ϑΥʔϚοτͰอଘͰ͖Δʂ
http://dev.opera.com/articl

%KTͷྲྀΕ

%KTͷྲྀΕ σʔλ࡞Δ 47(ͷ४උΛ͢Δ %0.ͱσʔλΛൺֱ͢Δ ଍Γͳ͍෦෼Λσʔλ͔Β%0.Λੜ੒ BUUSΛ͍͡Δ

αϯϓϧͰઆ໌

%KTͷྲྀΕ)5.- جຊ͸͜ΕͰͣͬͱ͍͖·͢ <!doctype html> <html> <head> <meta charset="utf-8"> <title>D3.js on
GTUG Girls Tokyo</title> <style> .axis path, .axis line { fill: none; stroke: grey; } </style> </head> <body> <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/ d3.min.js"></script> <script type="text/javascript" src="./src/main.js"></script> </body> </html>

%KTͷྲྀΕ8FC 8FC্͓͛ͯ͘ͱ"KBYͱ͔΋࢖͑ͯศརͰ͢ python -m http.server 5000 python -m SimpleHTTPServer 5000
plackup -MPlack::App::Directory -e 'Plack::App::Directory->new(root => ".")->to_app' ruby -run -e httpd -- --port=5000 . ruby -rwebrick -e 'WEBrick::HTTPServer.new(:Port => 5000, :DocumentRoot => ".").start' http://blog.kamipo.net/entry/2013/02/20/122225

%KTͷྲྀΕσʔλ σʔλΛ࡞Γ·͢ ͜͏͍͏ͷ࡞͓ͬͯ͘ͱศར // データ生成ユーティリティ var dataGenerator = function(len, gen){
var array = [], i = 0; for(i = 0; i < len; i++){ array.push(gen ? gen(i) : i); } return array; }; // データ生成 var data = dataGenerator(100, function(i){ return { id: i, name: "name "+ i, x: 0|Math.random() * width, y: 0|Math.random() * height }; });

%KTͷྲྀΕ47( ౔୆ TWH ࡞Γ // var svg = d3.select("body").append("svg") .attr({width:
WIDTH, height: HEIGHT}); var main = svg.append("g") .attr({ width: width, height: height, transform: “translate("+margin+","+margin+")" }); 初出 * (selection) d3.select * (selection) selection.append * (selection) selection.attr

%KTͷྲྀΕσʔλͱ%0.ͷඥ෇͚ σʔλͷඥ෇͚ var circle = // 現状の取得 main.selectAll("g.circle") // データのヒモ付
.data(data) // データ > 現状(DOM)の部分を取得 .enter() // "g"要素を追加し、classをセット .append("g").attr({"class": "circle"}); 初出 * (selection) selection.selectAll * (selection) selection.data * (selection) selection.enter

%KTͷྲྀΕσʔλ͔ΒυΩϡϝϯτ σʔλ͔Βͷཁૉଐੑ circle.append("circle").attr({ r: 10, cx: function(d){ return d.x; },
cy: function(d){ return d.y; }, fill: "red" });

%KTͷྲྀΕDPMPS ৭Λऔಘͯ͠ΈΑ͏ var color = d3.scale.category20(); circle.append("circle").attr({ r: 10, cx:
function(d){ return d.x; }, cy: function(d){ return d.y; }, fill: function(d, i){ return color(i); } }); 初出 * (scale) d3.scale.category20

%KTͷྲྀΕ σʔλ࡞Δ 47(ͷ४උΛ͢Δ %0.ͱσʔλΛൺֱ͢Δ ଍Γͳ͍෦෼Λσʔλ͔Β%0.Λੜ੒ BUUSΛ͍͡Δ

4FMFDUJPO ඥ෇͚ͨσʔλ طଘͷ%0. FYJU TFMFDUJPO FOUFS

4FMFDUJPO ྫ͑͹ ඥ෇͚ͨσʔλ طଘͷ%0. FYJU TFMFDUJPO FOUFS ଐੑɾελΠϧɾςΩ ετͷมߋͳͲΛߦ͏ ৽نʹ%0.Λ௥Ճ
͠ɺಉ࣌ʹଐੑɾελ ΠϧɾςΩετΛηο τ͢Δ طଘͷ%0.Λ࡟আ͠ ͨΓɺಁ໌౓Λ্͛ͨ ΓΛߦ͏

%KTͰ๮άϥϑ

๮άϥϑ ৽͍͠࿩ ETDBMFPSEJOBM TDBMFSBOHF#BOET TDBMFEPNBJO ETDBMFMJOFBS TDBMFSBOHF EFYUFOUENJOENBY ETWHBYJT TFMFDUJPODBMM

๮άϥϑ σʔλ࡞੒ // データ生成 var data = dataGenerator(10, function(i){ return
{ id: i, name: "name "+ i, // height よりも大きい! y: 0|Math.random() * 1000 }; });

๮άϥϑ σʔλ੔ཧ ΞΫηαΛࢦఆ͢Δ͜ͱͰɺ഑ྻ͔Βॊೈ ʹ࠷େɾ࠷খɾൣғΛऔΓग़ͤΔ ଞʹ΋ฏۉͱ͔தԝ஋ͳͲ΋Մೳ // データの調査 var min =
d3.min(data, function(d){ return d.y;}), max = d3.max(data, function(d){ return d.y;}), extent = d3.extent(data, function(d){ return d.y;}); アクセサ初出 * (number) d3.min / d3.max * ([number, number]) d3.extent

๮άϥϑ εέʔϧ࡞੒௒ॏཁʂTDBMFΛ੍͢͜ͱඞਢ var x = d3.scale.ordinal() .domain(data.map(function(d){ return d.id; }))
.rangeBands([0, width], 0.2), y = d3.scale.linear() .domain([0, max]) .range([height, 0]); // [0, height]じゃない！ EPNBJO ೖྗ SBOHF ग़ྗ ͷม׵ RVBOUJUBUJWFPSEJOBMͷछྨ RVBOUJUBUJWF͸ʮൣғൣғʯ PSEJOBM͸ʮ*%ൣғʯ ൣғ৘ใͷఏڙ 初出 * (scale) d3.scale.linear / d3.scale.ordinal

๮άϥϑ TDBMFͷSBOHF͕< IFJHIU>Ͱ͸ͳ͘ <IFJHIU >ͩͬͨཧ༝ ϒϥ΢β্Ͱ͸ࠨ্͕ ӈʹߦ͚͹
Y ɺԼʹߦ͚͹ Z େ͖͍஋΄Ͳʮߴ͍ʯʮখ͍͞஋ʯ ߴ͞ͷ΄͏Λௐ੔ʮIFJHIUߴ͞ʯ

๮άϥϑ ཁૉͷඳըͷ४උ var bar = // 現状の取得 main.selectAll("g.bar") // データのヒモ付
.data(data) // データ > 現状(DOM)の部分を取得 .enter() // "g"要素を追加し、classをセット .append("g") .attr({ "class": "bar", transform: function(d){ // コツ: 位置合わせをやっておく return “translate("+x(d.id)+","+height+")"; } });

๮άϥϑ ཁૉͷඳըͷ४උ var bar = // 現状の取得 main.selectAll("g.bar") // データのヒモ付
.data(data) // データ > 現状(DOM)の部分を取得 .enter() // "g"要素を追加し、classをセット .append("g") .attr({ "class": "bar", transform: function(d){ // コツ: 位置合わせをやっておく return “translate("+x(d.id)+","+height+")"; } }); 描画上の一番下に合わせる height

๮άϥϑ ཁૉͷඳը bar.append("rect").attr({ width: x.rangeBand(), height: function(d){ return height -
y(d.y); }, y: function(d){ return y(d.y) - height; }, fill: "red" }); // ラベルも付けておきます bar.append("text").text(function(d){ return d.y;});

๮άϥϑ ࣠ͷ࡞੒ var xaxis = main.append("g").call(d3.svg.axis().scale(x)).attr({ "class": "axis", transform: "translate(0,"+height+")"
}); var yaxis = main.append(“g").call(d3.svg.axis().scale(y).orient("left")) .attr({ "class": "axis" }); 初出 * (svg) d3.svg.axis * (selection) selection.call

ؓ࿩ٳ୊47(ཁૉ

47(Ͱ࢖͑Δλά TWH H EFGT TZNCPM VTF QBUI MJOF SFDU DJSDMF
FMMJQTF QPMZMJOF QPMZHPO ! ͋ͱ͸ϑΟϧλʔपΓ͕ͨ͘͞Μ͋Γ·͕͢ ΄ͱΜͲ࢖͏ػձ͸͋Γ·ͤΜ

47( ( 47( ͜ͷλά͸ແ͍ͱ࢝·Γ·ͤΜʂඞͣ࡞Γ·͢ ( ࢠཁૉΛάϧʔϓԽ͢Δ͜ͱ͕Ͱ͖·͢ɻ ྫ͑͹ʮ๮ͱϥϕϧʯͷҐஔΛಉ࣌ʹม͑Δʹ͸ (ཁૉͷҐஔΛ੍ޚ͢Ε͹Ұ౓Ͱߦ͑·͢͠ɺΞ χϝʔγϣϯͷ࣌΋ख͕ؒݮΓ·͢ ͱ΋ʹXJEUIIFJHIUUSBOTGPSNଐੑΛऔΓ·͢

1"5) ͢΂ͯͷඳըཁૉ HSBQIJDTFMFNFOU ͸͜ΕͷBMJBT ͩͱߟ͑Δ͜ͱ͕Ͱ͖·͢ EଐੑͰσʔλύεจࣈྻΛ౉͢͜ͱͰඳըͤ͞·͢ FH.--[ ͔Β։࢝
. ͠ɺ ʹҠಈ - ɺ ʹҠಈͯ͠ɺด࿏Λ࡞Δ [ pMMଐੑด࿏ͷதΛࢦఆͨ͠৭ͰృΓͭͿ͢ TUSPLFଐੑύεΛࢦఆͨ͠৭Ͱඳ͘ TUSPLFXJEUIଐੑύεͷઢͷଠ͞Λࢦఆ͢Δ

$*3$-& 3&$5 -*/& &--*14& DJSDMFཁૉ Sଐੑ൒ܘΛࢦఆ DYDZଐੑத৺ͷYZ࠲ඪΛࢦఆ SFDUཁૉ XJEUIIFJHIUଐੑۣܗͷ෯ߴ͞Λࢦఆ YZଐੑۣܗͷࠨ্ͷҐஔΛࢦఆ
SYSZଐੑؙ֯ͷପԁ൒ܘΛࢦఆ MJOFཁૉ YYZZଐੑ୹఺ͷ࠲ඪΛࢦఆ FMMJQTFཁૉ DYDZଐੑପԁͷத৺Ґஔͷ࠲ඪΛࢦఆ SYSZଐੑପԁͷ൒ܘΛࢦఆ

5SBOTGPSNଐੑ USBOTGPSNଐੑʹ͸จࣈྻͰԼهΛࢦఆ͢Δ ͜ͱ͕Ͱ͖·͢ NBUSJYมܗߦྻ ཁૉ Λࢦఆ USBOTMBUFฒߦҠಈFHUSBOTGPSN 9 :
SPUBUFճసFHSPUBUF TLFX9TLFX:܏ࣼ ฏߦ࢛ลܗΈ͍ͨʹ௵ ͢ FHTLFX9 TDBMF֦େॖখFHTDBMF TDBMF

%KTͰંઢάϥϑ

ંઢάϥϑ ৽͍͠࿩ EUJNFTDBMF TFMFDUJPOEBUVN ETWHMJOF

σʔλ࡞੒ // データ生成 var data = dataGenerator(10, function(i){ var now
= Date.now(); return { id: i, name: "name "+ i, x: new Date(now + 60000 * i), // 一分おき y: 0|Math.random() * 1000 }; }); ંઢάϥϑ

εέʔϧ࡞੒ // スケールの生成 var x = d3.time.scale() .domain(d3.extent(data, function(d){ return
d.x; })) .range([0, width]), y = d3.scale.linear().domain([0, max]).range([height, 0]); ࣌ؒʹಛԽͨ͠εέʔϧ ࣗಈͰ࣌ؒͷ۠ؒΛௐ੔ͯ͘͠ΕΔͨΊɺBYJTʹར༻͠ ͨ࣌ʹศར ೥ɺ࢛൒ظɺ݄ɺ೔ɺ࣌ɺ෼ɺͳͲॊೈʂ 初出 * (scale) d3.time.scale ંઢάϥϑ

ཁૉඳըϢʔςΟϦςΟ var line = d3.svg.line() .x(function(d){ return x(d.x); }) .y(function(d){
return y(d.y); }); // PATHDATA=line([{x: X, y:Y},{}]) 配列を受けて、PathDataの文字列を返す ྨࣅͷTWHͱͯ͠BSFB BSD EJBHPOBMͳ Ͳ͕͋Δ 初出 * (function) d3.svg.line ંઢάϥϑ

ඳը var serie = // 現状の取得 main.append("path") // データのヒモ付 .datum(data)
.attr({ d: line, fill: "none", stroke: color(0) }); 初出 * (selection) selection.datum path要素に対して、配列を紐付ける ંઢάϥϑ

σʔλͷ४උ ΦϒδΣΫτͷ഑ྻͷ഑ྻ // データ生成 var series = dataGenerator(3, function(i){ return
{ name: "series " + i, data: dataGenerator(10, function(j){ var now = Date.now(); return { id: j, name: "name "+ j, x: new Date(now + 60000 * j), // 一分おき y: 0|Math.random() * 1000 }; }) }; }); ෳ਺ͷંઢάϥϑ

σʔλͷൣғΛऔಘ ճNJONBYΛ࢖͏ var maxY = d3.max(series, function(serie){ return d3.max(serie.data, function(d){
return d.y;}); }); var minX = d3.min(series, function(serie){ return d3.min(serie.data, function(d){ return d.x;}); }), maxX = d3.max(series, function(serie){ return d3.max(serie.data, function(d){ return d.x;}); }); ෳ਺ͷંઢάϥϑ

ඥ෇͚ͯඳը var serie = // 現状の取得 main.selectAll("g.serie") // データのヒモ付 .data(series)
.enter() .append("g").attr({"class": "serie"}); ! serie.append("path").attr({ d: function(d){ return line(d.data); }, fill: "none", stroke: function(d){ return color(d.name); } }); ෳ਺ͷંઢάϥϑ

0OFNPSFUIJOH ֤ϙΠϯτʹυοτͱ਺஋Λ var serie = // 現状の取得 main.selectAll("g.serie") // データのヒモ付
.data(series) .enter() .append("g").attr({ "class": "serie", fill: function(d){ return color(d.name); } }); 子要素すべてのfillを指定

ඥ෇͚ͯඳը var point = serie.selectAll("g.point") .data(function(d){ return d.data;}).enter() .append("g").attr({ "class":
"point", transform: function(d){ return "translate("+x(d.x)+","+y(d.y)+")"; } }); point.append("circle").attr({r: 5}); point.append("text").text(function(d){ return d.y; }).attr({dy: -8}); 0OFNPSFUIJOH

"OJNBUJPO

TFMFDUJPOUSBOTJUJPO ʹ͍ͭͮͯBUUS Λࢦఆ͢Δ͜ͱͰݱࡏࢦఆͨ͠BUUS΁ͷ Ξχϝʔγϣϯ͕ߦΘΕ·͢ FH ETFMFDU lDJSDMFz USBOTJUJPO BUU S
\pMMlHSFFOz^

"OJNBUJPO ߋ৽ॲཧؔ਺ લ൒ var updateLine = function(){ // スケールのドメイン更新 x.domain(d3.extent(data,
function(d){ return d.x; })); var max = d3.max(data, function(d){ return d.y;}); y.domain([0, max]); ! // 折線の変形アニメーション serie.transition() .attr({ d: line }); ! これでアニメーションを利用できる！

"OJNBUJPO ߋ৽ॲཧؔ਺ த൫ // 新たにデータが増えたのでselection撮り直し var point = main.selectAll("g.point").data(data); //
データ追加分の処理 var newpoint = point.enter().append(“g") .attr({"class": "point", fill: color(0), transform: function(d){ return "translate("+x(d.x)+","+y(d.y)+")"; } }); newpoint.append("circle").attr({ r: 5 }); newpoint.append("text").text(function(d){return d.y;}).attr({dy:-8}); // 既存データのアニメーション point.transition().attr({ transform: function(d){ return "translate("+x(d.x)+","+y(d.y)+")"; } });

"OJNBUJPO ߋ৽ॲཧؔ਺ ޙ൒ // 軸の更新 xaxis.call(d3.svg.axis().scale(x)); yaxis.call(d3.svg.axis().scale(y).orient("left")); };

-BZPVU

-BZPVUͱ͸ ࠶ར༻ՄೳͳΞϧΰϦζϜͷմ جຊతʹ͸ʮݩσʔλʯ͔Βʮ͋ΔՄࢹԽ දݱʹඞཁͳσʔλʯ΁ͷม׵ϓϩάϥϜ ЋͰΞχϝʔγϣϯ΍ΠϕϯτͳͲ͕͍ͭ ͯ͘Δ

ΩϥΩϥԵ

-BZPVU γϟϨΦπͳՄࢹԽΛ࡞Δʹ͸ɺͨ͘͞Μ ͷม਺͕ඞཁͰ͢ ྫ͑͹ɺؔ܎άϥϑΛ࡞੒͢Δʹ͸ɺʮͲ ͷ఺ͱͲͷ఺Λͭͳ͙͔ʯʮ఺ͷฒͼ͸Ͳ ͏͢Δ͔ʯʮ఺ͷҐஔ࠲ඪ͸ʯʮ఺Λ݁Ϳ ހͷۂ͕Γ۩߹͸Ͳ͏͢Δ͔ʯͳͲ ͜ΕΒͷܭࢉΛҰ͔Β࣮૷͠ͳ͍ͰࡁΉΑ ͏ʹ͢ΔͨΊʹ-BZPVU͕ଘࡏ͠·͢

-BZPVU ࠓ೔͸༨ྗ͕͋Δਓ ࣮૷ʹࣗ৴͕͋Δਓ͸ αϙʔτ͠·͢

)BOET0O

࣌ؒ·ͰϋϯζΦϯ Ξχϝʔγϣϯ·ͰҰ౓खݩͰಈ͔ͯ͠Έͯ ͍ͩ͘͞ ࢼ͍ͨ͜͠ͱ͕͋Δਓ͸࣮૷Ξγετ͠ ·͢ ࢼ͍ͨ͜͠ͱͳ͍ਓ͸૬ஊ͍ͯͩ͘͠͞ Ξγετ͠·͢

ؾʹͳΔσʔλ

౦ژϝτϩΦʔϓϯσʔλ׆༻ίϯςετ http://tokyometro10th.jp/future/opendata/

෱ҪݝΦʔϓϯσʔλϥΠϒϥϦ http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/

ͦͷଞͷࢿྉ

47(ʹ͍ͭͯ͸ͪ͜ΒΛ IUUQXXXTMJEFTIBSFOFULBEPQQFJOMJOFTWH IUUQXXXTMJEFTIBSFOFUTTVTFSEDTWH NBOJBYDTTOJUFBGUFSEBSLTWHNBUTVEB https://github.com/muddydixon/html5conference

ՄࢹԽʹ͍ͭͯ͸ͪ͜ΒΛ

σʔλՄࢹԽͷϚϯτϥ Overview First, Zoom and Filter, Then Details-on-Demand Overview First,
Zoom and Filter, Then Details-on-Demand Overview First, Zoom and Filter, Then Details-on-Demand Ben Shneiderman $

d3.js demonstration

d3.js demonstration

More Decks by muddydixon

Other Decks in Programming

Featured

Transcript