Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

basic of data visualization and d3.js demonstration

Avatar for muddydixon

muddydixon

March 28, 2023
Tweet

More Decks by muddydixon

Other Decks in Programming

Transcript

  1. σʔλՄࢹԽͱ͸ The main goal of data visualization is its ability

    to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ σʔλՄࢹԽͷ໨త͸ɺσʔλΛՄࢹԽ͠ɺ ৘ใΛ໌͔֬ͭޮ཰తʹ఻͑Δ͜ͱͰ͋Δ $
  2. ೝ஌ػೳɾܦݧΛϑϧʹ࢖͏  4FQBM-FOHU 4FQBM8JEU 1FUBM-FOHU 1FUBM8JEUI 4QFDJFT   

      TFUPTB      TFUPTB      TFUPTB      TFUPTB      TFUPTB      WFSTJDPMPS      WFSTJDPMPS      WFSTJDPMPS      WFSTJDPMPS      WFSTJDPMPS      WJSHJOJDB      WJSHJOJDB      WJSHJOJDB      WJSHJOJDB      WJSHJOJDB ΈΜͳ͍͖ͩ͢JSJT
  3. ౷ܭྔͰදݱ 4FQBM -FOHUI 4FQBM 8JEUI 1FUBM -FOHUI 1FUBM 8JEUI .JO

        TU 2V     .FEJBO     .FBO     SE 2V     .BY    
  4. ਤܗͷܦݧɾೝ஌ೳྗΛར༻ w ෼෍ͷ෯͕޿͍ w தԝ஋্͕ʹภ͍ͬͯΔ w େ͖ͭ͘ͷๆ͕͋Δ w தԝ஋͕एׯɺ্ ʹภΓ

    w ๆ͕ͭɾɾɾʁ w ۉ౳ʹ෼෍ w தԝ஋͕͓͓Α ͦத৺ w ଞͷଐੑͱൺֱͯ͠෼෍ ͷ෯͕খ͍͞ w ֎Ε஋͕ͪΒ΄Β
  5. ʮೝ஌ʯ͕ʮ೺ѲʯΛՃ଎ 4FQBM -FOHUI 4FQBM 8JEUI 1FUBM -FOHUI 1FUBM 8JEUI .JO

        TU 2V     .FEJBO     .FBO     SE 2V     .BY    
  6. σʔλՄࢹԽͱ͸ ࠶ܝ The main goal of data visualization is its

    ability to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ σʔλՄࢹԽͷ໨త͸ɺσʔλΛՄࢹԽ͠ɺ ৘ใΛ໌͔֬ͭޮ཰తʹ఻͑Δ͜ͱͰ͋Δ $
  7. σʔλՄࢹԽͷϓϩηε  σʔληοτ  ม਺Խ  ୅਺ॲཧ  ई౓Խॲཧ 

    ౷ܭॲཧ  زԿॲཧ  ࠲ඪܥॲཧ  ૷০ॲཧ  ՄࢹԽ
  8. ՄࢹԽͰҙࣝ͢Δ֓೦ σʔλ σʔλม਺ ࢹ֮ม਺ ࢹ֮ه߸ ՄࢹԽ σʔληοτ ༷ʑͳϑΟʔϧυͷ஋͔ΒͳΔ ϨίʔυΛෳ਺ؚΉσʔλ܈ ม਺நग़ɾ୅਺ॲཧɾ

    ई౓Խॲɾཧ౷ܭॲཧ͕ࡁΜͩ΋ͷ ՄࢹԽର৅ͱ͢ΔϑΟʔϧυΛ ؚΉσʔλɻͻͱͭͻͱ͕ͭҙຯΛ ࣋ͬͨ୯Ґ ྫɿ42-ͷߦ ϑΟʔϧυͷ஋ͦͷ΋ͷ ਺஋ ϝδϟʔ ΍ΧςΰϦม਺ σΟ ϝϯδϣϯ ɻͻͱͭͻͱ͕ͭࢹ֮ม ਺ʹஔ׵͞ΕΔ ࢹ֮දݱͻͱͭͻͱͭΛࢦ͢ Ґஔ΍αΠζɺ৭ɺ܏͖ɺڧ౓ ಁ໌ ౓ɾ࠼౓ɾ໌౓ ɺςΫενϟͳͲ ࢹ֮ม਺Λू໿ͤͨ͞ه߸ ఺΍ԁɺۣܗɺހɺཱମͳͲ σʔληοτͷσʔλʹରԠ͢Δ ه߸ͷू߹ʹΑΔՄࢹԽ ରԠ ରԠ ରԠ
  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 ᣾ย௕ Ֆห௕ छผ   ੺ σʔληοτ σʔληοτ ม਺நग़ σʔλ σʔλม਺ ࢹ֮ม਺ ࢹ֮ه߸ ՄࢹԽ ରԠ ରԠ ରԠ
  10. %KTͱ͸ 63- IUUQEKTPSH  %BUB%SJWFO%PDVNFOUT EBUBʹج͍ͮͯIUNMTWHEPDVNFOUPCKFDUͷ ॲཧΛߦ͏ɺͱ͍͏ίϯηϓτ 47(ૢ࡞ ਺஋ॲཧ ՄࢹԽϢʔςΟϦςΟ

    ͷ૯߹+BWB4DSJQUϥΠϒϥϦ 47(TFMFDUPSBUUSTUZMF ਺஋ॲཧTDBMFOFTUBSSBZNBUI ՄࢹԽϢʔςΟϦςΟTDBMFBYJTMBZPVU
  11. ۩ମྫ <!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>
  12. ۩ମྫ ଐੑελΠϧૢ࡞ 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 ͳͲ͸Ҿ਺ʹඥ෇͚ΒΕͨσʔλΛ औΓɺͦΕʹԠͨ͡ॲཧΛߦ͏
  13. ۩ମྫ σʔλʹجͮ͘௥Ճ 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;! }); ૿͑ͨʂ
  14. 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.Λॲཧͷର৅ʹ͢Δ
  15. ۩ମྫ σʔλʹجͮ͘࡟আ var lessData = pdata.slice(0, 2);! paragraphs.data(lessData).exit().remove(); ʮEBUB FYJU

    ʯ FYJU ʹΑͬͯɺ%0.σʔλΛॲཧͷର৅ʹ͢Δ σʔλ  ࠩ෼⾣͜Ε͕SFNPWF ͨ͠෼ طଘͷQ
  16. 4FMFDUJPO ྫ͑͹ ඥ෇͚ͨσʔλ طଘͷ%0. FYJU TFMFDUJPO FOUFS ଐੑɾελΠϧɾςΩ ετͷมߋͳͲΛߦ͏ ৽نʹ%0.Λ௥Ճ

    ͠ɺಉ࣌ʹଐੑɾελ ΠϧɾςΩετΛηο τ͢Δ طଘͷ%0.Λ࡟আ͠ ͨΓɺಁ໌౓Λ্͛ͨ ΓΛߦ͏
  17. 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>
  18. +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){!
  19. +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();
  20. +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]; });!
  21. +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);
  22. +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); }! });!
  23. +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');
  24. +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)"! });
  25. σʔλՄࢹԽͱ͸ The main goal of data visualization is its ability

    to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ σʔλՄࢹԽͷ໨త͸ɺσʔλΛՄࢹԽ͠ɺ ৘ใΛ໌͔֬ͭޮ཰తʹ఻͑Δ͜ͱͰ͋Δ $
  26. σʔλՄࢹԽͷϚϯτϥ 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 $