3f:null 40:["$","title",null,{"children":"2_Learn D3: By Example | onepisya | Observable"}] 46:[{"id":"d28dcb2f7ccecddccb458a31296dbf5f290f4915347d845ecec513b55d27e8118eb4706dcd2430bcf702251bb2afa4e1f78ae41359a56c01d2b30559679d9a8b","href":"https://static.observableusercontent.com/files/d28dcb2f7ccecddccb458a31296dbf5f290f4915347d845ecec513b55d27e8118eb4706dcd2430bcf702251bb2afa4e1f78ae41359a56c01d2b30559679d9a8b","name":"changing-stuff@1.jpg","type":"image/jpeg","lastModified":1660575365298.756,"size":80072},{"id":"3847c94c6702a07037c13c98420295e8aae20c8a4630edea8543bbf7e8a72c87dd41d455035bc3f229ef3e6736ff476a7f34bcd14f013ae0a9a6c2d45114524f","href":"https://static.observableusercontent.com/files/3847c94c6702a07037c13c98420295e8aae20c8a4630edea8543bbf7e8a72c87dd41d455035bc3f229ef3e6736ff476a7f34bcd14f013ae0a9a6c2d45114524f","name":"values@1.json","type":"application/json","lastModified":1660575365298.756,"size":16177}] 44:{"id":"3f169bf818d84ada","slug":"2_learn-d3-by-example","title":"2_Learn D3: By Example","thumbnail":"c7e8ece8334232f9e61c578c1d49b6e4c101241224841484ab6d29b5ab2f9aba","access_level":"public","create_time":"$D2022-08-15T14:56:05.298Z","update_time":"$D2022-08-19T05:37:47.109Z","view_time":null,"first_public_time":"$D2022-08-15T15:51:47.279Z","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":1,"starred":false,"owner":{"type":"team","id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":"starter_2024","bio":"","following":false},"version":844,"publish_version":844,"role":null,"authored":false,"authors":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d75b5bb613c35fe2","slug":"d3learn","title":"D3Learn","owner":{"id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya"}},"type":"notebook","body":{"titling":"auto","title":"2_Learn D3: By Example","cells":[{"id":81,"value":"# 2_Learn D3: By Example\n\n使用D3的最好方法之一是 [浏览画廊 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":"如果您幸运的话（有很多可供选择，您的赔率还不错），您可能会找到一个示例，您可以按原样重新利用。这可以节省大量的努力，以学习如何从头开始构建。e.g 例如, 构造一个 treemap, 你*可以*咨询 [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":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"这可能感觉自己在作弊（cheating）, but it’s okay! 👍 示例不仅仅是可重用的模板，而且是学习的工具，暗示了要学习的主题😁。\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":"并非巧合, Observable 是被设计来帮助您修改，以及查看任何笔记的 , 编辑一个单元格, 看下会发生什么! 在大多数情况下使用单击来替换一个文件来替换你的数据. 如果结果是你想要的, 可以使用 `forking` 来保存您的工作。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"您还可以导入示例(import examples)并对其进行修改，而无需深入研究代码. 这无疑是开始 D3 的最开方法, 随着您的学习它会变得更加强大。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"让我们看看怎么做。\n我把一组数字交给你。您可能会告诉我有关这些数据的信息？","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":"你可以手动检查一些值, 但是这不能揭示出更多的东西. 无法知道您检查的少数值是否代表整体分布。如果您计算了一些 [摘要统计 summary statistics](/@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":"嗯，这很了不起。但我们需要比单个数字更丰富的东西来理解分布. 我们需要可视化。具体来说, 一个直方图 (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à!* 现在我们看到，数据大致形成了一个以 0 为中心的正态分布。 (我使用给定一个 (预期值) ${tex`\\mu = 0`} 和 (标准偏差) standard deviation ${tex`\\sigma = 1`} [d3.randomNormal](/@d3/d3-random) 来创建 `values` .)","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轴的滴答(ticks)较少？很神奇！而且，如果您认为这很酷，请在我们注入动态数据时观看此直方图将会活跃起来！单击下面的播放或拖动滑块。","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":839,"value":"Histogram(randoms, { 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":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` cell 以正态分布生成随机值。`domain` 选项将直方图的 `domain` 固定到 `[-10，+10]`;这显示了分布如何响应平均值MU的变化；如果未指定固定`domain`，则将计算 `domain` 以符合数据，并且仅通过仔细阅读 `X轴tick` 来明显变化。（要亲自查看此内容，请尝试删除上面的`domain option`。）","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的单元会自动运行，这多亏了数据流。 [dataflow](/@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## Appendix(附录)\n\n许多Observable的笔记本使用附录来定义所需的单元格，比如`require`和`imports`，而不会中断读取流程。这一节没有什么特别之处——纯粹是一种文体惯例。","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":"$W46","stdlib":"1"}} 45:"$44:body"