data visualization @html5study

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ՄࢹԽͷ໨త

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

໨తΛ્֐͢ΔՄࢹԽ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

໌֬͡Όͳ͍

Slide 14

Slide 14 text

໌֬͡Όͳ͍

Slide 15

Slide 15 text

໌֬͡Όͳ͍

Slide 16

Slide 16 text

໌֬͡Όͳ͍

Slide 17

Slide 17 text

໌֬͡Όͳ͍

Slide 18

Slide 18 text

໌֬͡Όͳ͍

Slide 19

Slide 19 text

໌֬͡Όͳ͍

Slide 20

Slide 20 text

ޮ཰త͡Όͳ͍

Slide 21

Slide 21 text

͍Ζ͍Ζ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

σʔλՄࢹԽͱ͸

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ͳͥՄࢹԽ͢ΔͱΑ͍͔

Slide 28

Slide 28 text

ͳͥՄࢹԽ͢ΔͱΑ͍͔

Slide 29

Slide 29 text

ͳͥՄࢹԽ͢ΔͱΑ͍͔

Slide 30

Slide 30 text

ͳͥՄࢹԽ͢ΔͱΑ͍͔

Slide 31

Slide 31 text

ͳͥՄࢹԽ͢ΔͱΑ͍͔

Slide 32

Slide 32 text

ͳͥՄࢹԽ͢ΔͱΑ͍͔

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

͔͜͜Βͳʹ͔ Θ͔ΔΘ͚Ͱ͸ ͳ͍Ͱ͢ΑͶʁ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

͜ΕͳΒ ͳΜͱ͔

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

ՄࢹԽͷཧ࿦

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Slide 49

Slide 49 text

ՄࢹԽͷ֓೦ ཧ۶্ 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 ᣾ย௕ Ֆห௕ छผ ੺ σʔληοτ σʔληοτ ม਺நग़ σʔλ σʔλม਺ ࢹ֮ม਺ ࢹ֮ه߸ ՄࢹԽ ରԠ ରԠ ରԠ

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

σʔλม਺ͷई౓ ໊ٛई౓ɿΧςΰϦɺ໊শͳͲ ಉ͔ͦ͡ΕҎ֎͔ͷൺֱ͔͠Ͱ͖ͳ͍ ॱংई౓ɿెڝ૸ͷॱҐɺ୒ͷΞϯέʔτͳͲ ಉ͔͡Ͳ͏͔ɾେখൺֱ͸Ͱ͖Δ͕ɺՃݮͳͲ ͷԋࢉ͸Ͱ͖ͳ͍ ౳ࠩई౓ɿ೔෇ͳͲ ࠩͷൺֱ͸Ͱ͖Δ͕ɺθϩ఺͕ͳ͘ൺͷҙຯ͕ແ͍ ൺྫई౓ɿਓ਺ɺճ਺ɺܦաඵ਺ͳͲ θϩ఺͕͋Γɺࠩͷൺֱɺൺͷൺֱ͕Մೳ

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

8FCͰͷڞ༗ IUUQTQFOEJOHKQ

Slide 60

Slide 60 text

ΠϯλϥΫγϣϯ IUUQTRVBSFHJUIVCJPDSPTTpMUFS IUUQXXXDTVNEFEV dCFEFSTPOQBQFSTJOEFYIUNM

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

47(ʹ͍ͭͯ

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

47(͸͜Μͳײ͡

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

%KT

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

۩ମྫ ! ! ! ! d3 introduction! ! .axis line, .axis path { fill: none; stroke: grey; }! ! ! ! !

0th paragraph

1st paragraph

2nd paragraph

! ! ! ! !

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

۩ମྫ ଐੑελΠϧૢ࡞ 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 ͳͲ͸Ҿ਺ʹඥ෇͚ΒΕͨσʔλΛ औΓɺͦΕʹԠͨ͡ॲཧΛߦ͏

Slide 72

Slide 72 text

۩ମྫ σʔλʹجͮ͘௥Ճ 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;! }); ૿͑ͨʂ

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

%BUB %SJWFO %PDVNFOUT

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

Slide 83

Slide 83 text

·ͱΊ

Slide 84

Slide 84 text

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

͕࣌ؒ͋ͬͨΒ

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

IUNM ! ! ! ! d3 scatter plog! ! .axis line, .axis path { fill: none; stroke: grey; }! ! ! ! ! ! !

Slide 93

Slide 93 text

+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){!

Slide 94

Slide 94 text

+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();

Slide 95

Slide 95 text

+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]; });!

Slide 96

Slide 96 text

+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);

Slide 97

Slide 97 text

+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); }! });!

Slide 98

Slide 98 text

+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');

Slide 99

Slide 99 text

+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)"! });

Slide 100

Slide 100 text

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