25:["$","title",null,{"children":"Learn D3: Introduction | webgl | Observable"}] 49:T572,

[D3’s logo](/@d3/logo) is drawn with circles and perpendicular lines.

4a:[] 29:{"id":"fb6c509e5806a2f6","slug":null,"title":"Learn D3: Introduction","thumbnail":"05bd2dd544a7f774d1de96c75a5e2f2f359cc26afce5cd51095054f27bc2c17b","access_level":"public","create_time":"$D2023-03-18T08:33:11.508Z","update_time":"$D2023-03-18T08:33:11.508Z","view_time":null,"first_public_time":"$D2023-03-18T08:33:11.508Z","has_unpublished_edits":null,"fork":{"id":"5a4c8ad2dcf5d2e1","slug":"learn-d3","title":"Learn D3: Introduction","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"200d7ac410def1a7","login":"webgl","name":"webgl","avatar_url":"https://avatars-next.observableusercontent.com/d71cc41559fbfdbcac9845583356ef7dfe0534205234b0088ffd324f0b878023","tier":"starter_2024","bio":"","following":false},"version":1610,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e134ce8d8d6e6cb3","login":"webgl","name":"webgl","avatar_url":"https://avatars-next.observableusercontent.com/d71cc41559fbfdbcac9845583356ef7dfe0534205234b0088ffd324f0b878023","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e134ce8d8d6e6cb3","login":"webgl","name":"webgl","avatar_url":"https://avatars-next.observableusercontent.com/d71cc41559fbfdbcac9845583356ef7dfe0534205234b0088ffd324f0b878023","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: Introduction","cells":[{"id":0,"value":"# Learn D3: Introduction\n\nThis series of notebooks will guide you through your first steps with [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":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"Before we embark, it’s worth briefly considering: *Why bother learning D3? And why learn here in Observable?*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"For one, D3 is popular ([200M downloads](/@mbostock/npm-daily-downloads?name=d3) and [100K stars](https://github.com/d3/d3)), so you’re in good company. There are plenty of community-developed resources, including tutorials, videos, classes, and books. And the D3 team has published hundreds of its own forkable examples and tutorials to boost your learning and productivity.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"For another, D3 is flexible. D3’s superpower is that you can do whatever you want—creative freedom! The [D3 gallery](/@d3/gallery) is a veritable zoo of forms: [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), to name a few. (And nearly a hundred [map projections](/@d3/world-map)!) This flexibility stems from D3’s low-level approach, focusing on composable primitives such as [shapes](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12) and [scales](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f) rather than configurable charts. D3 imposes no constraints, so avail yourself of all bells and whistles supported by modern browsers.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"And D3 is renowned for animation and interaction. If you’ve got a few minutes, watch a [bar chart race](/@d3/bar-chart-race) or an [animated treemap](/@d3/animated-treemap). Dive into a [hierarchical bar chart](/@d3/hierarchical-bar-chart), [collapsible tree](/@d3/collapsible-tree), or zoomable [sunburst](/@d3/zoomable-sunburst), [treemap](/@d3/zoomable-treemap), or [packed circles](/@d3/zoomable-circle-packing). Or brush a [scatterplot matrix](/@d3/brushable-scatterplot-matrix) or zoom into an [area chart](/@d3/zoomable-area-chart). Animation can be a powerful device for storytelling, while interaction allows active readers to explore.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"This power, of course, comes at a cost. There’s much to learn: D3 has more than thirty modules and a thousand methods! And D3 can be more tedious than tools expressly intended for exploratory visualization, such as [Observable Plot](/@observablehq/plot) and [Vega-Lite](https://vega.github.io/vega-lite/).\n\nBut that’s where Observable comes in.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"Observable is the ideal environment for learning D3 because it [simplifies code](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0) with dataflow, [like a spreadsheet](/@observablehq/how-observable-runs). As you edit, cells run automatically for rapid feedback. You can add interaction or animation with almost no code! We’ll cover Observable’s [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":"And Observable revolves around collaboration, helping you learn from and give back to the community. Go beyond copy-and-paste. Any notebook can be forked or [imported](/@observablehq/introduction-to-imports). Notebooks can export reusable components, such as a [color legend](/@d3/color-legend) or [scrubber](/@mbostock/scrubber). You can [comment on cells](/@observablehq/suggestions-and-comments), suggest and [merge changes](/@observablehq/fork-share-merge), or [ask for help](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":"Enough overture. Let’s raise the curtain and get our first glimpse of 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\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\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) - where to go next","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null