basic of data visualization and d3.js demonstration

Transcript

1. σʔλՄࢹԽͷجૅ
   ͱ
   %ͷσϞ σʔλՄࢹԽษڧձ
   
   IUUQXXX[VTBBSDPNFWFOU
   !NVEEZEJYPO
   χϑςΟגࣜձࣾ
   ৿౻େ஍
2. !
   NVEEZEJYPO
   "
   NVEEZEJYPO
   #
   NVEEZEJYPO
   ! /PEFKT
   1FSM
   7JTVBMJ[BUJPO
   4UBUJTUJDT
   5JNF4FSJFT
   /FVSBM/FUXPSL
3. ࠓ೔࿩͢͜ͱ σʔλՄࢹԽͱ͸ ෼
   σʔλՄࢹԽͷཧ۶ ෼
   8FCͰͷσʔλՄࢹԽͷ͍͍ͱ͜Ζ ෼
   %KTͱ͸ ෼
   ࣭ٙԠ౴ ෼
4. ࠓ೔͸ͳ͞ͳ͍͜ͱ ͋Μͪ΂͞Μ͕ϒϩάͰॻ͍ͨ'"2
   ౷ܭͷ࿩
   ਏ͔ͬͨ࿩
5. ՄࢹԽͱ͸
6. σʔλՄࢹԽͱ͸ The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ σʔλՄࢹԽͷ໨త͸ɺσʔλΛՄࢹԽ͠ɺ ৘ใΛ໌͔֬ͭޮ཰తʹ఻͑Δ͜ͱͰ͋Δ $
7. ͭ·Γ % ৘ใΛ఻͑ͦͼΕ͍ͯΔՄࢹԽ
   % ໌֬Ͱ͸ͳ͍ՄࢹԽ % ޮ཰తͰ͸ͳ͍ՄࢹԽ ! ্ه͸ʮՄࢹԽʯͰ͸ͳ͍
8. ՄࢹԽͷఆٛ ৘ใ͕ࢹ֮తͳදݱʹஔ͖׵͑ΒΕ͍ͯΔ
   ৘ใ͕໌֬ʹ఻͑ΒΕ͍ͯΔ
   ৘ใ͕ޮ཰తʹ఻͑ΒΕ͍ͯΔ & ' ( )
9. ͳͥՄࢹԽ͢ΔͱΑ͍͔ ࢹ֮తͳදݱࢹ֮ه߸ ޙड़ ͷΞφϩδʔ
   େ͖͞ɺҐஔɺೱ୶ɺ৭ɺ܏͖ͳͲͷɺܦݧతɾ ೝ஌తͳطଘ஌ࣝΛޮ཰తʹར༻ͨ͠ཧղͷଅਐ
   ! ஋ͷେখɹɹ
   ⾣
   ߴ͞ͷେখ
   ஋ͷେখ
   ɹɹ⾣
   ໘ੵͷେখ
   ্ঢ܏޲
   ɹɹ⾣
   ӈ্͕Γͷ܏͖
   Լ߱܏޲
   ɹɹ⾣
   ӈԼ͕Γͷ܏͖
   ಉ͡ΧςΰϦ
   ⾣
   ಉ͡৭
10. ೝ஌ػೳɾܦݧΛϑϧʹ࢖͏  4FQBM-FOHU 4FQBM8JEU 1FUBM-FOHU 1FUBM8JEUI 4QFDJFT      TFUPTB      TFUPTB      TFUPTB      TFUPTB      TFUPTB      WFSTJDPMPS      WFSTJDPMPS      WFSTJDPMPS      WFSTJDPMPS      WFSTJDPMPS      WJSHJOJDB      WJSHJOJDB      WJSHJOJDB      WJSHJOJDB      WJSHJOJDB ΈΜͳ͍͖ͩ͢JSJT
11. ͜ΕΈͯ΋
    Θ͔ΔΘ͚Ͱ͸
    ͳ͍Ͱ͢ΑͶʁ
12. ౷ܭྔͰදݱ 4FQBM
    -FOHUI 4FQBM
    8JEUI 1FUBM
    -FOHUI 1FUBM
    8JEUI .JO     TU
    2V     .FEJBO     .FBO     SE
    2V     .BY    
13. ͜ΕͳΒ
    ͳΜͱ͔
14. ਤܗͷܦݧɾೝ஌ೳྗΛར༻
15. ਤܗͷܦݧɾೝ஌ೳྗΛར༻ w ෼෍ͷ෯͕޿͍
    w தԝ஋্͕ʹภ͍ͬͯΔ
    w େ͖ͭ͘ͷๆ͕͋Δ w தԝ஋͕एׯɺ্ ʹภΓ
    w ๆ͕ͭɾɾɾʁ w ۉ౳ʹ෼෍
    w தԝ஋͕͓͓Α ͦத৺ w ଞͷଐੑͱൺֱͯ͠෼෍ ͷ෯͕খ͍͞
    w ֎Ε஋͕ͪΒ΄Β
16. ʮೝ஌ʯ͕ʮ೺ѲʯΛՃ଎ 4FQBM
    -FOHUI 4FQBM
    8JEUI 1FUBM
    -FOHUI 1FUBM
    8JEUI .JO     TU
    2V     .FEJBO     .FBO     SE
    2V     .BY    
17. ͦͷଞʹ΋ ശͻ͛ਤͷ୅ΘΓʹ
    ώετάϥϜ ώετάϥϜΛछผຖʹ
    දݱ
18. ॏཁͳ͜ͱ
19. σʔλՄࢹԽͱ͸ ࠶ܝ The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ σʔλՄࢹԽͷ໨త͸ɺσʔλΛՄࢹԽ͠ɺ ৘ใΛ໌͔֬ͭޮ཰తʹ఻͑Δ͜ͱͰ͋Δ $
20. ՄࢹԽͷཧ࿦
21. σʔλՄࢹԽͷॻ੶
22. ଞʹ΋ͨ͘͞Μ
    ͋Γ·͕͢
    ಡΊ͍ͯ·ͤΜ
23. (SBNNBS
    PG
    (SBQIJDT 4:45"5ͷ։ൃऀ
    HHQMPUͷ։ൃʹ ΋େ͖ͳӨڹΛ༩ ͑ͨॻ੶
    EPSZPLVKJOઌੜ΋ ಡΜͰΔ
24. σʔλՄࢹԽͷϓϩηε  σʔληοτ
     ม਺Խ
     ୅਺ॲཧ
     ई౓Խॲཧ
     ౷ܭॲཧ
     زԿॲཧ
     ࠲ඪܥॲཧ
     ૷০ॲཧ
     ՄࢹԽ
25. ՄࢹԽͰҙࣝ͢Δ֓೦ σʔλ σʔλม਺ ࢹ֮ม਺ ࢹ֮ه߸ ՄࢹԽ σʔληοτ ༷ʑͳϑΟʔϧυͷ஋͔ΒͳΔ
    ϨίʔυΛෳ਺ؚΉσʔλ܈
    ม਺நग़ɾ୅਺ॲཧɾ
    ई౓Խॲɾཧ౷ܭॲཧ͕ࡁΜͩ΋ͷ ՄࢹԽର৅ͱ͢ΔϑΟʔϧυΛ
    ؚΉσʔλɻͻͱͭͻͱ͕ͭҙຯΛ ࣋ͬͨ୯Ґ ྫɿ42-ͷߦ ϑΟʔϧυͷ஋ͦͷ΋ͷ
    ਺஋ ϝδϟʔ ΍ΧςΰϦม਺ σΟ ϝϯδϣϯ ɻͻͱͭͻͱ͕ͭࢹ֮ม ਺ʹஔ׵͞ΕΔ ࢹ֮දݱͻͱͭͻͱͭΛࢦ͢
    Ґஔ΍αΠζɺ৭ɺ܏͖ɺڧ౓ ಁ໌ ౓ɾ࠼౓ɾ໌౓ ɺςΫενϟͳͲ ࢹ֮ม਺Λू໿ͤͨ͞ه߸
    ఺΍ԁɺۣܗɺހɺཱମͳͲ σʔληοτͷσʔλʹରԠ͢Δ
    ه߸ͷू߹ʹΑΔՄࢹԽ ରԠ ରԠ ରԠ
26. ՄࢹԽͷ֓೦ ཧ۶্  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 ᣾ย௕ Ֆห௕ छผ   ੺ σʔληοτ σʔληοτ ม਺நग़ σʔλ σʔλม਺ ࢹ֮ม਺ ࢹ֮ه߸ ՄࢹԽ ରԠ ରԠ ରԠ
27. σʔλม਺ࢹ֮ม਺ ᣾ย෯ɿY࠲ඪɺՖห෯ɿZ࠲ඪɺछผɿ৭
    ͱͭͷσʔλม਺ɿࢹ֮ม਺ΛରԠ
28. σʔλม਺ࢹ֮ม਺ ࢄ෍ਤͩͱͭ͘Β͍ͷม਺͸දݱՄೳ
    ˞
    ͨͩ͠ɺTFUPTBͷಁ໌౓͕ߴ͘ࢹೝੑ͕௿͍ͷͰɾɾɾ
29. σʔλม਺ࢹ֮ม਺ ࢄ෍ਤͩͱͭ͘Β͍ͷม਺͸දݱՄೳ
    ˞
    ͨͩ͠ɺTFUPTBͷಁ໌౓͕ߴ͘ࢹೝੑ͕௿͍ͷͰɾɾɾ σʔλม਺ͷʮ஋ʯͱʮ໘ ੵʯΛରԠ෇͚Δʂʂ
    ʮ൒ܘʯΛରԠ෇͚ͯ͠· ͏ͱ໘ੵ͸ࣗ৐͞ΕΔʂ
30. ࢹ֮ม਺ʹ͍ͭͯ
31. ࢹ֮ม਺ͷಛੑ બ୒ੑɿ৭ɺํ޲ͳͲ
    ࢹ֮ม਺͕ҟͳΔ৔߹ɺหผ͕Մ ೳ
    ؔ࿈ੑɿ৭ɺܗঢ়ͳͲ
    ࢹ֮ม਺͕ҟͳΔ৔߹ɺಉҰάϧʔ ϓͷೝ͕ࣝՄೳ
    ఆྔੑɿαΠζɺҐஔͳͲ
    ࢹ֮ม਺͕ҟͳΔ৔߹ɺͭͷࠩ Λࣝผ͢Δ͜ͱ͕Մೳ
    ॱংੑɿڧ͞ ಁ໌౓ɺ࠼౓ ͳͲ
    ࢹ֮ม਺͕ҟͳΔ৔߹ɺॱংͷେ খΛࣝผ͢Δ͜ͱ͕Մೳ
32. ࢹ֮ม਺ͷಛੑ ͜Ε΋ܝࡌ͢Ε͹Α͔ͬͨͱ൓ল͍ͯ͠·͢ %FTJHOJOH
    %BUB
    7JTVBMJ[BUJPOT
    
    0`3&*--:
33. ࢹ֮ม਺ͷಛੑ
    ਪ঑ ͜Ε΋ܝࡌ͢Ε͹Α͔ͬͨͱ൓ল͍ͯ͠·͢ %FTJHOJOH
    %BUB
    7JTVBMJ[BUJPOT
    
    0`3&*--: ΧςΰϦΛࣔ͢ͳΒҰ୒ ΧςΰϦΛࣔ͢ͳΒҰ୒ ςΫενϟܥ͸ਤ͕൥ࡶʹ ͳΓ΍͍͢
34. ՄࢹԽͷछྨ
    
    બఆ ͜Ε͸EPSZPLVKJO͞ΜͷεϥΠυͷํ͕ૉ ੖Β͍͠ͷͰޙड़
35. 8FCͰͷՄࢹԽͷ͍͍ͱ͜Ζ
36. ར఺ 8FCͰڞ༗͠ɺଟ͘ͷਓʹσʔλʹؚ·Ε Δࣄ࣮Λಧ͚Δ͜ͱ͕Ͱ͖Δ
    Ϛ΢ε΍ΩʔϘʔυʹΑΔΠϯλϥΫγϣϯ ͕ར༻Ͱ͖Δ
    Ξχϝʔγϣϯ͕ར༻Ͱ͖Δ
37. %KT
38. %KTͱ͸ 63-
    IUUQEKTPSH
    %BUB%SJWFO%PDVNFOUT
    EBUB
    ʹج͍ͮͯ
    IUNMTWH
    EPDVNFOU
    PCKFDU
    ͷ ॲཧΛߦ͏ɺͱ͍͏ίϯηϓτ
    47(ૢ࡞
    
    ਺஋ॲཧ
    
    ՄࢹԽϢʔςΟϦςΟ
    ͷ૯߹+BWB4DSJQUϥΠϒϥϦ
    47(TFMFDUPSBUUSTUZMF
    ਺஋ॲཧTDBMFOFTUBSSBZNBUI
    ՄࢹԽϢʔςΟϦςΟ
    TDBMFBYJTMBZPVU
39. ۩ମྫ <!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>
40. ۩ମྫ
    ଐੑελΠϧૢ࡞ var paragraphs = d3.select('body').selectAll('p');! paragraphs.style({background: 'cyan'});
41. ۩ମྫ
    ଐੑελΠϧૢ࡞ 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 ͳͲ͸Ҿ਺ʹඥ෇͚ΒΕͨσʔλΛ औΓɺͦΕʹԠͨ͡ॲཧΛߦ͏
42. ۩ମྫ
    σʔλʹجͮ͘௥Ճ 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;! }); ૿͑ͨʂ
43. ۩ମྫ
    σʔλʹجͮ͘௥Ճ Ͱ΋͔ͭ͠૿͑ͯͳ͍ʂ
    σʔλͷ௕͞͸ QEBUBMFOHUI 
    ͳ͔ͥʁ طଘͷQ
     ࠩ෼
    
    ⾣
    ͜Ε͕૿͑ͨ෼ʂ σʔλ
    
44. 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;! }); ۩ମྫ
    σʔλʹجͮ͘௥Ճ FOUFS ʹΑͬͯɺσʔλ%0.Λॲཧͷର৅ʹ͢Δ
45. ۩ମྫ
    σʔλʹجͮ͘࡟আ var lessData = pdata.slice(0, 2);! paragraphs.data(lessData).exit().remove(); ʮEBUB FYJU ʯ
    FYJU ʹΑͬͯɺ%0.σʔλΛॲཧͷର৅ʹ͢Δ σʔλ
     ࠩ෼
    
    ⾣
    ͜Ε͕SFNPWF ͨ͠෼ طଘͷQ
    
46. 4FMFDUJPO TFMFDU TFMFDU"MM Ͱऔಘͨ͠%0. ΍BQQFOE ʹΑͬͯ௥Ճͨ͠%0.Λ TFMFDUJPOͱ͍͍·͢
    EBUB ʹΑΓσʔλΛඥ෇͚Δ͜ͱ͕Ͱ͖ ·͢
    BUUS TUZMF UFYU ͳͲͰ͸ඥ෇͚ΒΕ ͨσʔλΛར༻ͯ͠%0.Λॲཧ͢Δ͜ͱ͕ Ͱ͖·͢
47. %BUB
    %SJWFO
    %PDVNFOUT
48. 4FMFDUJPO ඥ෇͚ͨσʔλ طଘͷ%0. FYJU TFMFDUJPO FOUFS
49. 4FMFDUJPO
    ྫ͑͹ ඥ෇͚ͨσʔλ طଘͷ%0. FYJU TFMFDUJPO FOUFS ଐੑɾελΠϧɾςΩ ετͷมߋͳͲΛߦ͏ ৽نʹ%0.Λ௥Ճ ͠ɺಉ࣌ʹଐੑɾελ ΠϧɾςΩετΛηο τ͢Δ طଘͷ%0.Λ࡟আ͠ ͨΓɺಁ໌౓Λ্͛ͨ ΓΛߦ͏
50. ࡞ͬͯΈΑ͏ʂ ᣾ย௕Λߴ͞ͱ͢Δ๮άϥϑ
51. ༻ҙ͢Δ΋ͷ ίʔυ
    IUUQTHJTUHJUIVCDPN NVEEZEJYPO
    
    8FCαʔό
    IUUQCMPHLBNJQPOFUFOUSZ 
    ޷͖ͳαʔόΛ্ཱ͍ͪ͛ͯͩ͘͞
52. 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>
53. +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){!
54. +BWB4DSJQU
    47(ཁૉͷ࡞੒ // σʔλΛऔಘ! 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();
55. +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]; });!
56. +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);
57. +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); }! });!
58. +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');
59. +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)"! });
60. ·ͱΊ
61. σʔλՄࢹԽͱ͸ The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ σʔλՄࢹԽͷ໨త͸ɺσʔλΛՄࢹԽ͠ɺ ৘ใΛ໌͔֬ͭޮ཰తʹ఻͑Δ͜ͱͰ͋Δ $
62. ՄࢹԽ͕Ռͨ͢΂͖໾ׂ ࢹ֮දݱͱ͍͏ʮܦݧతʯʮೝ஌తʯʹཧղ Λαϙʔτ͢Δදݱʹม׵͢Δͷ͕ՄࢹԽ
    σʔλΛه߸ʹɺσʔληοτΛՄࢹԽʹม ׵͢Δ
    ʮΑ͘࢖ΘΕΔՄࢹԽʯ͸ͦΕ͚ͩͰཧղ͕ ਐΉՄࢹԽ
    ཧղ્͕·ΕͨΒɺͦΕ͸͢ͰʹՄࢹԽ͡Ό ͳ͍ʂ
63. σʔλՄࢹԽͷϚϯτϥ 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 $