44:["$","title",null,{"children":"D3 を学ぶ: By Example | Takuo Suzuki | Observable"}] 4c:[{"id":"d28dcb2f7ccecddccb458a31296dbf5f290f4915347d845ecec513b55d27e8118eb4706dcd2430bcf702251bb2afa4e1f78ae41359a56c01d2b30559679d9a8b","href":"https://static.observableusercontent.com/files/d28dcb2f7ccecddccb458a31296dbf5f290f4915347d845ecec513b55d27e8118eb4706dcd2430bcf702251bb2afa4e1f78ae41359a56c01d2b30559679d9a8b","name":"changing-stuff@1.jpg","type":"image/jpeg","lastModified":1618589640249.404,"size":80072},{"id":"3847c94c6702a07037c13c98420295e8aae20c8a4630edea8543bbf7e8a72c87dd41d455035bc3f229ef3e6736ff476a7f34bcd14f013ae0a9a6c2d45114524f","href":"https://static.observableusercontent.com/files/3847c94c6702a07037c13c98420295e8aae20c8a4630edea8543bbf7e8a72c87dd41d455035bc3f229ef3e6736ff476a7f34bcd14f013ae0a9a6c2d45114524f","name":"values@1.json","type":"application/json","lastModified":1618589640249.404,"size":16177}] 48:{"id":"28e189428fd50848","slug":"learn-d3-by-example-ja","title":"D3 を学ぶ: By Example","thumbnail":"bcbc723c022d8372d53aecce79cd3782e10e832de22b534a93a8f674eb8dfd3f","access_level":"public","create_time":"$D2021-04-16T16:14:00.249Z","update_time":"$D2021-08-21T16:10:58.823Z","view_time":null,"first_public_time":"$D2021-04-16T16:16:00.984Z","has_unpublished_edits":null,"fork":{"id":"7420ae0e4ed77fc4","slug":"learn-d3-by-example","title":"Learn D3: By Example","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":"starter_2024","bio":"Technologist passionate about Data Visualization & Creative Coding. DevRel @ Google Japan. all opinions are mine.","followed_by_you":false,"follows_you":false},"version":770,"publish_version":770,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null,"bio":"Technologist passionate about Data Visualization & Creative Coding. DevRel @ Google Japan. all opinions are mine.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null,"role":"editor"}],"comments":[{"id":"e9fffa0b08d1d80c","reply_to_id":null,"content":"翻訳ありがとうございます。原文が改訂されているようですので更新いただけるとうれしいです。","create_time":"$D2022-10-11T14:02:39.703Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"5baa9b3ce38aa33a","slug":"d3","title":"D3 を学ぶ","owner":{"id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki"}},"type":"notebook","body":{"titling":"auto","title":"D3 を学ぶ: By Example","cells":[{"id":81,"value":"md`# D3 を学ぶ: By Example\n\nD3 を始める上で一番有効な学習方法は、[ギャラリー](/@d3/gallery)を見て様々な表現方法の実例を見る事です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`ギャラリーのサンプルをそのまま再利用する事も可能です。再利用する場合はゼロから作るのに比べて時間を短縮できます。例えば、ツリーマップを作成する場合、[d3-hierarchy API reference](https://github.com/d3/d3-hierarchy/blob/master/README.md) を見ながら自前で作ることもできますが、[treemap example](https://observablehq.com/@d3/treemap)から作成したいツリーマップに近いものを選択し、自分のデータを利用する方が早いでしょう。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`これはズルをしているように感じるかもしれないですが、これで良いのです! 👍 サンプルは単なるテンプレートではなく、学習の為のツールでもあります。サンプルを少し値を変えたり弄った場合にどのように変わるのかを通じて学ぶ方がレファレンスをただ読むよりも早く理解を深めることができます。\n\nそして、またその方が楽しいですしね. 😺`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`

A legitimate learning strategy. Image: [DEV Community](https://twitter.com/thepracticaldev)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`Observable はあなたが色々と改変できるように設計されています。どのノートブックでも、セルを編集し、その結果がどう変わったを見ることができます。ほとんどの場合、ファイルをあなたの独自データに差し替えるだけです。もし、結果が気に入れば、フォークすることで、自分用に保存することができます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`また、サンプルをインポートして、コードを記述することなくグラフを変更できます。これはD3を学ぶ上での最速の方法であり、このやり方を学ぶにつれてより有効なんだ手法になります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`それでは実際にやってみましょう。\n\nまず、下記のような数字の配列があります。この数字(データ）から何かを読み取れますか？`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"values = FileAttachment(\"values@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`いくつかの値を手作業で精査することもできますが、それではあまり意味がありません。なぜなら精査した一握りの値が全体のデータ内にどのように分布しているかを知る方法はありません。このような時は、D3（バージョン6）を[使って](/@observablehq/introduction-to-require)、最小値、中央値、最大値など、いくつかの[要約統計量](/@d3/d3-mean-d3-median-and-friends)を計算します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"[d3.min(values), d3.median(values), d3.max(values)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`さて…何か見えてきました。しかし分布を見る上では、もう少し情報が必要です。\n\n重要な事は、データを可視化することでよりデータをより理解する事が可能になります。今回のようなデータ形式の場合、ヒストグラムがデータの可視化に有効ですです。それではまず[ヒストグラムのサンプル](/@d3/histogram)を[インポート](/@observablehq/introduction-to-imports)し、*with* 機能を使ってみましょう、この機能は Ovservable JavaScript 特有の機能で、配列の数字の*値*をデータとして代用できます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {chart as chart1} with {values as data} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"chart1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"md`これにより、ゼロが中央値のおおよその分布図を作成することができました。(今回は、[d3.randomNormal](/@d3/d3-random)を使って、期待値を${tex`\\mu = 0`} に設定し、${tex`\\sigma = 1`}を標準偏差として利用しています)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`ただ、インポートした際に新しいデータを代用しただけで無く、全ての項目を調整することが可能です。例えば、*x*- or *y*-axisの要素を変えることもできますし、グラフ全体の高さを変更することも可能です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"import {chart as chart2} with {values as data, height} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"chart2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`グラフの高さを低くした場合、*y*-axis の目盛りが少なくなったことに気付きましたでしょうか？もし、これが有効な場合は、*ダイナミックデータ*を使ってヒストグラムが生成される模様をみてみてください。Play ボタンをおすが、スライダーを調節してみてください`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"viewof mu = Scrubber(d3.ticks(-5, 5, 200), {\n format: x => `mu = ${d3.format(\"+.2f\")(x)}`,\n autoplay: false,\n alternate: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"chart3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"md`下記の *values3* は、ヒストグラムの *x* の値が[-10, +10]のドメインでランダムな値を生成しています。ドメインを固定することで、平均値muに対応して分布がどのように変化しているのかがわかります。もし固定ドメインが指定されていなければ、ドメインはデータに合わせて計算され、分布の変化はx軸の目盛りを読むことでしかわかりません。(これを確認するには、以下のimportのwith句からxを削除してみてください。)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"values3 = Float64Array.from({length: 2000}, d3.randomNormal(mu, 2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"x = d3.scaleLinear([-10, 10], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {chart as chart3, margin, width} with {x, values3 as data, height} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"md`これは、[dataflow](/@observablehq/how-observable-runs)のおかげで、*mu*を参照しているセル（インポートされたセルを含む）は、*mu*が変更されると自動的に実行されるからです。\n\nさて、例題を再利用してどこまでできるか見てきましたが、今度はゼロからコードを書いてみましょう。\n\nNext`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"md`---\n\n## Appendix\n多くのObservableのノートブックでは、requireやimportなどの必要なセルを定義を、Appendix のセクションに記載しています。これはノートブックの可読性を向上するためのお作法です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null