30:[{"id":"eba089a20421e9dc7f9b8b4482fbfc4ae7084f85001f113a0060e1b6b576102cdc50b07e854f1c82f4142ff6bf87d132d420abe13fefab1a71bcbedbc4701875","href":"https://static.observableusercontent.com/files/eba089a20421e9dc7f9b8b4482fbfc4ae7084f85001f113a0060e1b6b576102cdc50b07e854f1c82f4142ff6bf87d132d420abe13fefab1a71bcbedbc4701875","name":"ice-sheets.csv","type":"application/octet-stream","lastModified":1572463177803.243,"size":27618}] 2e:{"title":"d3.lineRadial","cells":[{"id":0,"value":"# d3.lineRadial\n\n[d3.lineRadial](https://d3js.org/d3-shape/radial-line#lineRadial) is similar to [d3.line](https://observablehq.com/@d3/d3-line) but, instead of cartesian coordinates (*x* and *y*), it works with radial coordinates (*angle* and *radius*).","pinned":false,"hidden":false,"mode":"md"},{"id":161,"value":"The default accessors are d[0] for *angle*, and d[1] for *radius*, so we can define spiraling points like this:","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"spiral = Array.from({ length: 76 }, (_, i) => [\n (Math.PI / 3) * i, // angle (in radians)\n 2 * i // radius\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"And create the spiral path like so:","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"d3.lineRadial()(spiral)","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"Radial lines are always positioned relative to ⟨0,0⟩; we use a transform to position their origin. In SVG:","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"Similarly, in canvas we would use context.translate:","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"{\n const width = 300,\n context = DOM.context2d(width, width);\n\n const step = (Math.PI * (-10 + ((now / 2000) % 20))) / 20;\n\n const spiral = Array.from({ length: 76 }, (_, i) => [step * i, 2 * i]);\n\n context.save();\n context.translate(width / 2, width / 2);\n\n context.beginPath();\n d3.lineRadial().context(context)(spiral);\n context.stroke();\n\n context.restore(); // undo translate\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"Define the accessors for *angle* and *radius* with the corresponding methods [*radial*.angle](https://d3js.org/d3-shape/radial-line#lineRadial_angle) and [*radial*.radius](https://d3js.org/d3-shape/radial-line#lineRadial_radius).\n\nAs usual, these functions receive the value and the index as arguments (d,i). As d3.lineRadial accepts iterators and Array-like objects, we can rewrite our spiral in this concise manner:","pinned":false,"hidden":false,"mode":"md"},{"id":225,"value":"spiral2 = {\n const length = 76,\n spiral = d3\n .lineRadial()\n .angle((d, i) => (Math.PI / 4) * i) // d is empty (and ignored), i is the index\n .radius((d, i) => (length - i) * 2);\n\n return spiral({ length });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"*radial*.radius should return a CSS length, which most of the time will be considered to be pixels — or relative to the scale or viewBox of the SVG or canvas.","pinned":false,"hidden":false,"mode":"md"},{"id":262,"value":"*radial*.angle must return a value in radians. Angle 0 (and any multiple of 2π = 360°) is defined as pointing top. π/2 (or 90°) points to the right. In other words, lineRadial rotate in clockwise order. (This, of course, barring any rotation or other transform that could be applied to the path).","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"{\n const e = svg``;\n\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"When applying d3.lineRadial to real data (instead of geometric functions), the important question to ask is if our data is cyclical. [Everything is seasonal](https://www.youtube.com/watch?v=IiF4-g001EQ), as Zan Armstrong argues, and many cycles in nature can be represented by [radial charts](https://blogs.scientificamerican.com/sa-visual/why-are-so-many-babies-born-around-8-00-a-m/).\n\nThe cycle’s length (be it a day, a year, a hundred dollars spent…) defines the angle function’s period, and must be mapped to a cyclical interval such as [0, 2π] (or, more generally [φ, φ + 2π] with an arbitrary phase φ). We can use a scale to define that correspondance — for instance, if our data happens to be indexed by month from 1 (January) to 12 (December), and we want to show a yearly cycle, we could introduce:","pinned":false,"hidden":false,"mode":"md"},{"id":335,"value":"yearly = d3\n .scaleLinear()\n .domain([1, 12 + 1]) // 🌶 we add 1, otherwise December is superposed with January\n .range([0, 2 * Math.PI])","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"For instance, we’ll load this dataset of the monthly sea ice extent, both in the Arctic (N) and in the Antarctic (S) regions.","pinned":false,"hidden":false,"mode":"md"},{"id":507,"value":"data = FileAttachment(\"ice-sheets.csv\").csv({typed: true})\n .then(data =>\n data.sort(\n (a, b) => d3.ascending(+a.year, +b.year) || d3.ascending(+a.mo, +b.mo)\n )\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"And define a scale for the radius, based on the maximum extent:","pinned":false,"hidden":false,"mode":"md"},{"id":519,"value":"scaleRadius = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.extent)])\n .range([0, 270])","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"radial = d3.lineRadial()\n .angle(d => yearly(d.mo))\n .radius(d => scaleRadius(d.extent))\n .curve(d3.curveCatmullRomOpen)\n .defined(d => d.extent > 0) // two months have no data, represented by extent=-9999","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"With these definitions, we can now apply our radial line generator to the sea ice extent data for each pole:","pinned":false,"hidden":false,"mode":"md"},{"id":539,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 700, 500])\n .style(\"max-width\", \"700px\"),\n g = svg.append(\"g\").attr(\"transform\", \"translate(400,250)\");\n\n g.selectAll(\"path\")\n .data([\"S\", \"N\"])\n .join(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \"0.2\")\n .attr(\"d\", region => radial(data.filter(d => d.region === region)));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"(Of course, this is only a promise of a chart — far from being complete; it would need a legend, a scale, etc. to be fully understandable.)","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"[*radial*.defined](https://d3js.org/d3-shape/radial-line#lineRadial_defined) is equivalent to *line*.defined: it sets a function that must return false for data points that are not defined and need to be skipped.","pinned":false,"hidden":false,"mode":"md"},{"id":437,"value":"[*radial*.curve](https://d3js.org/d3-shape/radial-line#lineRadial_curve) is equivalent to line.curve. It sets the curve factory that will be used to draw the actual path.\n\nNote that curveMonotoneX or curveMonotoneY are not recommended for radial lines because they assume that the data is monotonic in x or y, which is typically untrue of radial lines.\n\nIf the radial line is looping back to its starting point, as in the examples below, use the _closed_ variants of the curve factory. The example below uses d3.curveLinearClosed to create a neat closed polyline (*i.e.* a polygon!).","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"{\n const length = (3 + ((now / 1500) % 8)) | 0;\n const polygon = d3\n .radialLine()\n .angle((_, i) => (i / length) * 2 * Math.PI)\n .curve(d3.curveLinearClosed)\n .radius(() => 150),\n path = polygon({ length });\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"## Regular polygons?\n\nThis works well, so let’s save it as a function:","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"function polygon(sides) {\n var length = sides,\n s = 1,\n phase = 0;\n const radial = d3\n .lineRadial()\n .curve(d3.curveLinearClosed)\n .angle((_, i) => (i / length) * 2 * Math.PI + phase)\n .radius(() => s);\n const poly = function() {\n return radial(Array.from({ length }));\n };\n poly.context = function(_) {\n return arguments.length ? (radial.context(_), poly) : radial.context();\n };\n poly.n = function(_) {\n return arguments.length ? ((length = +_), poly) : length;\n };\n poly.rotate = function(_) {\n return arguments.length ? ((phase = +_), poly) : phase;\n };\n poly.scale = function(_) {\n return arguments.length ? ((s = +_), poly) : s;\n };\n poly.curve = function(_) {\n return arguments.length ? (radial.curve(_), poly) : radial.curve();\n };\n poly.radius = radial.radius;\n poly.angle = radial.angle;\n return poly;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"Here’s how we would use it:","pinned":false,"hidden":false,"mode":"md"},{"id":533,"value":"polygon(6).scale(10)()","pinned":true,"hidden":false,"mode":"ojs"},{"id":441,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"{\n const width = 300,\n context = DOM.context2d(width, width),\n p = polygon()\n .context(context)\n .scale(width / 2 - 2);\n context.translate(width / 2, width / 2);\n\n do {\n context.beginPath();\n p.n(3 + ((Date.now() / 1500) % 4 | 0))();\n context.stroke();\n yield context.canvas;\n context.fillStyle = \"rgba(255,255,255,0.1)\";\n context.fillRect(-width / 2, -width / 2, width, width);\n context.rotate(0.01);\n } while (true);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"Playing with curves can be fun too, making smooth polygons:","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}