<style> h1, h2, h3, h4, h5, p { text-align: left; line-height: 1.5 } p { color: white; font-size: 3rem; } .reveal h2, .reveal h3 { border-bottom: 5px solid white; } .reveal ul { display: block; color: white; } .center { width: 100vw; height: 100vh; display: flex; align-items: center; } </style> <div class='center'> <h3 style="transform: translateY(-50%)">D3.jsで始める <br>データビジュアライゼーション <br>Iha Chihiro 2020/12</h3> </div> --- ### データビジュアライゼーションとは <br />数値の集まりからより効果的に情報を伝えるための手段 --- ### データビジュアライゼーションとは <br />数値の集まりからより効果的に情報を伝えるための手段 <br />世の中にあるデータビジュアライゼーションされたものって視覚的に面白くてかっこいいものが多い --- ### 世の中の例 ポケモン チャートレース https://www.youtube.com/watch?v=a3XKE7YdgJk {%youtube a3XKE7YdgJk %} --- ### 世の中の例 アメリカ大統領選 https://ig.ft.com/us-election-2020/ <div> <img src='https://i.imgur.com/XAy3z76.png' style='margin: 0 auto' /> </div> --- ### 世の中の例 https://earth.nullschool.net/jp/ <div> <img src='https://i.imgur.com/a9bBUuM.jpg' style='margin: 0 auto' /> </div> --- ### こういうの作れるようになりたい --- ### ビジュアライゼーションの候補 (Webで) - Chart.js - Google Charts - D3.js - その他 --- ### ビジュアライゼーションの候補 (Webで) - Chart.js - Google Charts - D3.js　　　　-- 公式にある例がすごいリッチだった - その他 https://observablehq.com/@d3/gallery --- 初めて聞いたけど人気のあるライブラリみたい https://www.npmtrends.com/d3  --- <div class="center"> <h3 style='transform: translateY(-50%)'> 触ってきたので紹介します </h3> </div> --- <div style='background-color: white; display: flex; align-items: center; padding: 12px 20px;'> <img src='https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667' /> <h3 style='color: #444; margin-left: 20px;'> D3.js </h3> </div> <br /> - 2011年生まれ - メソッドチェインで書けるjQueryみたいな書き方 - データビジュアライゼーションに強いライブラリ <br /> #### 特徴 - めちゃくちゃリッチな表現ができる - html, html canvasに描画できるが主にはsvgが強い - Observableというプラットフォーム --- ### Observable https://observablehq.com/ - ドキュメント - [公式ドキュメント](https://observablehq.com/documentation) - [チュートリアル](https://observablehq.com/tutorials) - [日本語チュートリアル](https://observablehq.com/@sugi2000/d3/2) --- ### Observable https://observablehq.com/ - ドキュメント - [公式ドキュメント](https://observablehq.com/documentation) - [チュートリアル](https://observablehq.com/tutorials) - [日本語チュートリアル](https://observablehq.com/@sugi2000/d3/2) - notebook - web上での実行環境を用意してくれている - セル毎に実行できてJupyter Notebookに近い感じ --- ### Observable https://observablehq.com/ - ドキュメント - [公式ドキュメント](https://observablehq.com/documentation) - [チュートリアル](https://observablehq.com/tutorials) - [日本語チュートリアル](https://observablehq.com/@sugi2000/d3/2) - notebook - web上での実行環境を用意してくれている - セル毎に実行できてJupyter Notebookに近い感じ - trending - 話題になっている作品が並んでいる - notebookの形式でコードと結果が見れる --- ### ここからD3.js入門的なことをします --- ### ここからD3.js入門的なことをします #### 基本のキ https://codepen.io/ihch/pen/MWjvXXz ```javascript= d3.select('body') // bodyを取得 .append('p') // bodyの中にpを追加 .text('new'); // 追加したpに文字列を入れる ``` --- ### ここからD3.js入門的なことをします #### 基本のキ https://codepen.io/ihch/pen/MWjvXXz ```javascript= d3.select('body') // bodyを取得 .append('p') // bodyの中にpを追加 .text('new'); // 追加したpに文字列を入れる .style('color', 'teal') // スタイル付与 .attr('id', 'new-text') // 属性追加 .classed('text', true) // クラス追加 ``` --- ### データを入れていく https://codepen.io/ihch/pen/mdrMjRp ```javascript= const data = [ 5, 10, 15, 20, 25 ]; const func1 = () => { d3.select('body') // 要素を取得 .selectAll('p') // 使うタグを指定 .data(data) // データバインディング .enter() // データ数に合わせてselectしたpの数の足りない分要素の枠を追加 // この時点では何のタグかは決まっていない .append('p') // タグを入れる .text('data') // 追加したタグにテキストを指定 console.log(d3.selectAll('p')); // Nodeの __data__ にバインディングしたデータが入っている } ``` --- ### データを入れていく https://codepen.io/ihch/pen/mdrMjRp ```javascript= const data = [ 5, 10, 15, 20, 25 ]; const func1 = () => { d3.select('body') // 要素を取得 .selectAll('p') // 使うタグを指定 .data(data) // データバインディング .enter() // データ数に合わせてselectしたpの数の足りない分要素の枠を追加 // この時点では何のタグかは決まっていない .append('p') // タグを入れる .text('data') // 追加したタグにテキストを指定 console.log(d3.selectAll('p')); // Nodeの __data__ にバインディングしたデータが入っている } ``` ```javascript= const data = [ 5, 10, 15, 20, 25 ]; const func2 = () => { d3.selectAll('p') .data(data) .enter() .append('p') .text(d => d) // 関数を渡すと第一引数にバインディングしたデータが入る .style('color', d => d > 15 ? 'red' : 'teal') // styleの指定も関数でできる } ``` --- ### グラフを作ってみる https://codepen.io/ihch/pen/jOMLpGo ```javascript= const data = [ 50, 150, 200, 100, 250, 30 , 50, 130, 110, 210 ]; d3.select('.graph') .selectAll('rect') .data(data) // バインディングしたデータの長さの分チェインしたメソッドを呼ぶ .enter() .append('rect') .attr('class', 'bar') // クラス指定 .style('height', d => d + 'px'); // 高さを指定 ``` <span style='display: flex; margin-left: 60px;'> <img src='https://i.imgur.com/p4tauqL.png' /> </span> --- ### 地図の表示 https://observablehq.com/@sugi2000/japan-atlas-topojson-other-topojson --- ### 締め - 書き方はわりと簡単 --- ### 締め - 書き方はわりと簡単 - サンプルコードが公開されていて勉強しやすい --- ### 締め - 書き方はわりと簡単 - サンプルコードが公開されていて勉強しやすい - 今回はやってないですがインタラクションやアニメーションもいい感じに付けられる --- ### 締め - 書き方はわりと簡単 - サンプルコードが公開されていて勉強しやすい - 今回はやってないですがインタラクションやアニメーションもいい感じに付けられる - こういうリッチなものが求められることももしかしたらある(?)