データビジュアライゼーションの作り方
•
2 likes•3,126 views
Inside Frontend #1にて発表したないようです。 HTML版 http://shimz.me/slide/inside-frontend_1/#/
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to データビジュアライゼーションの作り方
Similar to データビジュアライゼーションの作り方 (20)
データビジュアライゼーションの作り方
- 1. Inside Frontend #1 データビジュアライゼーション の作り方 Created by /Masayuki Shimizu @_shimizu
- 2. 1
- 4. 主なお仕事 3
- 6. 5
- 7. 6
- 8. 7
- 9. 8
- 10. 9
- 13. 制作フロー 1. 企画発案（記者より） 2. データ収集・分析・整形 3. デザイン案やモックを作って打ち合わせ 4. デザイン決定 5. 実装 6. 宣伝用の素材等作成 (SNSに流す用のグラフィックスや動画など) 11 . 2
- 18. D3 GalleryD3 Gallery 12 . 3
- 20. 忘れましょう。 12 . 5
- 23. Data -> Document 12 . 8
- 27. Data-Driven Document var data = [{id:0, value:100}, {id:1, value:200}, {id:2, value:300}] //選択した要素にデータを束縛する const div = d3.selectAll("div").data(data, (d) => d.id) //要素が足りない時は追加 const appendDiv = selector.enter().append("div") //要素が多すぎる時は削除 const removeDiv = selector.exit().remove() //アトリビュートの内容をアップデートする div.merge(appendDiv).attr("width", d=> d.value ) 12 . 12
- 29. 操作は変わらない const projection = d3.geoMercator() .fitExtent([[0, 0], [1240, 800]], geojson) const desc = d3.geoPath().projection(projection) //path要素にデータを束縛する const path = svg.selectAll("path").data(geojson.features) //path要素が足りなければ追加する const appendPath = path.enter().append("path") //path要素が多すぎるなら削除する const removePath = path.exit().remove() 12 . 14
- 30. 12 . 15
- 31. 可視化 //人口が２万人以上・以下で塗り分ける maps.attr("fill", d => (d.properties.pop > 20000) ? "green" : "blue" //群馬県に所属する市区町村だけ赤く塗る maps.filter(d => d.properties.pref === "群馬県").attr("fill", "red" 12 . 16
- 32. 12 . 17
- 34. BAD KNOWHOWBAD KNOWHOW 13 . 1
- 36. 13 . 3
- 38. 対応策 最初にレイヤーを作っておき、手前に出したいエ レメントをコピーして表示する <svg> <g class="axisLayer"></g> <g class="plotLayer"> <circle class="orgin"> </g> <g class="overlay"> </g> </svg> <svg> <g class="axisLayer"></g> <g class="plotLayer"> <circle class="orgin"> </g> <g class="overlay"> <circle class="copy"> // <!-- 他の </g> </svg> 13 . 5
- 39. copy tips 束縛されたデータもコピーしておく var plotLayer = d3.select(".plotLayer") var ovarlay = d3.select(".overlay") plotLayer .selectAll("rect") .on("mouseover", copy(overlay)) function copy(layer){ return function(){ var node = d3.select(this).node() var nodeName = node.nodeName var nodeAttr = node.attributes var data = d3.select(this).data() 13 . 6
- 40. ポイント はじめにレイヤーの構成をしっかり決めておく 要素を並べ替えるより、コピーしてしまう方が 管理がしやすい オリジナルの要素にバインドされているデータ も一緒にコピーしておくと便利 13 . 7
- 43. 問題点 13 . 10
- 44. SAMPLE 13 . 11
- 45. 対応策 頂点の数を揃える function geo2square(coordinates, width, height) { var centroid = d3.polygonCentroid(coordinates) width = (width) ? width : 0 ; height = (height) ? height : 0 ; var p = [] var i = 0 var length = coordinates.length var qtr = ~~(length/4) var nScale = d3.scaleLinear().domain([0, qtr]).range([0, width var sScale = d3.scaleLinear().domain([0, qtr]).range([width, 13 . 12
- 47. 折り返さない問題 13 . 14
- 49. 対応策 tspanで括る var textArray = ["1行目、あ","2行目", "3行目あああああ" d3.select("svg").append("text") .datum(textArray) .attr("transform", "translate(100, 100)" .each(leftLinebreak) function leftLinebreak(array){ d3.select(this).selectAll("tspan" .data(array) .enter() .append("tspan") .attr("x", "0em") .attr("y", function(d,i) <text> <tspan x="0em" y="0em">1行目、あ</tspan <tspan x="0em" y="1em">2行目</tspan> <tspan x="0em" y="2em">3行目あああああ< <tspan x="0em" y="3em">4行目あ</tspan> </text> 13 . 16
- 50. SAMPLE 13 . 17
- 51. foreignObject SVGの中にHTMLを埋め込める。折り返しも効く。 ※ IE11未対応 <svg> <foreignObject width="200" height="200"> <html> <div style="width:100px">あああああああああああああああああああああああああああ </html> </foreignObject> </svg> 13 . 18
- 52. aout wrap 13 . 19
- 56. SVGをラスタライズする方法 1. SVG要素をdata URIスキームに変換してimageオ ブジェクトにする 2. imageオブジェクトをcanvasにdrawImageする 3. canvasから取得したデータをdata URI化する 13 . 23
- 59. SAMPLE 13 . 26
- 62. 資料 Visual Data ～データや映像で体感：日本経済新 聞 D3.js - Data-Driven Documents bl.ocks.org/shimizu - 今回使ったサンプルコード 14 . 2