30:T572,

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

31:[] 2e:{"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"},{"id":1507,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}