D3.jsでグラフを描いてみた

アニメーションはこちら👇
https://docs.google.com/presentation/d/1VZmzb3RA3bkFzYWD82qryabTebuur7bUZnuNCphvYqg/edit?usp=sharing

Transcript

1. D3.jsでグラフを描いてみた @ak2ie_tech
2. 自己紹介 • あっきー • システムエンジニア8年目
3. 目次 1. D3.jsとは 2. 基本的な書き方 3. アニメーション 4. ツールチップ
4. D3.jsとは
5. D3.jsとは いろんなグラフを描ける JavaScriptライブラリ
6. https://observablehq.com/@d3/gallery
7. D3.jsの特徴
8. 1.SVG
9. JavaScript で操作可能
10. ズームしても きれい
11. 2.メソッドチェーン
12. d3.a() .b() .c()
13. 3.描くだけではない
14. アニメーション
15. ツールチップ ドラッグ
16. 基本的な書き方
17. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform", "translate(200,200)"); 円グラフの描画領域を作り、データを適用
18. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform", "translate(200,200)"); ←操作対象を選択 　※この時点では存在しない
19. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform", "translate(200,200)"); ←データの個数分の 　置き場所を作る const data = [5, 10, 15, 30, 20]; const pie = d3.pie().value((d) => d)(data); ↑円グラフ描画に必要な情報（描画開始/終 了角度、順番など）を生成してくれる
20. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform", "translate(200,200)"); ←データと置き場所を紐付ける
21. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform", "translate(200,200)"); ←作ったプレースホルダー 　について処理する
22. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform", "translate(200,200)"); ↓軸を移動 デフォルトでは 右下しか見えない x軸 y軸
23. node .append("path") .attr("d", arc) .attr("fill", (_, i) => { return colors[i % colors.length]; }); const arc = d3.arc().outerRadius(100).innerRadius(0); 円グラフを設定し描画
24. node .append("path") .attr("d", arc) .attr("fill", (_, i) => { return colors[i % colors.length]; }); const arc = d3.arc().outerRadius(100).innerRadius(0); const colors = ["カラーコード", ...]; ↓半径100の円
25. node .append("path") .attr("d", arc) .attr("fill", (_, i) => { return colors[i % colors.length]; }); const arc = d3.arc().outerRadius(100).innerRadius(0); const colors = ["カラーコード", ...]; ←円グラフを描画 　色を塗る
27. アニメーション
28. node .transition() .duration(1000) .attr("transform", "translate(300,300)scale(1)"); ←アニメーションさせる
29. node .transition() .duration(1000) .attr("transform", "translate(300,300)scale(1)"); ←アニメーション時間
30. node .transition() .duration(1000) .attr("transform", "translate(300,300)scale(1)"); ↑アニメーション完了後の状態 const node d3. ... .attr("transform", "translate(300,300)scale(0.01)"); 最初は小さくしておく↑
32. ツールチップ
33. node .on("mouseover", (_, d) => { d3.select("#tooltip") .style("visibility", "visible") .html(`${d.data.name}<br />${d.data.value}`); }) .on("mousemove", (event, _) => { d3.select("#tooltip") .style("top", event.pageY + 20 + "px") .style("left", event.pageX + 20 + "px"); }) .on("mouseout", () => { d3.select("#tooltip").style("visibility", "hidden"); }); ツールチップを表示するコード
34. node .on("mouseover", (_, d) => { d3.select("#tooltip") .style("visibility", "visible") .html(`${d.data.name}<br />${d.data.value}`); }) .on("mousemove", (event, _) => { d3.select("#tooltip") .style("top", event.pageY + 20 + "px") .style("left", event.pageX + 20 + "px"); }) .on("mouseout", () => { d3.select("#tooltip").style("visibility", "hidden"); }); ↑内容を設定 　名前と値を表示 const data = [ { name: "やまだ", value: 5 }, { name: "たなか", value: 10 }, { name: "さとう", value: 15 }, { name: "いけだ", value: 30 }, { name: "こやま", value: 20 }, ]; ←データ
35. node .on("mouseover", (_, d) => { d3.select("#tooltip") .style("visibility", "visible") .html(`${d.data.name}<br />${d.data.value}`); }) .on("mousemove", (event, _) => { d3.select("#tooltip") .style("top", event.pageY + 20 + "px") .style("left", event.pageX + 20 + "px"); }) .on("mouseout", () => { d3.select("#tooltip").style("visibility", "hidden"); }); ←マウスカーソルに 　追従
36. node .on("mouseover", (_, d) => { d3.select("#tooltip") .style("visibility", "visible") .html(`${d.data.name}<br />${d.data.value}`); }) .on("mousemove", (event, _) => { d3.select("#tooltip") .style("top", event.pageY + 20 + "px") .style("left", event.pageX + 20 + "px"); }) .on("mouseout", () => { d3.select("#tooltip").style("visibility", "hidden"); }); ↓マウスが外れたら消す
38. ご清聴ありがとうございました D3.js公式サイト https://d3js.org/ D3 チュートリアル 日本語版 https://observablehq.com/@sugi2000/d3-tutorial-japanese