basic of data visualization and d3.js demonstration

σʔλՄࢹԽͷجૅ ͱ %ͷσϞ σʔλՄࢹԽษڧձ IUUQXXX[VTBBSDPNFWFOU !NVEEZEJYPO χϑςΟגࣜձࣾ৿౻େ஍

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

ࠓ೔࿩͢͜ͱ σʔλՄࢹԽͱ͸ ෼ σʔλՄࢹԽͷཧ۶ ෼ 8FCͰͷσʔλՄࢹԽͷ͍͍ͱ͜Ζ ෼
%KTͱ͸ ෼ ࣭ٙԠ౴ ෼

ࠓ೔͸ͳ͞ͳ͍͜ͱ ͋Μͪ΂͞Μ͕ϒϩάͰॻ͍ͨ'"2 ౷ܭͷ࿩ ਏ͔ͬͨ࿩

ՄࢹԽͱ͸

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

ͭ·Γ % ৘ใΛ఻͑ͦͼΕ͍ͯΔՄࢹԽ % ໌֬Ͱ͸ͳ͍ՄࢹԽ % ޮ཰తͰ͸ͳ͍ՄࢹԽ ! ্ه͸ʮՄࢹԽʯͰ͸ͳ͍

ՄࢹԽͷఆٛ ৘ใ͕ࢹ֮తͳදݱʹஔ͖׵͑ΒΕ͍ͯΔ ৘ใ͕໌֬ʹ఻͑ΒΕ͍ͯΔ ৘ใ͕ޮ཰తʹ఻͑ΒΕ͍ͯΔ & ' ( )

ͳͥՄࢹԽ͢ΔͱΑ͍͔ ࢹ֮తͳදݱࢹ֮ه߸ ޙड़ ͷΞφϩδʔ େ͖͞ɺҐஔɺೱ୶ɺ৭ɺ܏͖ͳͲͷɺܦݧతɾ ೝ஌తͳطଘ஌ࣝΛޮ཰తʹར༻ͨ͠ཧղͷଅਐ ! ஋ͷେখɹɹ⾣ߴ͞ͷେখ ஋ͷେখɹɹ⾣໘ੵͷେখ ্ঢ܏޲ɹɹ⾣ӈ্͕Γͷ܏͖
Լ߱܏޲ɹɹ⾣ӈԼ͕Γͷ܏͖ ಉ͡ΧςΰϦ⾣ಉ͡৭

ೝ஌ػೳɾܦݧΛϑϧʹ࢖͏ 4FQBM-FOHU 4FQBM8JEU 1FUBM-FOHU 1FUBM8JEUI 4QFDJFT
TFUPTB TFUPTB TFUPTB TFUPTB TFUPTB WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB ΈΜͳ͍͖ͩ͢JSJT

͜ΕΈͯ΋ Θ͔ΔΘ͚Ͱ͸ ͳ͍Ͱ͢ΑͶʁ

౷ܭྔͰදݱ 4FQBM -FOHUI 4FQBM 8JEUI 1FUBM -FOHUI 1FUBM 8JEUI .JO
TU 2V .FEJBO .FBO SE 2V .BY

͜ΕͳΒ ͳΜͱ͔

ਤܗͷܦݧɾೝ஌ೳྗΛར༻

ਤܗͷܦݧɾೝ஌ೳྗΛར༻ w ෼෍ͷ෯͕޿͍ w தԝ஋্͕ʹภ͍ͬͯΔ w େ͖ͭ͘ͷๆ͕͋Δ w தԝ஋͕एׯɺ্ ʹภΓ
w ๆ͕ͭɾɾɾʁ w ۉ౳ʹ෼෍ w தԝ஋͕͓͓Α ͦத৺ w ଞͷଐੑͱൺֱͯ͠෼෍ ͷ෯͕খ͍͞ w ֎Ε஋͕ͪΒ΄Β

ʮೝ஌ʯ͕ʮ೺ѲʯΛՃ଎ 4FQBM -FOHUI 4FQBM 8JEUI 1FUBM -FOHUI 1FUBM 8JEUI .JO
TU 2V .FEJBO .FBO SE 2V .BY

ͦͷଞʹ΋ ശͻ͛ਤͷ୅ΘΓʹ ώετάϥϜ ώετάϥϜΛछผຖʹ දݱ

ॏཁͳ͜ͱ

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

ՄࢹԽͷཧ࿦

σʔλՄࢹԽͷॻ੶

ଞʹ΋ͨ͘͞Μ ͋Γ·͕͢ ಡΊ͍ͯ·ͤΜ

(SBNNBSPG(SBQIJDT 4:45"5ͷ։ൃऀ HHQMPUͷ։ൃʹ ΋େ͖ͳӨڹΛ༩ ͑ͨॻ੶ EPSZPLVKJOઌੜ΋ ಡΜͰΔ

σʔλՄࢹԽͷϓϩηε σʔληοτ ม਺Խ ୅਺ॲཧ ई౓Խॲཧ
౷ܭॲཧ زԿॲཧ ࠲ඪܥॲཧ ૷০ॲཧ ՄࢹԽ

ՄࢹԽͰҙࣝ͢Δ֓೦ σʔλ σʔλม਺ ࢹ֮ม਺ ࢹ֮ه߸ ՄࢹԽ σʔληοτ ༷ʑͳϑΟʔϧυͷ஋͔ΒͳΔ ϨίʔυΛෳ਺ؚΉσʔλ܈ ม਺நग़ɾ୅਺ॲཧɾ
ई౓Խॲɾཧ౷ܭॲཧ͕ࡁΜͩ΋ͷ ՄࢹԽର৅ͱ͢ΔϑΟʔϧυΛ ؚΉσʔλɻͻͱͭͻͱ͕ͭҙຯΛ ࣋ͬͨ୯Ґ ྫɿ42-ͷߦ ϑΟʔϧυͷ஋ͦͷ΋ͷ ਺஋ ϝδϟʔ ΍ΧςΰϦม਺ σΟ ϝϯδϣϯ ɻͻͱͭͻͱ͕ͭࢹ֮ม ਺ʹஔ׵͞ΕΔ ࢹ֮දݱͻͱͭͻͱͭΛࢦ͢ Ґஔ΍αΠζɺ৭ɺ܏͖ɺڧ౓ ಁ໌ ౓ɾ࠼౓ɾ໌౓ ɺςΫενϟͳͲ ࢹ֮ม਺Λू໿ͤͨ͞ه߸ ఺΍ԁɺۣܗɺހɺཱମͳͲ σʔληοτͷσʔλʹରԠ͢Δ ه߸ͷू߹ʹΑΔՄࢹԽ ରԠ ରԠ ରԠ

ՄࢹԽͷ֓೦ ཧ۶্ 4FQBM-FOHU I 4FQBM8JEUI 1FUBM-FOHUI 1FUBM8JEUI 4QFDJFT
TFUPTB TFUPTB TFUPTB TFUPTB TFUPTB WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS ᣾ย௕ Ֆห௕ छผ TFUPTB ᣾ย௕ ൺྫई౓ Ֆห௕ ൺྫई౓ छผ TFUPTB ໊ٛई౓ ᣾ย௕ ൺྫई౓ Ґஔ Ֆห௕ ൺྫई౓ Ґஔ छผ ໊ٛई౓ ৭ 4FQBM-FOHUI 1FUBM-FOHUI 4QFDJFT TFUPTB TFUPTB TFUPTB TFUPTB TFUPTB WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS ᣾ย௕ Ֆห௕ छผ ੺ σʔληοτ σʔληοτ ม਺நग़ σʔλ σʔλม਺ ࢹ֮ม਺ ࢹ֮ه߸ ՄࢹԽ ରԠ ରԠ ରԠ

σʔλม਺ࢹ֮ม਺ ᣾ย෯ɿY࠲ඪɺՖห෯ɿZ࠲ඪɺछผɿ৭ ͱͭͷσʔλม਺ɿࢹ֮ม਺ΛରԠ

σʔλม਺ࢹ֮ม਺ ࢄ෍ਤͩͱͭ͘Β͍ͷม਺͸දݱՄೳ ˞ͨͩ͠ɺTFUPTBͷಁ໌౓͕ߴ͘ࢹೝੑ͕௿͍ͷͰɾɾɾ

σʔλม਺ࢹ֮ม਺ ࢄ෍ਤͩͱͭ͘Β͍ͷม਺͸දݱՄೳ ˞ͨͩ͠ɺTFUPTBͷಁ໌౓͕ߴ͘ࢹೝੑ͕௿͍ͷͰɾɾɾ σʔλม਺ͷʮ஋ʯͱʮ໘ ੵʯΛରԠ෇͚Δʂʂ ʮ൒ܘʯΛରԠ෇͚ͯ͠· ͏ͱ໘ੵ͸ࣗ৐͞ΕΔʂ

ࢹ֮ม਺ʹ͍ͭͯ

ࢹ֮ม਺ͷಛੑ બ୒ੑɿ৭ɺํ޲ͳͲ ࢹ֮ม਺͕ҟͳΔ৔߹ɺหผ͕Մ ೳ ؔ࿈ੑɿ৭ɺܗঢ়ͳͲ ࢹ֮ม਺͕ҟͳΔ৔߹ɺಉҰάϧʔ ϓͷೝ͕ࣝՄೳ ఆྔੑɿαΠζɺҐஔͳͲ ࢹ֮ม਺͕ҟͳΔ৔߹ɺͭͷࠩ Λࣝผ͢Δ͜ͱ͕Մೳ
ॱংੑɿڧ͞ ಁ໌౓ɺ࠼౓ ͳͲ ࢹ֮ม਺͕ҟͳΔ৔߹ɺॱংͷେ খΛࣝผ͢Δ͜ͱ͕Մೳ

ࢹ֮ม਺ͷಛੑ ͜Ε΋ܝࡌ͢Ε͹Α͔ͬͨͱ൓ল͍ͯ͠·͢ %FTJHOJOH%BUB7JTVBMJ[BUJPOT 0`3&*--:

ࢹ֮ม਺ͷಛੑ ਪ঑ ͜Ε΋ܝࡌ͢Ε͹Α͔ͬͨͱ൓ল͍ͯ͠·͢ %FTJHOJOH%BUB7JTVBMJ[BUJPOT 0`3&*--: ΧςΰϦΛࣔ͢ͳΒҰ୒ ΧςΰϦΛࣔ͢ͳΒҰ୒ ςΫενϟܥ͸ਤ͕൥ࡶʹ ͳΓ΍͍͢

ՄࢹԽͷछྨબఆ ͜Ε͸EPSZPLVKJO͞ΜͷεϥΠυͷํ͕ૉ ੖Β͍͠ͷͰޙड़

8FCͰͷՄࢹԽͷ͍͍ͱ͜Ζ

ར఺ 8FCͰڞ༗͠ɺଟ͘ͷਓʹσʔλʹؚ·Ε Δࣄ࣮Λಧ͚Δ͜ͱ͕Ͱ͖Δ Ϛ΢ε΍ΩʔϘʔυʹΑΔΠϯλϥΫγϣϯ ͕ར༻Ͱ͖Δ Ξχϝʔγϣϯ͕ར༻Ͱ͖Δ

%KTͱ͸ 63- IUUQEKTPSH %BUB%SJWFO%PDVNFOUT EBUBʹج͍ͮͯIUNMTWHEPDVNFOUPCKFDUͷ ॲཧΛߦ͏ɺͱ͍͏ίϯηϓτ 47(ૢ࡞ ਺஋ॲཧ ՄࢹԽϢʔςΟϦςΟ
ͷ૯߹+BWB4DSJQUϥΠϒϥϦ 47(TFMFDUPSBUUSTUZMF ਺஋ॲཧTDBMFOFTUBSSBZNBUI ՄࢹԽϢʔςΟϦςΟTDBMFBYJTMBZPVU

۩ମྫ <!doctype html>! <html lang="ja">! <head>! <meta charset="utf8">! <title>d3 introduction</title>!
<style>! .axis line, .axis path { fill: none; stroke: grey; }! </style>! </head>! <body>! ! <div>! <p>0th paragraph</p>! <p>1st paragraph</p>! <p>2nd paragraph</p>! </div>! ! <script type="text/javascript" charset="utf8" src="../components/d3/d3.min.js"></script>! <script type="text/javascript" charset="utf8" src="./introduction.js"></script>! </body>! </html>

۩ମྫ ଐੑελΠϧૢ࡞ var paragraphs = d3.select('body').selectAll('p');! paragraphs.style({background: 'cyan'});

۩ମྫ ଐੑελΠϧૢ࡞ var paragraphs = d3.select('body').selectAll('p');! var pdata = [!
{text: "modified: 0th paragraph"},! {text: "modified: 1th paragraph"},! {text: "modified: 2th paragraph"}! ];! paragraphs.data(pdata).text(function(d){ return d.text; }); EBUB ͰσʔλΛඥ෇͚Δ ͻͱͭͷQʹରͯ͠ɺͻͱͭͷ σʔλ BUUS UFYU TUZMF ͳͲ͸Ҿ਺ʹඥ෇͚ΒΕͨσʔλΛ औΓɺͦΕʹԠͨ͡ॲཧΛߦ͏

۩ମྫ σʔλʹجͮ͘௥Ճ var pdata = d3.range(0, 5)! .map(function(id){! return {!
id: id,! text: id + "th paragraph"! };! });! ! paragraphs.data(pdata).enter()! .append('p')! .text(function(d){! return d.text;! }); ૿͑ͨʂ

۩ମྫ σʔλʹجͮ͘௥Ճ Ͱ΋͔ͭ͠૿͑ͯͳ͍ʂ σʔλͷ௕͞͸ QEBUBMFOHUI ͳ͔ͥʁ طଘͷQ ࠩ෼⾣͜Ε͕૿͑ͨ෼ʂ
σʔλ

۩ମྫ σʔλʹجͮ͘࡟আ var lessData = pdata.slice(0, 2);! paragraphs.data(lessData).exit().remove(); ʮEBUB FYJU
ʯ FYJU ʹΑͬͯɺ%0.σʔλΛॲཧͷର৅ʹ͢Δ σʔλ ࠩ෼⾣͜Ε͕SFNPWF ͨ͠෼ طଘͷQ

4FMFDUJPO TFMFDU TFMFDU"MM Ͱऔಘͨ͠%0. ΍BQQFOE ʹΑͬͯ௥Ճͨ͠%0.Λ TFMFDUJPOͱ͍͍·͢ EBUB ʹΑΓσʔλΛඥ෇͚Δ͜ͱ͕Ͱ͖ ·͢
BUUS TUZMF UFYU ͳͲͰ͸ඥ෇͚ΒΕ ͨσʔλΛར༻ͯ͠%0.Λॲཧ͢Δ͜ͱ͕ Ͱ͖·͢

%BUB %SJWFO %PDVNFOUT

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

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

࡞ͬͯΈΑ͏ʂ ᣾ย௕Λߴ͞ͱ͢Δ๮άϥϑ

༻ҙ͢Δ΋ͷ ίʔυIUUQTHJTUHJUIVCDPN NVEEZEJYPO 8FCαʔό IUUQCMPHLBNJQPOFUFOUSZ ޷͖ͳαʔόΛ্ཱ͍ͪ͛ͯͩ͘͞

IUNM <!doctype html>! <html lang="ja">! <head>! <meta charset="utf8">! <title>d3 scatter
plog</title>! <style>! .axis line, .axis path { fill: none; stroke: grey; }! </style>! </head>! <body>! <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>! <script type="text/javascript" charset="utf8" src="./iris.js"></script>! </body>! </html>

+BWB4DSJQUσʔλͷಡΈࠐΈ var WIDTH = 500, HEIGHT = 500, margin =
50;! var width = WIDTH - 2 * margin, height = HEIGHT - 2 * margin;! var key = 'Sepal.Length';! ! // iris.csv ϑΝΠϧΛಡΈࠐΉ! d3.csv(! "./iris.csv",! // ߦͷܕΛमਖ਼! function(d){! for(var attr in d){! if(! isNaN(Number(d[attr]))){! d[attr] = +d[attr];! }! return d;! }! },! // σʔλΛऔಘ! function(err, data){!

+BWB4DSJQU47(ཁૉͷ࡞੒ // σʔλΛऔಘ! function(err, data){! ! // svgཁૉΛ௥Ճ! 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+")"! });! ! // ৭ͷई౓! var color = d3.scale.category10();

+BWB4DSJQUσʔλͷ੔ܗͱ੔ཧ // σʔλΛೖΕࢠʹ͢Δ! var speciesData = d3.nest()! // छྨ͝ͱʹ෼ྨ͢ΔΩʔΛࢦఆ! .key(function(d){
return d.Species;})! // ग़ྗΛΩʔʹϚονͨ͠഑ྻ͔Βɺฏۉ஋ʹมߋ! .rollup(function(values){! return d3.mean(values, function(d){ return d[key]; });! })! // ஋Λ഑ྻͰऔಘ! .entries(data);! ! // छྨͷΩʔҰཡΛऔಘ! var species = speciesData.map(function(d){ return d.key; });! ! // શମͷߴ͞ͷൣғΛऔಘ! var domain = d3.extent(data, function(d){ return d[key]; });!

+BWB4DSJQUई౓࡞੒ // y࠲ඪͷई౓Λऔಘ! var yScale = d3.scale.linear()! // ม׵ޙͷൣғ(஋Ҭ)! .range([0,
height])! // ม׵લͷൣғ(ఆٛҬ)! .domain([0, domain[1]]);! ! // x࠲ඪͷई౓Λऔಘ! var xScale = d3.scale.ordinal()! // ม׵ޙͷൣғ(஋Ҭ)! .rangeBands([0, width], .2)! // ม׵લͷൣғ(ఆٛҬ)! .domain(species);

+BWB4DSJQU๮Λඳը // ๮(ͷάϧʔϓ)ཁૉΛ࡞੒! var bar = main.selectAll('g')! .data(speciesData)! .enter()! .append('g')!
.attr({! transform: function(d){! return "translate("+xScale(d.key)+","+height+")";! }! });! ! // ๮Λඳը! bar.append('rect').attr({! // ۣܗͷߴ͞! height: function(d){ return yScale(d.values); },! // ۣܗͷҐஔ! y: function(d){ return -yScale(d.values); },! // ۣܗͷ෯! width: xScale.rangeBand(),! // ۣܗͷ৭! fill: function(d){ return color(d.key); }! });!

+BWB4DSJQU๮ʹ஋Λඳը // ๮(ͷάϧʔϓ)ཁૉΛ࡞੒! var bar = main.selectAll('g')! .data(speciesData)! .enter()! .append('g')!
.attr({! transform: function(d){! return "translate("+xScale(d.key)+","+height+")";! }! });! ! // ๮Λඳը (લड़)! // ஋Λඳը! bar.append('text')! // ςΩετ͸෼ྨͨ࣌͠ͷΩʔ! .text(function(d){! return d.values.toFixed(2);! })! .attr({! // ҐஔΛ๮ͷ্ʹ! dy: function(d){ return - yScale(d.values); },! dx: xScale.rangeBand() / 2,! fill: 'black'! }).style('text-anchor', 'middle');

+BWB4DSJQU࣠ͷඳը // x࣠ੜ੒ͷϢʔςΟϦςΟ! var xAxisSvg = d3.svg.axis().scale(xScale);! // y࣠ੜ੒ͷϢʔςΟϦςΟ! var
yAxisSvg = d3.svg.axis().scale(yScale.copy()! .range([height, 0])).orient('left');! // x࣠Λੜ੒! var xAxis = main.append('g').call(xAxisSvg).attr('class', 'axis')! .attr("transform", "translate(0,"+height+")");! // y࣠Λੜ੒! var yAxis = main.append('g').call(yAxisSvg).attr('class', 'axis');! ! // y࣠ͷϥϕϧΛهड़! main.append('text').text(key).attr({! transform: "translate(-30,"+(height / 2)+") rotate(-90)"! });

·ͱΊ

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

ՄࢹԽ͕Ռͨ͢΂͖໾ׂ ࢹ֮දݱͱ͍͏ʮܦݧతʯʮೝ஌తʯʹཧղ Λαϙʔτ͢Δදݱʹม׵͢Δͷ͕ՄࢹԽ σʔλΛه߸ʹɺσʔληοτΛՄࢹԽʹม ׵͢Δ ʮΑ͘࢖ΘΕΔՄࢹԽʯ͸ͦΕ͚ͩͰཧղ͕ ਐΉՄࢹԽ ཧղ્͕·ΕͨΒɺͦΕ͸͢ͰʹՄࢹԽ͡Ό ͳ͍ʂ

σʔλՄࢹԽͷϚϯτϥ 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 $

basic of data visualization and d3.js demonstra...

basic of data visualization and d3.js demonstration

More Decks by muddydixon

Other Decks in Programming

Featured

Transcript