2b:null 2c:["$","title",null,{"children":"Polar plot | Migsar | Observable"}] 31:T5b2,content = { const description = md` # A quick word on HTML and CSS. Initially it was not part of this article but I think it is worth noting that styles for the SVG can be included in a \`

${chart}

${description}

`; return doc; }32:[] 2f:{"id":"03ded7ce0967e4ff","slug":"polar-plot","title":"Polar plot","thumbnail":"3d94c8e8e3e2d79a2b05221e259d2270db62e01b9787a34113b2a4e75c09b4b2","access_level":"public","create_time":"$D2020-05-13T03:41:38.767Z","update_time":"$D2020-05-15T03:36:27.949Z","view_time":null,"first_public_time":"$D2020-05-15T03:36:53.049Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"ef88ece0a19cca44","login":"migh","name":"Migsar","avatar_url":"https://avatars-next.observableusercontent.com/c4ba18e5e557a6c9b89a2b7ffd100ee248ebf7463ff536828f5df98cef933eee","tier":"starter_2024"},"version":147,"publish_version":147,"role":null,"authored":false,"authors":[{"type":"individual","id":"508f06952ba5712c","login":"migh","name":"Migsar","avatar_url":"https://avatars-next.observableusercontent.com/c4ba18e5e557a6c9b89a2b7ffd100ee248ebf7463ff536828f5df98cef933eee","tier":null}],"members":[{"type":"individual","id":"508f06952ba5712c","login":"migh","name":"Migsar","avatar_url":"https://avatars-next.observableusercontent.com/c4ba18e5e557a6c9b89a2b7ffd100ee248ebf7463ff536828f5df98cef933eee","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Polar plot","cells":[{"id":0,"value":"md`# Polar plot\n\nCopy of Mike Bostock's Block [Polar Plot](https://bl.ocks.org/mbostock/4583749) for learning and adapting it to Observable.\n\n## Original description\n\n> This example demonstrates the construction of a polar plot of a parametric function, sin(2t)cos(2t). A d3.svg.line.radial is used to draw the red line. Note the definition of the line’s angle: D3’s radial lines and areas proceed clockwise starting at 12 o’clock, while this plot proceeds counterclockwise starting at 3 o’clock!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"chart = {\n const { WIDTH: width, HEIGHT: height } = OPTIONS;\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n const content = svg.append(\"g\")\n .attr(\"transform\", \"translate(\" + width / 2 + \",\" + height / 2 + \")\");\n \n content.append(\"g\").call(grid);\n content.append(\"g\").call(axis);\n content.append(\"g\").call(curve);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"grid = g => {\n const gr = g\n .attr(\"class\", \"r axis\")\n .selectAll(\"g\")\n .data(scale.ticks(5).slice(1))\n .enter().append(\"g\");\n \n gr.append(\"circle\")\n .attr(\"r\", scale);\n \n gr.append(\"text\")\n .attr(\"y\", function(d) { return -scale(d) - 4; })\n .attr(\"transform\", \"rotate(15)\")\n .style(\"text-anchor\", \"middle\")\n .text(function(d) { return d; });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"axis = g => {\n const ga = g\n .attr(\"class\", \"a axis\")\n .selectAll(\"g\")\n .data(d3.range(0, 360, 30))\n .enter().append(\"g\")\n .attr(\"transform\", function(d) { return \"rotate(\" + -d + \")\"; });\n \n ga.append(\"line\")\n .attr(\"x2\", OPTIONS.RADIUS);\n \n ga.append(\"text\")\n .attr(\"x\", OPTIONS.RADIUS + 6)\n .attr(\"dy\", \".35em\")\n .style(\"text-anchor\", function(d) { return d < 270 && d > 90 ? \"end\" : null; })\n .attr(\"transform\", function(d) { return d < 270 && d > 90 ? \"rotate(180 \" + (OPTIONS.RADIUS + 6) + \",0)\" : null; })\n .text(function(d) { return d + \"°\"; });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"curve = g => {\n g.append(\"path\")\n .datum(signal)\n .attr(\"class\", \"line\")\n .attr(\"d\", line);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"line = d3.lineRadial()\n .radius(d => scale(d[1]))\n .angle(d => (-d[0] + Math.PI / 2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"signal = d3.range(0, 2 * Math.PI, .01)\n .map(t => [t, Math.sin(2 * t) * Math.cos(2 * t)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"scale = d3.scaleLinear()\n .domain([0, .5])\n .range([0, OPTIONS.RADIUS]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"OPTIONS = {\n const OPTIONS = {\n HEIGHT: 500,\n WIDTH: 500,\n };\n \n return {\n ...OPTIONS,\n RADIUS: Math.min(OPTIONS.WIDTH, OPTIONS.HEIGHT) / 2 - 30,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"