2d:null 2e:["$","title",null,{"children":"D3 を学ぶ : イントロダクション | Takuo Suzuki | Observable"}] 33:T56f,md`

[D3’s logo](/@d3/logo) is drawn with circles and perpendicular lines.

`34:[] 31:{"id":"15051294367d2cfa","slug":"learn-d3-ja","title":"D3 を学ぶ : イントロダクション","thumbnail":"7db5ad95433a73ddc8574ecb5a8c2c4252d1aa186c07cfc2f1bfd013636c7617","access_level":"public","create_time":"$D2021-04-16T07:32:52.663Z","update_time":"$D2021-08-21T16:08:55.049Z","view_time":null,"first_public_time":"$D2021-04-16T15:26:44.175Z","has_unpublished_edits":null,"fork":{"id":"5a4c8ad2dcf5d2e1","slug":"learn-d3","title":"Learn D3: Introduction","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":"starter_2024"},"version":1624,"publish_version":1624,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null}],"members":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5baa9b3ce38aa33a","slug":"d3","title":"D3 を学ぶ","owner":{"id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki"}},"type":"notebook","body":{"title":"D3 を学ぶ : イントロダクション","cells":[{"id":0,"value":"md`# D3 を学ぶ : イントロダクション\n\n本シリーズは、ノートブック形式で [D3.js](https://d3js.org) を学ぶためのチュートリアルです。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1507,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"md`まず本題に入る前に、*なぜ D3 を学ぶ必要があるのか？そして Observable を使って学ぶ必要があるのか？* について考えてみましょう。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"md`まず初めに、D3 は ([8,000万ダウンロード](/@mbostock/npm-daily-downloads?name=d3) されており、[GitHubで 9万スター](https://github.com/d3/d3))の実績があります。\nそして、コミュニティ主導で開発されたチュートリアル、動画、クラス、そして書籍があります。さらに D3 チームは数百にも及ぶ Fork 可能なサンプルやチュートリアルを提供することで学習する上で必要なリソースの提供と、高い生産性をサポートしています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"md`D3 は非常に柔軟性を持ったなライブラリです。D3の一番の強みは、あなたが表現したいことがほぼ全て実現できます！[D3 gallery](/@d3/gallery) を見てもらうとわかるように、[treemap](/@d3/treemap), [hierarchical edge bundling](/@d3/hierarchical-edge-bundling/2), [Sankey diagram](/@d3/sankey-diagram), [density contours](/@d3/density-contours), [force-directed graph](/@d3/disjoint-force-directed-graph) などの様々なサンプルがあります。(そして、約100にわたる[地図を使った表現](/@d3/world-map)が実装されています）\n柔軟性の高さは、D3のローレベルなアプローチによるもので、チャートの設定を少し変更するという思想では無く、[shapes](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12)や[scales](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f)など組合わせる事が可能な要素よって構成されています。またD3には特殊な制約がないため、モダンブラウザでサポートされているすべての機能やAPIを利用することが可能です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"md`また、D3 はアニメーションやインタラクションにも非常に適したライブラリです。実例としては[bar chart race](/@d3/bar-chart-race)や[animated treemap](/@d3/animated-treemap) を見てみてください。\n\nそれ以外にも [hierarchical bar chart](/@d3/hierarchical-bar-chart), [collapsible tree](/@d3/collapsible-tree), ズーム可能な [sunburst](/@d3/zoomable-sunburst), [treemap](/@d3/zoomable-treemap)、や [packed circles](/@d3/zoomable-circle-packing). 選択可能な [scatterplot matrix](/@d3/brushable-scatterplot-matrix) や [area chart](/@d3/zoomable-area-chart)にズームしてみてください。アニメーションはストーリーテリングを行う上で非常に強力で、インタラクションはアクティブなユーザーにとって新しい発見を提供します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"md`もちろん、このような表現豊かな実装を行うために、多大なる学習努力が必要です。D3 には30以上のモジュールがあり、また1000を超えるメソッドがあります！そのため、D3 はこういった表現に特化した、[Vega-Lite](https://vega.github.io/vega-lite/) などに比べると退屈な処理をたくさん記述する必要があります。\n\nそれでは、なぜ Observable なのでしょうか？`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"md`Observable は D3 を学ぶ上で非常に有益なプラットフォームです。なぜなら、Observable は [spreadsheetのように](/@observablehq/how-observable-runs)、データフローさえきちんとすれば [コードを簡略化](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0)することができます。編集をすると、自動的に編集内容に応じて、コードが実行されフィードバックを瞬時に受け取ることができ。インタラクションや、アニメーションもほぼコードを記述すること無く使うことが可能です。\nObservable についての[概要と機能](/@observablehq/observables-not-javascript)についてもカバーしていきます。`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"md`最後に、Observable はコラボレーションを重要視し、何か学んだらそれをコミュニティに還元できるプラットフォームです。コピー＆ペーストにとどまらず、全てのノートブックはForkすることや[インポート](/@observablehq/introduction-to-imports)することが可能です。\n\nノートブックは、[color legend](/@d3/color-legend)や[scrubber](/@mbostock/scrubber)のような、再利用可能なコンポーネントとしてエキスポートができます。そして、[セルにコメント](/@observablehq/suggestions-and-comments)をしたり、サジェストと[変更をマージ](/@observablehq/fork-share-merge)したり、[ヘルプを求める](https://talk.observablehq.com/)ことも可能です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"md`序章はここまでにして、実際の本編を見てみましょう。\n\nNext`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"md`---\n\n## 目次\n\n1. イントロダクション - 今はここ!\n1. [事例 : By Example](/@taquo/learn-d3-by-example-ja?collection=@taquo/learn-d3-ja) - 事例を見つけ、フォークし、インポートする方法\n1. [データ : Data](/@taquo/learn-d3-data-ja?collection=@taquo/d3) - データのロード、パース、トランスフォーム\n1. [スケール/尺度 : Scales](/@taquo/learn-d3-scales-ja?collection=@taquo/d3) - 抽象的なビジュアルを作る\n1. [シェイプ : Shapes](/@taquo/learn-d3-shapes-ja?collection=@taquo/d3) - 可視化に必要なプリミティブな形\n1. [アニメーション : Animation](/@taquo/learn-d3-animation?collection=@taquo/d3) - 時間軸と共に変化するグラフィック\n1. [連結 : Joins](/@taquo/learn-d3-joins?collection=@taquo/d3) - DOMを操作するための、D3のパターン\n1. [インタラクション : Interaction](/@taquo/learn-d3-interaction?collection=@taquo/d3) - ユーザーの入力に対する反応\n1. [学習を更に進める上で　: Further Topics](/@taquo/learn-d3-further-topics?collection=@taquo/d3) - 次のステップに行くために必要なこと`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"