2b:null 2c:["$","title",null,{"children":"Interactive Radar for Bird Data | Bill White's Workspace | Observable"}] 31:T2bc6,chart = { const tooltip = d3.select("body").append("div") .attr("class", "radar-tooltip") .style("position", "absolute") .style("pointer-events", "none") .style("padding", "4px 6px") .style("background", "rgba(0,0,0,0.7)") .style("color", "#000") .style("border-radius", "3px") .style("font-size", "12px") .style("visibility", "hidden"); const svg = d3.select(DOM.svg(width, height+(margin*2))); svg.append("defs").html(` ` ); const containerWidth = width-(margin*2); const containerHeight = height-(margin*2); const container = svg.append('g') .attr("width", containerWidth) .attr("height", containerHeight) .attr('transform', `translate(${(width/2)+margin}, ${(height/2)+margin})`); let activeLabel = null; var axisGrid = container.append("g") .attr("class", "axisWrapper"); axisGrid.selectAll(".levels") .data(d3.range(1,(axisCircles+1)).reverse()) .enter() .append("circle") .attr("class", "gridCircle") .attr("r", (d, i) => radius/axisCircles*d) .style("fill", "#CDCDCD") .style("stroke", "#CDCDCD") .style("fill-opacity", 0.1); const axis = axisGrid.selectAll(".axis") .data(axesDomain) .enter() .append("g") .attr("class", "axis"); axis.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", (d, i) => rScale(maxValue*1.1) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y2", (d, i) => rScale(maxValue*1.1) * Math.sin(angleSlice*i - Math.PI/2)) .attr("class", "line") .style("stroke", "white") .style("stroke-width", "2px"); axis.append("text") .attr("class", "legend") .style("font-size", "11px") .attr("text-anchor", "middle") .attr("font-family", "monospace") .attr("dy", "0.35em") .attr("x", (d, i) => rScale(maxValue * axisLabelFactor) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y", (d, i) => rScale(maxValue * axisLabelFactor) * Math.sin(angleSlice*i - Math.PI/2)) .text(d => d); const birdNames = ["Blue Heron","Whooping Crane","Golden Eagle","Canada Goose"]; const nested = data.map((values, i) => ({ name: birdNames[i], values })); const plots = container.append('g') .selectAll('g.series') .data(nested) .join('g') .attr("class","series") .attr("data-name", d => d.name)//, (d, i) => bird(i)) .attr("fill", "none") .attr("stroke", "steelblue"); plots.append('path') .style("pointer-events","none") .attr("d", d => radarLine(d.values.map(v => v.value))) .attr("fill", (d, i) => color(i)) .attr("fill-opacity", 0.1) .attr("stroke", (d, i) => color(i)) .attr("stroke-width", 2); plots.selectAll("circle") .data(d => d.values) .join("circle") .attr("r", 15) .attr("cx", (d,i) => rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2)) .attr("cy", (d,i) => rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2)) .style("fill-opacity", 0.8) .append("title") .text(d => `${d.axis}: ${d.hover}`) .on("mouseover", (event, d) => { tooltip .html(`${d.axis}
Value: ${d.hover}`) .style("visibility", "visible"); }) .on("mousemove", event => { tooltip .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); }); const names = nested.map(d => d.name); const lineLegend = svg.selectAll(".lineLegend") .data(names) .enter().append("g") .attr("class","lineLegend") .attr("transform", (_, i) => `translate(${margin},${i*20})`) .style("cursor","pointer") .on("click", (event, clickedName) => { activeLabel = (activeLabel === clickedName) ? null : clickedName // fade all blobs except the active one container.selectAll("g.series") .transition().duration(200) .style("opacity", d => d.name === names[activeLabel] || activeLabel == null ? 1 : 0.1); // bold the selected legend text lineLegend.select("text") .style("font-weight", d => d === names[activeLabel] && activeLabel != null ? 'bold' : 'normal'); }) .on("mouseover", function() { d3.select(this).select("text") .style("text-decoration","underline"); }) .on("mouseout", function() { d3.select(this).select("text") .style("text-decoration","none"); }); const iconId = d3.scaleOrdinal() .domain(birdNames) .range(["#icon-blue-heron", "#icon-whooping-crane", "#icon-golden-eagle", "#icon-canada-goose"]); lineLegend.append("use") .attr("href", d => iconId(d)) .attr("transform", "translate(-5, -2)scale(0.85)"); lineLegend.append("text") .attr("x", 15).attr("y", 9) .attr("font-family","monospace") .attr("font-size","11px") .text(d => d); return svg.node(); }32:T11b9, 33:T422,data = [ [//"Blue_Heron" {axis:"Height",value:0.91,hover:"53.9in"}, {axis:"Weight",value:0.28,hover:"88.2oz"}, {axis:"Wingspan",value:0.88,hover:"79.1in"}, {axis:"Lifespan",value:0.80,hover:"24yr"}, {axis:"Distance",value:0.75,hover:"3000mi"} ],[//Whooping_Crane {axis:"Height",value:1.00,hover:"59.1in"}, {axis:"Weight",value:0.87,hover:"275.1oz"}, {axis:"Wingspan",value:1.00,hover:"90.2in"}, {axis:"Lifespan",value:1.00,hover:"30yr"}, {axis:"Distance",value:0.63,hover:"2500mi"} ],[//Golden_Eagle {axis:"Height",value:0.56,hover:"33.1in"}, {axis:"Weight",value:0.68,hover:"216.1oz"}, {axis:"Wingspan",value:0.96,hover:"86.6in"}, {axis:"Lifespan",value:1.00,hover:"30yr"}, {axis:"Distance",value:1.00,hover:"3980mi"} ] ,[//Canada_Goose {axis:"Height",value:0.73,hover:"43.3in"}, {axis:"Weight",value:1.00,hover:"317.8oz"}, {axis:"Wingspan",value:0.74,hover:"66.9in"}, {axis:"Lifespan",value:0.80,hover:"24yr"}, {axis:"Distance",value:0.50,hover:"2000mi"} ] ];34:[{"id":"9c1f3a17373dfce16e619089ee429655763f33f40d8cb327a587ec69444cd9058c004f888a86a6c6da0a3462e8da7500764546acd2fc038093c2f322d9b3a820","href":"https://static.observableusercontent.com/files/9c1f3a17373dfce16e619089ee429655763f33f40d8cb327a587ec69444cd9058c004f888a86a6c6da0a3462e8da7500764546acd2fc038093c2f322d9b3a820","name":"BlueHeron.svg","type":"image/svg+xml","lastModified":1747871320514.315,"size":2013},{"id":"5545b946417b2abc1b1ec6a6911826c596da4eb64803d6db5a270b0f8be0fa97b24118726967b4a084c0c307f9015b1d429f3b338f5d0f72ec43cc7cf69cb39a","href":"https://static.observableusercontent.com/files/5545b946417b2abc1b1ec6a6911826c596da4eb64803d6db5a270b0f8be0fa97b24118726967b4a084c0c307f9015b1d429f3b338f5d0f72ec43cc7cf69cb39a","name":"GoldenEagle.svg","type":"image/svg+xml","lastModified":1747871320845.808,"size":1963},{"id":"f9eafbf60ece12ad0e9291aa8f5dd7b2c1397100ec648a60d648f5a4034e829bc88847fa98bfc5cb2e3f664c4c80c2865ecd6fdc95e03b57f33805ebcb21b3dc","href":"https://static.observableusercontent.com/files/f9eafbf60ece12ad0e9291aa8f5dd7b2c1397100ec648a60d648f5a4034e829bc88847fa98bfc5cb2e3f664c4c80c2865ecd6fdc95e03b57f33805ebcb21b3dc","name":"WhoopingCrane.svg","type":"image/svg+xml","lastModified":1747871320862.723,"size":1136}] 2f:{"id":"6c80198639d7e69b","slug":null,"title":"Interactive Radar for Bird Data","thumbnail":"9ee8fcbbc312b3a484c4b87c5807223a67fad2c5bf34f942c48de8541f089045","access_level":"public","create_time":"$D2025-05-15T04:03:19.073Z","update_time":"$D2025-06-05T00:02:38.668Z","view_time":null,"first_public_time":"$D2025-05-16T20:55:18.852Z","has_unpublished_edits":null,"fork":{"id":"fa97ec30fe7d4bf8","slug":null,"title":"","owner":{"id":"9f19e48362eaf88f","login":"bill-white-ws","name":"Bill White's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9f19e48362eaf88f","login":"bill-white-ws","name":"Bill White's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/76e03ecc8b6a89e9745443e702bac1ee1256915d1fc340d769c749ced0f4df45","tier":"starter_2024","bio":""},"version":452,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be1fa205e6547a94","login":"bill-white","name":"Bill White","avatar_url":"https://avatars-next.observableusercontent.com/183c0626578de99f9801435b3f6187e7e619f85385ff09369122803174853794","tier":null,"bio":""}],"members":[{"type":"individual","id":"be1fa205e6547a94","login":"bill-white","name":"Bill White","avatar_url":"https://avatars-next.observableusercontent.com/183c0626578de99f9801435b3f6187e7e619f85385ff09369122803174853794","tier":null,"role":"editor"},{"type":"team","id":"9f19e48362eaf88f","login":"bill-white-ws","name":"Bill White's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/76e03ecc8b6a89e9745443e702bac1ee1256915d1fc340d769c749ced0f4df45","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":"Interactive Radar for Bird Data","cells":[{"id":339,"value":"# Interactive Radar for Bird Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"bird = d => [\"Blue Heron\",\"Whooping Crane\",\"Golden Eagle\"][d]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof curveSelect = select({\n title: \"Curve type\",\n options: curveTypes,\n value: \"curveLinearClosed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"axesDomain = data[0].map(d => d.axis)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"axesLength = data[0].length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"formatPercent = d3.format(',.0%')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"wrapWidth = 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"axisLabelFactor = 1.12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"axisCircles = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"dotRadius = 4\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"radius = (height-(margin*2)) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"margin = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`### Plotting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"radarLine = d3.lineRadial()\n .curve(d3[curveSelect])\n .radius(d => rScale(d))\n .angle((d, i) => i * angleSlice)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"angleSlice = Math.PI * 2 / axesLength","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"rScale = d3.scaleLinear()\n .domain([0, maxValue])\n .range([0, radius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"color = d3.scaleOrdinal()\n .range([\"#4169e1\",\"#CC333F\",\"#EDC951\",\"#00A0B0\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"maxValue = d3.max(_.flatten(data).map(d => d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"import {curveTypes} from \"@palewire/d3-curves-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"_ = require(\"underscore\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"