44:["$","title",null,{"children":"Learn D3: By Example | 1907040205 | Observable"}] 4c:[{"id":"d28dcb2f7ccecddccb458a31296dbf5f290f4915347d845ecec513b55d27e8118eb4706dcd2430bcf702251bb2afa4e1f78ae41359a56c01d2b30559679d9a8b","href":"https://static.observableusercontent.com/files/d28dcb2f7ccecddccb458a31296dbf5f290f4915347d845ecec513b55d27e8118eb4706dcd2430bcf702251bb2afa4e1f78ae41359a56c01d2b30559679d9a8b","name":"changing-stuff@1.jpg","type":"image/jpeg","lastModified":1636471933228.765,"size":80072},{"id":"3847c94c6702a07037c13c98420295e8aae20c8a4630edea8543bbf7e8a72c87dd41d455035bc3f229ef3e6736ff476a7f34bcd14f013ae0a9a6c2d45114524f","href":"https://static.observableusercontent.com/files/3847c94c6702a07037c13c98420295e8aae20c8a4630edea8543bbf7e8a72c87dd41d455035bc3f229ef3e6736ff476a7f34bcd14f013ae0a9a6c2d45114524f","name":"values@1.json","type":"application/json","lastModified":1636471933228.765,"size":16177}] 48:{"id":"9fb8970c7c48ddca","slug":"learn-d3-by-example","title":"Learn D3: By Example","thumbnail":"9a43fad7cbdaec21931e611323ab5c9684c60c69b4fcf12718134a5f5f4fca7e","access_level":"public","create_time":"$D2021-11-09T15:32:13.228Z","update_time":"$D2021-11-10T02:53:48.451Z","view_time":null,"first_public_time":"$D2021-11-10T03:10:54.144Z","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":"a4b7eada444d9b53","login":"1907040205","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":844,"publish_version":844,"role":null,"authored":false,"authors":[{"type":"individual","id":"3fdc14ae238bd407","login":"1907040205","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3fdc14ae238bd407","login":"1907040205","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learn D3: By Example","cells":[{"id":81,"value":"# Learn D3: By Example\n\n开始使用D3的最佳方法之一是[浏览图库](/@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":"如果你足够幸运，你可能会找到一个可以重新利用的例子。这可以节省大量学习如何从头开始构建的精力。例如，要构造一个树状图，你可以参考[d3层次API引用](https://github.com/d3/d3-hierarchy/blob/master/README.md)，但是更快的方法是使用[树状图示例](https://observablehq.com/@d3/treemap)并替换你的数据。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"示例不仅是可重复使用的模板，而且是学习工具，暗示了研究的主题。通过修修补补来“打破”一个例子——改变东西，看看会发生什么——帮助你比被动阅读更快地理解。","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":"并非巧合的是，Observable的设计初衷就是帮助你进行修补。访问任何笔记本，编辑一个单元格，看看会发生什么!在许多情况下，替换数据所需要的只是单击替换文件。如果你喜欢这个结果，可以通过fork来保存您的工作。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"你还可以导入示例并对其进行修改，而无需深入到代码中。这无疑是开始D3的最快方法，随着你的学习，它将变得更加强大。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"假设我给你一组数字。关于这些数据，你能得到些什么?","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":"你可以手工检查一些值，但这不会显示太多信息。没有办法知道你检查的数值是否代表整个分布。如果你计算一些[汇总统计数据](/@d3/d3-mean-d3-median-and-friends)，比如最小值、中值和最大值，会怎么样呢?","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":"我们还需要比单个数字更丰富的东西来了解分布。我们需要可视化。具体地说,一个柱状图。因此，让我们[import](/@observablehq/introduction-to-imports) [D3示例直方图](/@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":"数据大致形成了一个以零为中心的正态分布。（使用 [d3.randomNormal](/@d3/d3-random)创建了这些值，期望值为${tex`\\mu = 0`}，标准偏差为${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":"但我们不仅限于在导入时替换数据。我们可以指定选项，比如自定义*x*轴或*y*轴的外观。或者，如果我们更喜欢略矮的图表，我们可以更改高度。","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":"在这个较短的图表中，你是否注意到 *y* 轴上的刻度减少了？那么当我们注入*动态* 数据时，这个直方图变得生动起来！单击下方的播放或拖动滑块进行观看。 ","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":"*randoms*单元格生成具有正态分布的随机值。*domain*选项将直方图的域固定为 [-10, +10]；这显示了分布如何响应均值*mu*的变化；如果未指定固定域，则将计算该域以拟合数据，并且分布的变化只有通过仔细阅读*x*轴刻度才能明显看出。（要自己查看，尝试删除上面的*domain*选项。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"我们不需要重写直方图以使其生效，因为引用 *mu* 的单元格会在 *mu* 更改时自动运行，这要归功于[数据流](/@observablehq/how-observable-runs).\n\n接下来，我们从头开始编写一些代码\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## 附录\n许多 Observable 笔记本使用附录来定义所需的单元格，例如reuires和imports，而不会中断阅读流程。这没有什么特别之处——它纯粹是一种风格约定。\n","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":"$W4c","stdlib":"1"}} 24:null