2c:null 2d:["$","title",null,{"children":"Plot: Radar chart | yolohuang | Observable"}] 32:T8ec,Plot.plot({ width: 450, projection: { type: "azimuthal-equidistant", rotate: [0, -90], // Note: 0.625° corresponds to max. length (here, 0.5), plus enough room for the labels domain: d3.geoCircle().center([0, 90]).radius(0.625)() }, color: { legend: true, style: { legendX: -70 // 将 legend 向左移动 } }, 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(longitude.domain(), { x1: longitude, y1: 90 - 0.57, x2: 0, y2: 90, stroke: "white", strokeOpacity: 0.5, strokeWidth: 2.5 }), // tick labels Plot.text([0.2, 0.4, 0.8], { x: 180, y: (d) => 90 - d, dx: 2, textAnchor: "start", text: (d) => `${d}`, fill: "currentColor", stroke: "white", fontSize: 8 }), // axes labels Plot.text(longitude.domain(), { x: longitude, 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" }), // interactive labels Plot.text( points, Plot.pointer({ x: ({ key }) => longitude(key), y: ({ value }) => 90 - value, text: (d) => `${d.value}`, textAnchor: "start", dx: 4, fill: "currentColor", stroke: "white", maxRadius: 10 }) ), // interactive opacity on the areas () => svg` 34:[{"id":"9ad973471837317050fcd77e09acc8249831ef7214ebc8dff8efd91fa8a50a801ff28979b30a0c27090656670cf7602e84c066452b0c5b17879fa117e1d9dae1","href":"https://static.observableusercontent.com/files/9ad973471837317050fcd77e09acc8249831ef7214ebc8dff8efd91fa8a50a801ff28979b30a0c27090656670cf7602e84c066452b0c5b17879fa117e1d9dae1","name":"phones.csv","type":"text/csv","lastModified":1732183191260.635,"size":267},{"id":"55501731393eacdb232d801713050b9dbff07ae367739241eaa2b39501ec558b26b0e9ea288991905ee9848dee5bdaf2e509439cebf2a1fbde5853937826f106","href":"https://static.observableusercontent.com/files/55501731393eacdb232d801713050b9dbff07ae367739241eaa2b39501ec558b26b0e9ea288991905ee9848dee5bdaf2e509439cebf2a1fbde5853937826f106","name":"phones (1).csv","type":"text/csv","lastModified":1732248847105.098,"size":220}] 30:{"id":"00a4937adbd9c103","slug":null,"title":"Plot: Radar chart","thumbnail":"8e2d5606c58d9828b33e82aeb399f81bf86d05187143adc72d3e0f6d707abfc2","access_level":"public","create_time":"$D2024-11-21T09:59:51.260Z","update_time":"$D2024-11-22T08:04:49.300Z","view_time":null,"first_public_time":"$D2024-11-21T10:00:09.616Z","has_unpublished_edits":null,"fork":{"id":"b09de4b07af225ec","slug":"plot-radar-chart","title":"Plot: Radar chart","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ef33ac51fa87db83","login":"yolohuang","name":"yolohuang","avatar_url":"https://avatars-next.observableusercontent.com/bc37bcce01fa261be56522cdf6e89db94cf9ecbc61e4c70bc8474b617b0cad0e","tier":"starter_2024","bio":""},"version":517,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"150237755228ec26","login":"yolo-huang","name":"yolo huang","avatar_url":"https://avatars-next.observableusercontent.com/d6cd7afa8f19462d88adc2eb5a01caff4141f88dc48de93316163fb697049fdb","tier":null,"bio":""}],"members":[{"type":"individual","id":"150237755228ec26","login":"yolo-huang","name":"yolo huang","avatar_url":"https://avatars-next.observableusercontent.com/d6cd7afa8f19462d88adc2eb5a01caff4141f88dc48de93316163fb697049fdb","tier":null,"role":"editor"},{"type":"team","id":"ef33ac51fa87db83","login":"yolohuang","name":"yolohuang","avatar_url":"https://avatars-next.observableusercontent.com/bc37bcce01fa261be56522cdf6e89db94cf9ecbc61e4c70bc8474b617b0cad0e","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plot: Radar chart","cells":[{"id":0,"value":"

Plot: Radar chart

Observable Plot › Gallery

\n\n# Radar chart\n\nWe create a polar coordinate system with an azimuthal equidistant [projection](https://observablehq.com/plot/features/projections) centered on the North Pole. A point is encoded with its angle as longitude: *x* = *angle*; and its length as colatitude: *y* = 90 − *length*.\n\nNote that overlapping areas make it difficult to compare, say, more than three objects. Instead, we suggest [radar charts as small multiples](https://observablehq.com/@observablehq/plot-radar-chart-faceted).\n\n_Design inspiration: Nadieh Bremer, “[A different look for the d3.js radar chart](https://www.visualcinnamon.com/2015/10/different-look-d3-radar-chart/),” 2015._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"phones = FileAttachment(\"phones (1).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":337,"value":"Flatten the data into as many points as there are dimensions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"points = phones.flatMap(({ name, ...values }) =>\n Object.entries(values).map(([key, value]) => ({ name, key, value }))\n)\n//points = gene_name, TRIM, zrank_score/R","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"longitude = d3.scalePoint(new Set(Plot.valueof(points, \"key\")), [180, -180]).padding(0.5).align(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"