28:null 29:["$","title",null,{"children":"Plot for D3 Users | Observable | Observable"}] 2e:T65f,md`# Plot for D3 Users D3 is how I learned JavaScript, and it’s the only chart library I know well. I’m familiar with the idea of things like Vega-Lite, ggplot, and matplotlib, but I’ve never really used them; I’m a monoglot. But D3 can be hard to learn, and a slow way to make a quick chart. I like to paraphrase Amanda Cox saying, “You should use D3 if you think it’s perfectly normal to have to write a hundred lines of code to get a bar chart.” Over the last ten years there have been many attempts to address this by building libraries on top of D3, but I’ve never gotten into any of them. Plot, [announced today](https://observablehq.com/@observablehq/introducing-observable-plot), is the first thing that’s gotten through to me. Granted, if you wanna get all conspiratorial, I suppose they’re paying me to use it for work — but over the last couple months, when I start a personal project and want a chart, I’ve started reaching first for Plot. Although it’s built on D3, you don’t write D3 to use it, and it’s naturally good at some very different things. It’s not “D3, but more so.” But for many people, it may be more in line with what they wanted from D3 in the first place. It gets a bar chart down to one line. This is not a complete introduction; [that’s here](https://observablehq.com/@observablehq/plot), with lots of examples. This notebook focuses on aspects that’ll be different for someone used to D3. It comes from our months of internal testing, with great help from Ian Johnson, Kerry Rodden, Mike Freeman, Philippe Rivière, Shan Carter, and Mike Bostock. --- `2f:T86f,md`Here, the ${code("x", "channel")}, ${code("x1", "channel")} and ${code("x2", "channel")} channels all share the ${code("x", "scale")} scale; they determine its domain, and will then be rendered using it. This approach is more focused on decisions about the data than about its presentation: - In D3, you might write \`.attr("fill", d => d.active ? "steelblue" : "gray")\` to fill active items with steelblue. In Plot, \`{fill: d => d.active ? "steelblue" : "gray"}\` will interpret steelblue and gray as _categories in the data_ and map them to different colors according to Plot’s default categorical color scheme. Instead, you can write \`{fill: "active"}\` and then, in Plot options, \`{color: {domain: [true, false], range: ["steelblue", "gray"]}}\`. - You can’t assume that anything you can specify as a constant can also be specified as an accessor function. There are only so many scales (including x, y, color, and radius), and they’re assigned to specific channels. Both fill and stroke share the same color scale. Not every property of an SVG element can be made data-driven; you’re funneled into specific ways of representing your data. In return, a lot of typical boilerplate is done for you. - Different marks imply different scales. Plot.barY, Plot.barX, Plot.cell, and Plot.rect will all draw an SVG \`\` — in different ways:

	ordinal _x_	quantitative _x_
ordinal _y_	Plot.cell	Plot.barX
quantitative _y_	Plot.barY	Plot.rect

- Positional scales (x and y) get axes automatically. You set scale and axis options in the same place in the options object. - You don’t have to think about D3’s [margin conventions](https://observablehq.com/@d3/margin-convention). It just fits the dimensions you give it. Automating the scales means that when you want to change the structure of a graphic, you have to change code in fewer places.`30:T5fd,md`### 3. You can take it apart or mash pieces together. Most of our examples make a whole Plot in one expression, which can make it look like an imposing and indivisible block of code. But it’s just a plain JavaScript object with a plain JavaScript array for the marks. That means you can rearrange it more freely, without breakage, than a tangled thicket of D3. If you try to combine two D3 graphics, you’ll often find they conflict, or depend on different assumptions. But the configuration of Plot is carefully specified, and its pieces are highly self-contained. Data is not inherited. There’s no data attached to the overall plot; each mark gets its own, so you may have to pass the same data several times. Call it GARY: Go Ahead & Repeat Yourself. So if a mark is copy-pasted from one plot to another, it should behave largely the same way (except insofar as other marks are affecting the scales). Though we typically show just a simple array of marks, Plot internally calls \`marks.flat(Infinity)\` to flatten nested arrays. That means you can write helper functions that return arrays of marks, and use those functions like marks. For instance, you could have a box plot function that returns an array of rule, bar, tick, and dot marks. Similarly, you can write functions that take an options object and return an options object. Plot [comes with various transforms](https://observablehq.com/@observablehq/plot-transforms) that do that and serve to bin, group, smooth, or highlight certain points of your data. `31:T4dc,md`### 4. Plot breaks less and shows more when it does. While making a chart in D3, it’s common to get stuck with a bunch of code and nothing showing up at all. In Plot, so long as you don’t have a syntax error, you’re much more likely to see _something_. You can kinda just mash together marks and options in Plot and get a “valid” chart — if not necessarily a good, correct, or meaningful one. But that partial broken chart can often help visualize what you’re doing wrong. That’s possible because Plot handles the chart skeleton, and because Plot is full of defaults. Default margins, default axes, default scales, default stroke and fill, default color scheme, default width and height. If you pass numbers to the x channel, it’ll default to a d3.scaleLinear; if you pass dates, it’ll default to a d3.scaleUtc. Even if you want to change the defaults right away, at least it gets something on the screen, so you spend less time in a broken state and more time looking at things. That means the type of your data matters a lot! If you’re trying to reproduce an example with your own data, and it doesn’t look right, check the types in your data. A number or date stored as a string will be rendered like a string.`32:T534,md`### 5. You update a Plot by re-rendering the whole thing. D3 involves managing a lot of state, like “this selection needs to update this when that changes”. But Plot declares the representation of a chart all at once, without an update pattern, which means the natural thing to do on Observable is to just use reactivity to throw it all away and re-render the whole thing whenever something it depends on changes. Yes, it’s inefficient; no, it doesn’t smoothly transition. With ten thousand points in a scatterplot, rendering gets noticeably laggy; with a hundred thousand, it gets really annoying. There are cases where that is prohibitive, and in those cases there may be a better tool for the job. But in my experience it has not been an issue, and it is possible to extend Plot to be more conscientious of this. Overall, it has been liberating. I think the computer’s rendering is not typically the bottleneck in exploratory visualization; the computer can render charts faster than I can think of them. So maybe the way we think about end-to-end rendering time ought to include the time it takes to write the code, which typically overwhelms the split-second it takes to draw what you’ve coded. So an API for exploratory charts should first and foremost be fast to write, and only incidentally fast to render.`33:T818,md`### 7. We’re working on interactivity. Plot uses Observable’s reactivity for interactivity; it does not have a separate internal interaction system. Marks do not have built-in \`.on("click")\` methods for adding event handlers like D3 selections. But you could add a slider Input in one cell representing altitude, and have a Plot in another cell showing a 2D heatmap of air temperatures at a given altitude. You’d reference the slider in your Plot, and reactivity would tie them together such that dragging the slider transitions through cross-sections of the atmosphere. Plot doesn’t re-implement reactivity internally because it grew up in a context in which reactivity is in the air all around. However, we do plan to add brush and point interactions to Plot soon, so that charts can expose selections to the rest of the notebook. When you see an outlier among a thousand points, it should not be a dataflow dead-end; not just a display, but an interface. This is a rich area of active research; [B2: Bridging Code and Interactive Visualization in Computational Notebooks](http://vis.csail.mit.edu/pubs/b2.pdf) by Yifan Wu et al. (2020) examines some responses to the issue that “[c]ode cells cannot access the results of interactive operations performed on visualizations.” Years ago, Saltzer et al. wrote “Choosing the proper boundaries between functions is perhaps the primary activity of the computer system designer” in [End-To-End Arguments in System Design](https://web.mit.edu/Saltzer/www/publications/endtoend/endtoend.pdf) (1984), and, although I don’t think I yet grasp the full significance, Plot locates more of its dynamism on the notebook layer. Another way to think about this is that when I, personally, am both the writer and the #1 reader, the main way I interact with a Plot during exploratory visualization is to look at it and write some more code. That is, the interaction is not captured by pointer events, but rather does a round-trip through some insight in my head before being translated back into symbolic language.`34:T6fd,md`### 10. Try making a chart a minute. I don’t mean that it should only take a minute when you’re first learning; this isn’t about feeling bad if you spend a lot longer than that! I sure do. But I have a particular memory in mind here. In high school I once spent a whole independent study in shop class making one little precise wood sculpture. I’d measured twice, cut once, and it just wasn’t very good. At the end of the semester, my teacher Marty told me that he wished he’d pledged at the outset to burn whatever I made. He was desperate to teach me to fling wood around like it’s not something precious. Not because wood can’t be a precious thing, but because I couldn’t get there by treating every step that way. So this is about a mindset that doesn’t treat each chart as so precious. With D3 I routinely spend a week on a single graphic; Plot encourages me to fling them around. If you, like me, are prone to spend unlimited time making something look good, try instead setting a time limit and branching off in a different direction with a new chart each time, based on what you saw in the last one. The chart should not be *cool*; what’s cool is what you learn from it. Imagine more vernacular charts — the sort you might get from Excel, but with the expressiveness of code. The plain and ordinary over the heroic and monumental, to paraphrase the architectural writers [Robert Venturi and Denise Scott Brown](https://en.wikipedia.org/wiki/Learning_from_Las_Vegas). The sort you shouldn’t have to describe yourself as a data visualization engineer to make. Have you heard the saying about how the sage points at the moon, and the fool looks at the finger? Plot aims for the sort of chart that can point at the moon such that you look at the moon. `35:[] 2c:{"id":"dc85edb9bde2f18d","slug":"plot-for-d3-users","title":"Plot for D3 Users","thumbnail":"d962a2d2d9b272147a9da331f005b814fcd01114490edfe87aa2b3b153ab6b5e","access_level":"public","create_time":"$D2021-04-30T01:24:10.111Z","update_time":"$D2021-08-25T20:09:36.552Z","view_time":null,"first_public_time":"$D2021-05-04T15:30:12.849Z","has_unpublished_edits":null,"fork":false,"stars":80,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":808,"publish_version":808,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":null,"type":"notebook","body":{"title":"Plot for D3 Users","cells":[{"id":0,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`### 1. Plot represents a chart in its own terms.\nD3 transforms the native DOM; it describes incremental changes to standard HTML or SVG elements and their attributes. It has no notion of a “bar”, let alone a bar chart, but you can use it to append and transform an SVG \\`\\`, which serves the role of a bar.\n\nIn contrast, Plot has its own vocabulary of building blocks on top of the DOM, like Plot.barY and Plot.barX for bar charts, which draw the \\`\\` for you. You use them to describe what the visualization should look like, not how to build it. Plot just takes one options object, with an array of marks, and returns a whole SVG.\n\nThe following D3 example selects the first existing SVG on the page, creates a circle for every row of the data, and sets its cx attribute to the scaled value of the date.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"code(htl.html`d3.select(\"svg\").selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.date));`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`In Plot, it’d be more like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"code(htl.html`Plot.plot({marks: [\n Plot.dot(data, { x: d => d.date })\n]});`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`Or, with shorthands:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"code(htl.html`Plot.dot(data, { x: \"date\" }).plot();`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`The color-coded pieces are imperfectly analogous. Both take an array of objects, ${code(\"data\", \"data\")}. But ${code(\"circle\", \"element\")} is an SVG element, whereas ${code(\"dot\", \"element\")} is a [mark](https://observablehq.com/@observablehq/plot-marks), which is like a shape with rules for how to draw it. And ${code(\"cx\", \"channel\")} is a native attribute, whereas ${code(\"x\", \"channel\")} is a [channel](https://observablehq.com/@observablehq/plot-scales), which is like an attribute that gets drawn with an automatic scale.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`### 2. The scales are inferred.\nIn both D3 and Plot there’s a prominent \\`function(d)\\` that takes some data and returns… something. But they return different things:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"htl.html`\n \n \n \n \n \n \n \n \n \n \n \n \n

D3	${code(htl.html`d => x(d.date) // returns a pixel value`)}
Plot	${code(htl.html`d => d.date // returns a date`)}
Plot shorthand	${code(htl.html`\"date\"`)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`The typical D3 pattern is to get the part of the data you want (here the date), and then pass it to a scale (here ${code(\"x\", \"scale\")}) that turns it into an attribute value (here pixels). But in Plot, you just do the first part: specify how to get the data. [The scales are inferred!](https://observablehq.com/@observablehq/plot-scales) Since that simplifies the function, you can also just write a string for the property of the data you want.\n\nIn this Plot example, the default domain is the extent of all the dates, and the default range is \\`[marginLeft, width - marginRight]\\`. The domain expands to encompass all marks that use the scale. For example, in the example below, ${code(\"x\", \"scale\")}’s domain would be the extent of all the \\`date\\`s in \\`data\\`, \\`startDate\\`s in \\`data2\\`, and \\`endDate\\`s in \\`data2\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"code(htl.html`Plot.plot({marks: [\n Plot.dot(data, { x: \"date\" }),\n Plot.barX(data2, { x1: \"startDate\", x2: \"endDate\" })\n]})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`### 6. Faceting is now so easy as to be worth doing.\nWhat a library makes easy shapes a generation of graphics. D3 made transitions comparatively easy, so D3 charts have a lot of transitions. But it never made faceting easy. In fact, habitual D3 users may not even realize that there are possible worlds in which faceting *is* easy — whereas ggplot and Seaborn users may not be able to imagine life without it. Faceting is a way to repeat the same chart several times for different parts of the data, like small multiples; Plot lets you facet in both x and y. Why haven’t I made more faceted graphics in my life? It’s not because they aren’t valuable. They just haven’t been easy in D3. In Plot, [they are](https://observablehq.com/@observablehq/plot-facets).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`### 8. We’re working on plugins.\nA mark has an \\`initialize\\` method and a \\`render\\` method, which you can implement to write your own. Whenever I say Plot can’t do something, someone who knows better says it can with a plugin! For example, Philippe is working on an interactive tooltip, which you can add like any other mark to get information when you hover close to a point; he’s also tried brushes and maps. We are very excited about community extensibility, but we’re not quite ready with the docs and examples to show how that works.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`### 9. This doesn’t replace D3 for the stuff where D3 shines.\nPlot exercises exploratory muscles that, in my experience, had atrophied when the only paradigm I used was D3. Plot mostly doesn’t replace how I use D3; it makes it worthwhile to make charts where I otherwise might not have bothered at all. So I wouldn’t start learning Plot by trying to recreate some sophisticated D3 thing. Someone at the recent Figma Config quoted Nikolas Klein saying, “The goal of a design tool is to find the 900 wrong ideas faster.” Analogously, one might say Plot doesn’t make better D3 charts; it lets you find which D3 chart you should be making, by making 900 wrong charts first.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"md`_See also the [introduction to Plot](https://observablehq.com/@observablehq/plot), [comparison to Vega-Lite](https://observablehq.com/@data-workflows/plot-vega-lite), and [worksheet of exercises](https://observablehq.com/@observablehq/plot-exploration-penguins)._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"code = (content, color = false) => htl.html`${color ? htl.html`${content}` : content}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"color = d3\n .scaleOrdinal()\n .domain([\"accessor\", \"element\", \"data\", \"scale\", \"channel\"])\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"c = str => ({color: color(str)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2d:"$2c:body"