2c:null 2d:["$","title",null,{"children":"Learn D3: Introduction | D3 | Observable"}] 32:T572,

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

33:[] 30:{"id":"5a4c8ad2dcf5d2e1","slug":"learn-d3","title":"Learn D3: Introduction","thumbnail":"6782987c12640214fe1eedf5693751984e9dde1e277f7450436345a307d51067","access_level":"public","create_time":"$D2020-01-13T17:56:14.993Z","update_time":"$D2021-10-22T15:40:32.233Z","view_time":null,"first_public_time":"$D2020-03-24T15:07:50.670Z","has_unpublished_edits":null,"fork":false,"stars":755,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","bio":"Bring your data to life."},"version":1610,"publish_version":1610,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"bio":"Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"viewer"}],"comments":[{"id":"763738785e8ab61e","reply_to_id":null,"content":"kjdjfd","create_time":"$D2021-03-28T02:05:04.609Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"b6690ae341554512","login":"shellyang","name":"","avatar_url":"https://avatars-next.observableusercontent.com/25017fa498eee8d75a73622cea4ebfa7e9a8717b3152d6846bad392f27d70388","tier":null}},{"id":"d74e17d800aa3215","reply_to_id":"763738785e8ab61e","content":"This is sooo cool","create_time":"$D2022-04-01T05:43:59.381Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"47494fb075cf328e","login":"jlixerkun","name":"Jlixerkun Camargo","avatar_url":"https://avatars-next.observableusercontent.com/b9136ccb4b3fe1237ee908d7f0e528e80fe3cd2358d5e137989474afa37a3c5b","tier":null}},{"id":"64978619a87ac833","reply_to_id":null,"content":"To make infographics","create_time":"$D2022-11-02T05:35:38.536Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3075a0b1216e3522","login":"jaredscribe","name":"Jared Essig","avatar_url":"https://avatars-next.observableusercontent.com/6fb7101a9599412ed1f40a9044844907e9be10c65d474a9d9550485e50af9b28","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":405,"collection":{"id":"ed39dbb66d4de9d3","slug":"learn-d3","title":"Learn D3","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"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":"$32","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":"$W33","stdlib":"1"}} 31:"$30:body"