29:null 2a:["$","title",null,{"children":"Plot: Radar chart | Thomas Swartout's Workspace | Observable"}] 2f:Td6e,// Load necessary libraries d3 = require("d3@5"); d3.geoProjection = require("d3-geo-projection@2"); d3.fisheye = require("d3-fisheye@2"); // Define the fisheye function const fisheye = d3.fisheye().radius(200).distortion(5); // Define your data const metros = FileAttachment("FinalDataTrim4@1.csv").csv({typed: true}); // Extract points data const points = metros.flatMap(({ name, year, ...values }) => Object.entries(values).map(([key, value]) => ({ name, year, key, value })) ); // Create a container for the plot const container = html`

`; // Add background rectangle to capture zoom events const backgroundRect = Plot.rect([-180, 90], [180, -90], { pointerEvents: "all", fill: "transparent", events: { // Handle zoom events zoom: (event, plot) => { const { x, y, k } = event.transform; const inverted = d3.geoProjection(fisheye.invert([x, y])); // Update the projection with the zoom transform plot.projection.rotate([inverted[0], -inverted[1]]); plot.projection.scale(k * 200); // Redraw the plot with the updated projection plot.redraw(); } } }); // Render the plot inside the container container.appendChild( Plot.plot({ width: 600, projection: { type: "azimuthal-equidistant", rotate: [0, -90], domain: d3.geoCircle().center([0, 90]).radius(0.625)() }, color: { legend: true }, marks: [ // grey discs Plot.geo([0.5, 0.4, 0.3, 0.2, 0.1], { geometry: (r) => d3.geoCircle().center([0, 90]).radius(r)(), stroke: "black", fill: "black", strokeOpacity: 0.3, fillOpacity: 0.03, strokeWidth: 0.5 }), // white axes Plot.link(d3.range(-180, 181, 10), { x1: (d) => d, y1: 90 - 0.57, x2: 0, y2: 90, stroke: "white", strokeOpacity: 0.5, strokeWidth: 2.5 }), // tick labels Plot.text([0.3, 0.4, 0.5], { x: 180, y: (d) => 90 - d, dx: 2, textAnchor: "start", text: (d) => `${(100 * d).toFixed(0)}%`, fill: "currentColor", stroke: "white", fontSize: 8 }), // axes labels Plot.text(d3.range(-180, 181, 90), { x: (d) => d, y: 90 - 0.57, text: Plot.identity, lineWidth: 5 }), // areas Plot.area(points, { x1: ({ key }) => longitude(key), y1: ({ value }) => 90 - value, x2: 0, y2: 90, fill: "name", stroke: "name", curve: "cardinal-closed" }), // points Plot.dot(points, { x: ({ key }) => longitude(key), y: ({ value }) => 90 - value, fill: "name", stroke: "white", // Display different data on hover title: (d) => `${d.name}, ${d.year}: ${d.value}` }), // interactive labels Plot.text( points, Plot.pointer({ x: ({ key }) => longitude(key), y: ({ value }) => 90 - value, text: (d) => `${(100 * d.value).toFixed(0)}%`, textAnchor: "start", dx: 4, fill: "currentColor", stroke: "white", maxRadius: 10 }) ), ] }) ); // Attach background rectangle to the container container.appendChild(backgroundRect); // Attach the container to the notebook container; 30:[{"id":"0567119d6e0feac1e4bf517ccee6e65210ecb3fade2d592c68a5386a09c490b7e2da96c160225867d3c66a0f45e802cc4b52f231e1e2dd9536c29445ebe507a4","href":"https://static.observableusercontent.com/files/0567119d6e0feac1e4bf517ccee6e65210ecb3fade2d592c68a5386a09c490b7e2da96c160225867d3c66a0f45e802cc4b52f231e1e2dd9536c29445ebe507a4","name":"FinalDataTrim4.csv","type":"text/csv","lastModified":1701275781547.296,"size":530},{"id":"6dc9273630c2d61a17bcabccc6c7a9dac0205d42174be055017cba5f6de2b1ba6c512dc313bfd4848a027d62f3e79a81e6faef002e231ddc2af8e3837af0d71f","href":"https://static.observableusercontent.com/files/6dc9273630c2d61a17bcabccc6c7a9dac0205d42174be055017cba5f6de2b1ba6c512dc313bfd4848a027d62f3e79a81e6faef002e231ddc2af8e3837af0d71f","name":"FinalDataTrim5@1.csv","type":"text/csv","lastModified":1701279730515.377,"size":518}] 2d:{"id":"a0ff9c532b414da5","slug":null,"title":"Plot: Radar chart","thumbnail":"9d6d3b31c648d800c9e3d7739dd78cf7107aa032110ec7e77df5feb4f4e498d4","access_level":"public","create_time":"$D2023-11-29T16:36:21.547Z","update_time":"$D2023-11-29T18:10:30.259Z","view_time":null,"first_public_time":"$D2023-11-29T16:36:21.547Z","fork":{"id":"1f949c57204c3cc0","slug":null,"title":"Plot: Radar chart","owner":{"id":"928d7d489dd1521e","login":"thomas-swartout-ws","name":"Thomas Swartout's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"928d7d489dd1521e","login":"thomas-swartout-ws","name":"Thomas Swartout's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/ca99b4387e1f3177e743270ebb0b9e409f1d35f6f68af7fff17eca008327ec45","tier":"starter_2024"},"version":525,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2e4cb981ff7ec8fd","login":"thomas-swartout","name":"Thomas Swartout","avatar_url":"https://avatars-next.observableusercontent.com/537d47c3dd4af42c4164ad9a6fd63ee813b0b528890e5402e2d1ca86e4b0ca6c","tier":null}],"members":[{"type":"individual","id":"2e4cb981ff7ec8fd","login":"thomas-swartout","name":"Thomas Swartout","avatar_url":"https://avatars-next.observableusercontent.com/537d47c3dd4af42c4164ad9a6fd63ee813b0b528890e5402e2d1ca86e4b0ca6c","tier":null,"role":"editor"},{"type":"team","id":"928d7d489dd1521e","login":"thomas-swartout-ws","name":"Thomas Swartout's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/ca99b4387e1f3177e743270ebb0b9e409f1d35f6f68af7fff17eca008327ec45","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Plot: Radar chart","cells":[{"id":0,"value":"

Plot: Radar chart

Observable Plot › Gallery

\n\n# Radar chart\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"data = await FileAttachment(\"FinalDataTrim5@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data","database":"$undefined"},{"id":162,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"metros = FileAttachment(\"FinalDataTrim4@1.csv\").csv({typed: true})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"Flatten the data into as many points as there are dimensions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"points = metros.flatMap(({ name, ...values }) =>\n Object.entries(values).map(([key, value]) => ({ name, key, value }))\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"This intermediate point scale distributes the data axes onto longitudes, starting at 180 and winding back to one step before −180. This task would be unnecessary if we had a native polar coordinate system, please vote up issue [#133](https://github.com/observablehq/plot/issues/133).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"longitude = d3.scalePoint(new Set(Plot.valueof(points, \"key\")), [180, -180]).padding(0.5).align(1)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"