2e:null 2f:["$","title",null,{"children":"Learn D3: Shapes | D3 | Observable"}] 34:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1581614228965.438,"size":48822}] 32:{"id":"91bc0a496747a34d","slug":"learn-d3-shapes","title":"Learn D3: Shapes","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-02-07T19:25:12.214Z","update_time":"$D2023-10-26T10:40:25.486Z","view_time":null,"first_public_time":"$D2020-03-24T16:50:39.268Z","fork":false,"stars":48,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":1055,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"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":"cc71efefe619e9d4","reply_to_id":null,"content":"Please show off as much as you want. This is amazing.","create_time":"$D2021-05-22T14:29:46.356Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3d0e223489ae27bc","login":"sophiexsun","name":"Sophie Sun","avatar_url":"https://avatars-next.observableusercontent.com/0af50d87c1ee74ff47e10716b1bd6ae654c3b6a0a4e5743c37bb9a1977949431","tier":null}},{"id":"4cbe341ff8b4557e","reply_to_id":null,"content":"Thank you so much for this example.","create_time":"$D2023-01-30T12:27:23.823Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71794af59607c444","login":"g-gundam","name":"G Gundam","avatar_url":"https://avatars.githubusercontent.com/u/9591914?v=4","tier":null}},{"id":"f6687646eecdb4c7","reply_to_id":null,"content":"Typo: \"concatentate\", should be \"concatenate\". :)","create_time":"$D2023-05-03T09:05:26.638Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5beba55294186256","login":"johnfisherman","name":"Fred Rocha","avatar_url":"https://avatars-next.observableusercontent.com/304b33edcaeace2c23ed552a2e9f4a9e1f12181a4f4cf489ec1b119be69362bc","tier":null}},{"id":"f3b5093a38e5aae5","reply_to_id":"f6687646eecdb4c7","content":"👍 thanks!","create_time":"$D2023-05-03T17:12:37.447Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"4dda2aa8e94e65d1","reply_to_id":null,"content":"Is `d.upper` used intentionally here, instead of `d.close`?","create_time":"$D2023-06-03T20:31:11.923Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"fb992b1245294e4c","login":"behrangsa","name":"Behrang Saeedzadeh","avatar_url":"https://avatars-next.observableusercontent.com/11e984621cf2cc56b7cf1e0ecd35d3dbed2a90be995db1e9fad8c9e56941cdbc","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":118,"collection":{"id":"ed39dbb66d4de9d3","slug":"learn-d3","title":"Learn D3","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"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","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","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","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","output":"$undefined","database":"$undefined"},{"id":91,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":586,"value":"line(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","output":"$undefined","database":"$undefined"},{"id":140,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":645,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":106,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":286,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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://d3js.org/d3-shape/curve) 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","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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":820,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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://d3js.org/d3-shape/pie) for convenience. Recall the tasty fruits dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"fruits = [\n {name: \"🍊\", count: 21},\n {name: \"🍇\", count: 13},\n {name: \"🍏\", count: 8},\n {name: \"🍌\", count: 5},\n {name: \"🍐\", count: 3},\n {name: \"🍋\", count: 2},\n {name: \"🍎\", count: 1},\n {name: \"🍉\", count: 1}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","output":"$undefined","database":"$undefined"},{"id":77,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":26,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":98,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"