3f:null 40:["$","title",null,{"children":"1.1_Learn D3: Introduction | onepisya | Observable"}] 46:T568,

[D3’s logo](/@d3/logo) 是用圆和垂直线画出来的。

47:[] 44:{"id":"a6c691d0d859a180","slug":"learn-d3-introduction","title":"1.1_Learn D3: Introduction","thumbnail":"05bd2dd544a7f774d1de96c75a5e2f2f359cc26afce5cd51095054f27bc2c17b","access_level":"public","create_time":"$D2022-08-15T13:43:23.985Z","update_time":"$D2022-08-15T14:58:00.234Z","view_time":null,"first_public_time":"$D2022-08-15T13:43:34.199Z","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":"0fe483e8c08c0572","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":"starter_2024","bio":"","following":false},"version":1625,"publish_version":1625,"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":false,"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":"1.1_Learn D3: Introduction","cells":[{"id":0,"value":"# 1.1_Learn D3: Introduction\n\n这一系列的笔记本将指导您通过您的第一步 [D3.js](https://d3js.org).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1507,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"在我们出发之前，值得简短考虑: *为什么要去学习D3？为什么要在这里(Observable)学习？*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"首先 D3 很受欢迎 ([200M downloads](/@mbostock/npm-daily-downloads?name=d3) 和 [100K stars](https://github.com/d3/d3)), 因此，您是一个好的陪伴。有很多社区开发的资源，包括教程，视频，课程和书籍。D3团队已经发布了数百个自己的可 fork 的示例和教程，以提高您的学习和生产力。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"另一方面，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个 [地图 map projections](/@d3/world-map)!) 这种灵活性源于D3的低级方法，主要关注可组合原语，例如 [shapes](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12) and [scales](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f) 而不是可配置的图表。D3没有任何限制，因此可以利用现代浏览器支持的所有铃铛和口哨声。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"D3 以动画和交互而闻名如果你有几分钟时间，可以选择观看 [竞争柱状图 bar chart race](/@d3/bar-chart-race) or an [有点像磁盘可视化工具在扫描磁盘 animated treemap](/@d3/animated-treemap). 深入到 [分层柱状图 hierarchical bar chart](/@d3/hierarchical-bar-chart), [可折叠的树类似思维导图 collapsible tree](/@d3/collapsible-tree), or 可缩放的 [旭日图 sunburst](/@d3/zoomable-sunburst), [treemap](/@d3/zoomable-treemap), or [类似 cleanMyMac 的可视化磁盘空间，圆包圆 packed circles](/@d3/zoomable-circle-packing). Or brush a [可刷新的散点图 scatterplot matrix](/@d3/brushable-scatterplot-matrix) or 可缩放的[面积柱状图 area chart](/@d3/zoomable-area-chart).\n\n> 动画可以是叙述故事的有力工具，而互动则可以让读者积极的探索。当然，这种力量是有代价的。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"这种力量, 当然是有代价的. 有很多东西需要学习: D3 有30多个模块和上千个 methods! 而D3比明确打算用于探索性可视化的工具更加乏味，比如 [Observable Plot](/@observablehq/plot) and [Vega-Lite](https://vega.github.io/vega-lite/).\n\n> 但是我们有 `observable`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"Observable是学习D3的理想环境，因为它使用数据流(dataflow) [简化代码 simplifies code](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0), [像一个电子表格](/@observablehq/how-observable-runs). 编辑时，单元格自动运行以进行快速反馈。您以使用几乎没有代码添加互动或动画！我们将介绍Observable的 [怪癖和功能 quirks and features](/@observablehq/observables-not-javascript) as we go along.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"而Observable围绕着协作，帮助你从社区中学习并回馈社区。超越复制粘贴。\n\n任何 `notebook` 可以被 forked or [imported](/@observablehq/introduction-to-imports). Notebooks 可以 export `reusable components` 可复用组件, 例如 [color legend](/@d3/color-legend) or [scrubber](/@mbostock/scrubber). 你可以在[单元格上评论](/@observablehq/suggestions-and-comments), 建议 and [合并改变 merge changes](/@observablehq/fork-share-merge), or [寻求帮助](https://talk.observablehq.com/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"足够的序曲。让我们拉开帷幕，一睹D3的风采吧!\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"---\n\n## Table of Contents\n\n1. Introduction - you are here!\n1. [By Example](/@d3/learn-d3-by-example?collection=@d3/learn-d3) - finding, forking, importing examples（查找，fork，导入例子）\n1. [Data](/@d3/learn-d3-data?collection=@d3/learn-d3) - loading, parsing, transforming data(转换数据)\n1. [Scales](/@d3/learn-d3-scales?collection=@d3/learn-d3) - making the abstract visual（制作抽象视觉）\n1. [Shapes](/@d3/learn-d3-shapes?collection=@d3/learn-d3) - geometric primitives for visualization（可视化的几何原始图）\n1. [Animation](/@d3/learn-d3-animation?collection=@d3/learn-d3) - graphics that change over time(随时间变化的图形)\n1. [Joins](/@d3/learn-d3-joins?collection=@d3/learn-d3) - D3’s pattern for manipulating the DOM(D3 操作 Dom 的模式)\n1. [Interaction](/@d3/learn-d3-interaction?collection=@d3/learn-d3) - responding to user input(响应用户输入)\n1. [Further Topics](/@d3/learn-d3-further-topics?collection=@d3/learn-d3) - 接下来是进一步的 `主题`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"