data visualization @html5study

σʔλՄࢹԽ ʹ͍ͭͯ )5.-ͱ͔ษڧձ !NVEEZEJYPO

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

ΞδΣϯμ σʔλՄࢹԽͷ໨త σʔλՄࢹԽͱ͸ σʔλՄࢹԽͷཧ۶ 8FCͰͷσʔλՄࢹԽͷ͍͍ͱ͜Ζ %KTͱ͸

ՄࢹԽͷ໨త

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

ՄࢹԽͷ໨త ఻͑ͯͲ͏͢Δʁ

ՄࢹԽͷ໨త ☓ՄࢹԽͷͨΊͷՄࢹԽ ̋໨తୡ੒ͷͨΊͷՄࢹԽ

ՄࢹԽͷ໨త ☓ʮͲ͏ՄࢹԽ͢Δ͔ʁʯ ̋ʮԿΛՄࢹԽ͢Δ͔ʁʯ ˕ʮͳΜͷͨΊʹՄࢹԽ͢Δ͔ʁʯ

ՄࢹԽͷ໨త ϝτϦΫεͷ؂ࢹ ྫ ϞχλϦϯάπʔϧ τϨϯυͷ೺Ѳ ྫ גࣜνϟʔτ ؔ܎ੑͷ೺Ѳ ྫ ιʔγϟϧάϥϑ
ଐੑͷ෼ੳ ྫ ސ٬ଐੑͷׂ߹΍ചΕےδϟϯϧͷׂ߹

ՄࢹԽͷ໨త ࣄ࣮Λൃ۷Ͱ͖ͯͦ͜ͷՄࢹԽ ࣄ࣮Λ׆༻Ͱ͖ͯͦ͜ͷՄࢹԽ ! վળߦҝͷଅਐͷͨΊͷՄࢹԽ Ϗδωεɺ੓࣏ɺՈܭͳͲ

໨తΛ્֐͢ΔՄࢹԽ

μϝͳՄࢹԽ ޮ཰త͡Όͳ͍ ໌֬͡Όͳ͍ ! ˞ʮ΢ιΛ෇͘ʯʮαϯϓϧʹ໰୊͕͋Δʯ ͱ͔͸ͪΐͬͱ͓͍͓͖ͯ·͢

໌֬͡Όͳ͍

ޮ཰త͡Όͳ͍

͍Ζ͍Ζ

΋ͬͱཉ͍͠ਓ͸ͪ͜Βʹ IUUQXUGWJ[OFU

σʔλՄࢹԽͱ͸

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

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

ͳͥՄࢹԽ͢ΔͱΑ͍͔

ͳͥՄࢹԽ͢ΔͱΑ͍͔ ஋ͷେখɹɹ▶ߴ͞ͷେখ ஋ͷେখɹɹ▶໘ੵͷେখ ্ঢ܏޲ɹɹ▶ӈ্͕Γͷ܏͖ Լ߱܏޲ɹɹ▶ӈԼ͕Γͷ܏͖ ಉ͡ΧςΰϦ▶ಉ͡৭ ؔ܎ੑ
▶ີू౓

ͳͥՄࢹԽ͢ΔͱΑ͍͔ ܦݧతɾೝ஌తͳ طଘ஌ࣝΛޮ཰తʹ ར༻ͨ͠ཧղͷଅਐ & ' ( )

ͳͥՄࢹԽ͢ΔͱΑ͍͔ ͙͢෼͔ΔJTਖ਼ٛ & ' ( )

ೝ஌ػೳɾܦݧΛϑϧʹ࢖͏ 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

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

ՄࢹԽͷཧ࿦

σʔληοτͱՄࢹԽ ΨΫย෯ Ֆห෯ 4QFDJFT TFUPTB
TFUPTB TFUPTB TFUPTB TFUPTB WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB

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

TFUPTB TFUPTB TFUPTB TFUPTB WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB σʔλ ࢹ֮ه߸

TFUPTB TFUPTB TFUPTB TFUPTB WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WFSTJDPMPS WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB WJSHJOJDB σʔλม਺ : ࢹ֮ม਺ 9 ৭

ՄࢹԽͷ֓೦ ཧ۶্ 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&*--: ΧςΰϦΛࣔ͢ͳΒҰ୒ ΧςΰϦΛࣔ͢ͳΒҰ୒ ςΫενϟܥ͸ਤ͕൥ࡶʹ ͳΓ΍͍͢

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

ར఺ 8FCͰڞ༗͠ɺଟ͘ͷਓʹσʔλʹؚ·Ε Δࣄ࣮Λಧ͚Δ͜ͱ͕Ͱ͖Δ ੫ۚ͸Ͳ͜ʹߦͬͨʁ Ϛ΢ε΍ΩʔϘʔυʹΑΔΠϯλϥΫγϣ ϯ͕ར༻Ͱ͖Δ Ξχϝʔγϣϯ͕ར༻Ͱ͖Δ ࣌ؒ࣠Λ࣮ࡍͷ࣌ؒʹׂΓ౰ͯΔ͜ͱͰɺද ݱͰ͖Δσʔλม਺Λͭ૿΍͢͜ͱ͕Ͱ͖Δ

8FCͰͷڞ༗ IUUQTQFOEJOHKQ

ΠϯλϥΫγϣϯ IUUQTRVBSFHJUIVCJPDSPTTpMUFS IUUQXXXDTVNEFEV dCFEFSTPOQBQFSTJOEFYIUNM

Ξχϝʔγϣϯ IUUQTXXXZPVUVCFDPNXBUDI WF[7LBI3'UNT

47(ʹ͍ͭͯ

47(ͱ͸ 4DBMBCMF7FDUPS(SBQIJDT େ͖ͯ͘͠΋៉ྷ 9.-%PDVNFOU %0. *OTQFDUPSͰݟ΍͍͢

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

47(͸͜Μͳײ͡ <svg width="400" height="300">! <g transform="translate(50,50)">! <circle r="5" cx="128.571" cy="111.733"
fill="blue"></circle>! <circle r="5" cx="21.428" cy="121.600" fill="red"></circle>! <circle r="5" cx="77.142" cy="138.4" fill="blue"></circle>! <circle r="5" cx="111.428" cy="135.2" fill="blue"></circle>! <circle r="5" cx="300" cy="0" fill="red"></circle>! <circle r="5" cx="0" cy="73.066" fill="red"></circle>! <circle r="5" cx="244.285" cy="192.266" fill="blue"></circle>! <circle r="5" cx="270" cy="200" fill="red"></circle>! <circle r="5" cx="51.428" cy="173.333" fill="red"></circle>! </g>! </svg>

47(ʹ͍ͭͯ͸ͪ͜ΒΛ IUUQXXXTMJEFTIBSFOFULBEPQQFJOMJOFTWH IUUQXXXTMJEFTIBSFOFUTTVTFSEDTWH NBOJBYDTTOJUFBGUFSEBSLTWHNBUTVEB

%KTͱ͸ 63- IUUQEKTPSH %BUB%SJWFO%PDVNFOUT EBUBʹج͍ͮͯIUNMTWHEPDVNFOU PCKFDUͷॲཧΛߦ͏ɺͱ͍͏ίϯηϓτ 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.Λ࡟আ͠ ͨΓɺಁ໌౓Λ্͛ͨ ΓΛߦ͏

࡞੒͢Δͱ͖ͷίπ 47(͸جຊ ޙʹ௥Ճͨ͠΋ͷ্͕ʹදࣔ͞ΕΔ -BZFS Hλά Λ࢖੍ͬͯޚ͢Δͱ͏·͘ ॻ͚·͢ USBOTGPSNଐੑΛ͏·͘࢖͏ͱָͰ͢ UFYUपΓ͸೉͍͠Ͱ͢ LBEPQQF͞Μ΋
ݴͬͯ·͢

·ͱΊ

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

ՄࢹԽͷ໨త ☓ʮͲ͏ՄࢹԽ͢Δ͔ʁʯ ̋ʮԿΛՄࢹԽ͢Δ͔ʁʯ ˕ʮͳΜͷͨΊʹՄࢹԽ͢Δ͔ʁʯ

ՄࢹԽͷ໨త ࣄ࣮Λൃ۷Ͱ͖ͯͦ͜ͷՄࢹԽ ࣄ࣮Λ׆༻Ͱ͖ͯͦ͜ͷՄࢹԽ ! վળߦҝͷଅਐͷͨΊͷՄࢹԽ Ϗδωεɺ੓࣏ɺՈܭͳͲ

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

͕࣌ؒ͋ͬͨΒ

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

༻ҙ͢Δ΋ͷ ίʔυ 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)"! });

՝୊ ๮άϥϑ ંઢάϥϑ ࢄ෍ਤ ΠϯλϥΫγϣϯ Ξχϝʔγϣϯ δΦϚοϐϯά

data visualization @html5study

data visualization @html5study

More Decks by muddydixon

Other Decks in Programming

Featured

Transcript