3e:null 3f:["$","title",null,{"children":"Learn D3: Shapes | Jordan Kanter | Observable"}] 45:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1692231965690.319,"size":48822}] 43:{"id":"eef71dbbd155e7c5","slug":null,"title":"Learn D3: Shapes","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-08-17T00:26:05.690Z","update_time":"$D2023-10-21T01:12:21.382Z","view_time":null,"first_public_time":"$D2023-08-17T00:26:05.690Z","has_unpublished_edits":null,"fork":{"id":"91bc0a496747a34d","slug":"learn-d3-shapes","title":"Learn D3: Shapes","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2ada5078780e6af5","login":"jordankanter","name":"Jordan Kanter","avatar_url":"https://avatars-next.observableusercontent.com/85a14bf092886e0a8ce520ca8b196adb4c018bf790a297ed39af574977267204","tier":"starter_2024","bio":"","following":false},"version":1095,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f010e68bc516b02b","login":"jordankanter","name":"Jordan Kanter","avatar_url":"https://avatars-next.observableusercontent.com/85a14bf092886e0a8ce520ca8b196adb4c018bf790a297ed39af574977267204","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"f010e68bc516b02b","login":"jordankanter","name":"Jordan Kanter","avatar_url":"https://avatars-next.observableusercontent.com/85a14bf092886e0a8ce520ca8b196adb4c018bf790a297ed39af574977267204","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: Shapes","cells":[{"id":0,"value":"# Learn D3: Shapes\n\nSVG and Canvas are intentionally generic; they allow for any type of graphic. D3 meanwhile is intended for visualization, and so provides a specialized vocabulary of *shapes* which are functions that generate path data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Paths can draw circles, rectangles, lines, squiggles, swoops, tigers [🐅](https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg), and anything else you can imagine. A path’s shape is specified in the [SVG path data language](https://www.w3.org/TR/SVG/paths.html#TheDProperty) (or equivalent [Canvas path methods](https://html.spec.whatwg.org/multipage/canvas.html#canvaspath)), which is akin to commands you’d give an old-fashioned [pen plotter](https://en.wikipedia.org/wiki/Plotter). Such as:\n\n* Mx,y - move to the specified point [*x*, *y*]\n* Lx,y - draw a line to the specified point [*x*, *y*]\n* hx - draw a horizontal line of length *x*\n* vy - draw a vertical line of length *y*\n* z - close the current subpath","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"Say we wanted to visualize several years of Apple stock price as a line chart. Here’s a dataset with *date* and *close* columns (with “close” referring to the price of the stock when the market closed), and the corresponding scales.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"data = FileAttachment(\"aapl-bollinger.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"To draw the line, we need path data that starts with Mx,y to move to the first point, followed repeatedly by Lx,y to draw a line to each subsequent point. We could do this by looping over the points to concatenate.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"{\n let path = `M${x(data[0].date)},${y(data[0].close)}`;\n for (let i = 1; i < data.length; ++i) {\n path += `L${x(data[i].date)},${y(data[i].close)}`;\n }\n return path;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"But [d3.line](/@d3/d3-line) is more convenient. Calling d3.line returns a default line generator, and by calling *line*.x and *line*.y we can configure the line with functions to return the *x*- and *y*-position for a given data point *d*. These functions retrieve the desired abstract value (*date* or *count*) and convert it to visual position (by applying a scale).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"line2 = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.upper))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"line3 = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.lower))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"// line4 = d3.line()\n// .x(d => x(d.date))\n// .y(d => y(d3.mean(y)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"Passing the line generator the data returns the corresponding SVG path data string which can be used to set a path element’s *d* attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"line(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"line2(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"(To avoid repetition, I defined reusable axes in the appendix below. Each axis is a function that takes a selection of G elements to populate.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"The path above is styled with a blue stroke and no fill. To avoid misleading spikes caused by miter joins between line segments, I set the [miter limit](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit) to 100% of (1×) the stroke width. I could have used round line joins and caps, alternatively.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"For an area chart, there’s similarly d3.area. An area’s shape is specified as two lines with shared *x*-values: *area*.y0 is the baseline and *area*.y1 is topline. For an area chart with a constant baseline along the chart’s bottom edge, we set *area*.y0 to *y*(0).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"area = d3.area()\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"If you want an area with a variable baseline—as in a [stacked area chart](/@d3/stacked-area-chart), a [streamgraph](/@d3/streamgraph), or the chart of [Bollinger bands](/@d3/bollinger-bands) below—pass *area*.y0 a function instead. As with *area*.x and *area*.y1, this function will be called for each data point to compute the corresponding *y*-value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"areaBand = d3.area()\n .x(d => x(d.date))\n .y0(d => y(d.lower))\n .y1(d => y(d.upper))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"To complete the display of Bollinger bands by showing the central moving average and the daily closing price, we can overlay lines on top. Since each path element can only have a single style, we use multiple paths for multiple colors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"lineMiddle = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.middle))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Lines and areas are designed to work together: you can derive the line corresponding to an area’s baseline or topline by calling *area*.lineY0 or *area*.lineY1, respectively. This is useful for decorating an area with a top or bottom stroke.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"Lines and areas have more features we won’t cover here, but to hint at a few: [radial lines and areas](/@d3/d3-lineradial) are useful for cyclical data, such as [seasonal temperatures](/@d3/radial-area-chart); [curves](https://github.com/d3/d3-shape/blob/master/README.md#curves) provide configurable interpolation methods, such as monotonicity-preserving splines; and you can [show gaps for missing data](/@d3/area-with-missing-data).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"Of course, visualization is not just bars, lines, and areas.\n\nAnother common shape is what D3 calls the *arc*, but what mathematicians would call an *annulus sector*. It features in [pie charts](/@d3/pie-chart), [donut charts](/@d3/donut-chart) and [sunbursts](/@d3/sunburst) (but not, confusingly, [arc diagrams](/@d3/arc-diagram)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"arc = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .startAngle(([startAngle, endAngle]) => startAngle)\n .endAngle(([startAngle, endAngle]) => endAngle)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"Similar to how lines and areas are configured by *x* and *y*, an arc is configured by *innerRadius*, *outerRadius*, *startAngle*, and *endAngle* (with angles in radians). The arc generator above is configured to accept an array [*startAngle*, *endAngle*].","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"arc([Math.PI / 2, Math.PI]) // from 90° to 180°","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"viewof n = Inputs.range([1, 50], {value: 12, step: 1, label: \"n\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"Computing arc angles as above can be tedious for a pie or donut chart, so D3 provides [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies) for convenience. Recall the tasty fruits dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"fruits = [\n {name: \"🍊\", count: 21, size: 1},\n {name: \"🍇\", count: 13, size: 0.3},\n {name: \"🍏\", count: 8, size: 1},\n {name: \"🍌\", count: 5, size: 1.4},\n {name: \"🍐\", count: 3, size: 1.1},\n {name: \"🍋\", count: 2, size: 1},\n {name: \"🍎\", count: 1, size: 1},\n {name: \"🍉\", count: 1, size: 3}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"By configuring a pie layout with a *value* accessor for the *count* property, we can compute the arc angles such that the angular span of each arc is proportional to its value, and together the arcs span contiguously from 0 to 2π.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"pieArcData = d3.pie()\n .value(d => d.count)\n (fruits)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"pieArcSizeData = d3.pie()\n .value(d => d.size)(fruits)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"These objects, one per datum, can be passed to an arc generator with fixed radii to produce a donut chart. (And because I can’t resist showing off a *little* bit, I’ll apply padding and a corner radius.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"arcPie = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .padRadius(300)\n .padAngle(2 / 300)\n .cornerRadius(8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"arcPieSize = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .padRadius(300)\n .padAngle(2 / 300)\n .cornerRadius()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"Now that we’ve covered a handful of common data graphics, let’s see how to make them come alive!\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"