3e:null 3f:["$","title",null,{"children":"Learn D3: By Example | weifeng.zhang | Observable"}] 45:[{"id":"d28dcb2f7ccecddccb458a31296dbf5f290f4915347d845ecec513b55d27e8118eb4706dcd2430bcf702251bb2afa4e1f78ae41359a56c01d2b30559679d9a8b","href":"https://static.observableusercontent.com/files/d28dcb2f7ccecddccb458a31296dbf5f290f4915347d845ecec513b55d27e8118eb4706dcd2430bcf702251bb2afa4e1f78ae41359a56c01d2b30559679d9a8b","name":"changing-stuff@1.jpg","type":"image/jpeg","lastModified":1666236443272.475,"size":80072},{"id":"3847c94c6702a07037c13c98420295e8aae20c8a4630edea8543bbf7e8a72c87dd41d455035bc3f229ef3e6736ff476a7f34bcd14f013ae0a9a6c2d45114524f","href":"https://static.observableusercontent.com/files/3847c94c6702a07037c13c98420295e8aae20c8a4630edea8543bbf7e8a72c87dd41d455035bc3f229ef3e6736ff476a7f34bcd14f013ae0a9a6c2d45114524f","name":"values@1.json","type":"application/json","lastModified":1666236443272.475,"size":16177}] 43:{"id":"98585f132762c721","slug":null,"title":"Learn D3: By Example","thumbnail":"cd703c17169bbd70382c64c718c5ec3eee80b81fcebe9034dc34bc035b9a39fd","access_level":"public","create_time":"$D2022-10-20T03:27:23.272Z","update_time":"$D2022-10-20T10:37:03.680Z","view_time":null,"first_public_time":"$D2022-10-20T03:27:23.272Z","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":"6b3568667956ea80","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":"starter_2024","bio":"","following":false},"version":823,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6635d799ab4ae335","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6635d799ab4ae335","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learn D3: By Example","cells":[{"id":81,"value":"# Learn D3: By Example\n\nOne of the best ways to start with D3 is to [browse the gallery](/@d3/gallery).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"If you’re lucky (and with many to choose from, your odds aren’t bad), you may find an example you can repurpose as-is. This can save a lot of effort over learning how to build from scratch. For example, to construct a treemap, you *could* consult the [d3-hierarchy API reference](https://github.com/d3/d3-hierarchy/blob/master/README.md), but much faster would be to take the [treemap example](https://observablehq.com/@d3/treemap) and substitute your data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"This may feel like cheating, but it’s okay! 👍 Examples are not merely reusable templates but tools for learning, hinting at subjects for study. “Breaking” an example by tinkering—changing stuff and seeing what happens—helps you achieve understanding faster than passive reading.\n\nPlus, it’s fun. 😺","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"Not by coincidence, Observable is designed to help you tinker. Visit any notebook, edit a cell, and see what happens! In many cases all it takes to substitute your data is clicking to replace a file. If you like the result, save your work by forking.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"You can also import examples and tinker with them without diving into the code. This is undoubtedly the fastest way to start with D3, and it’ll grow more powerful as you learn.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"Let’s see how.\n\nSay I hand you a set of numbers. What might you tell me about this data?","pinned":false,"hidden":false,"mode":"md","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":"You could inspect a few values by hand, but this won’t reveal much. There’s no way to know if the handful of values you inspect is representative of the overall distribution. What if you computed a few [summary statistics](/@d3/d3-mean-d3-median-and-friends), such as the min, median and max?","pinned":false,"hidden":false,"mode":"md","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":"Well… that’s something. But we need something richer than a single number to get a sense of the distribution. We need a visualization. Specifically, a histogram. So let’s [import](/@observablehq/introduction-to-imports) the [D3 example histogram](/@d3/histogram).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {Histogram} 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":"Histogram(values)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"*Et voilà!* Now we see: the data roughly forms a normal distribution centered on zero. (I created these values using [d3.randomNormal](/@d3/d3-random) with an expected value ${tex`\\mu = 0`} and standard deviation ${tex`\\sigma = 1`}.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"But we’re not limited to substituting data when we import. We can specify options, say to customize the appearance of the *x*- or *y*-axis. Or if we’d prefer a slightly shorter chart, we can change the height.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"Histogram(values, {width, height: 200, color: \"steelblue\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"Did you notice fewer ticks along the *y*-axis in this shorter chart? Magic! And if you think that’s cool, watch this histogram come alive as we inject *dynamic* data! Click play below or drag the slider.","pinned":false,"hidden":false,"mode":"md","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":"Histogram(randoms, {width, height: 200, color: \"steelblue\", domain: [-10, 10]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"randoms = 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":521,"value":"The *randoms* cell generates random values with a normal distribution. The *domain* option fixes the histogram’s domain to [-10, +10]; this shows how the distribution shifts in response to the mean, *mu*; if a fixed domain were not specified, the domain would be computed to fit the data and the change in distribution would only be apparent by a close reading of the *x*-axis ticks. (To see this yourself, try removing *domain* option above.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"We didn’t need to rewrite the histogram to make it live because cells referencing *mu* automatically run when *mu* changes thanks to [dataflow](/@observablehq/how-observable-runs).\n\nNow that you’ve seen how far you can get repurposing examples, let’s write some code from scratch!\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"---\n\n## Appendix\n\nMany Observable notebooks use an appendix to define needed cells, such as requires and imports, without interrupting the flow of reading. There’s nothing special about this section—it’s purely a stylistic convention.","pinned":false,"hidden":false,"mode":"md","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":"$W45","stdlib":"1"}} 44:"$43:body"