40:null 41:["$","title",null,{"children":"Static Radar | Land Guzzlers | Observable"}] 47:T1e10,dvRadar_temp = (elem,data,fields,fieldlabels,width,options) => { // options include idField, classField if (typeof(options) === "undefined") {options = {}} if (typeof(options.innerRadius) === "undefined") {options.innerRadius = 0} if (typeof(options.outerRadius) === "undefined") {options.outerRadius = width/2} if (typeof(options.minValue) === "undefined") {options.minValue = 0} if (typeof(options.maxValue) === "undefined") {options.maxValue = options.outerRadius} if (typeof(options.radiusScale) === "undefined") {options.radiusScale = d3.scaleLinear().domain([options.minValue,options.maxValue]).range([options.innerRadius,options.outerRadius])} if (typeof(options.arcLength) === "undefined") {options.arcLength = 360} if (typeof(options.arcStartDeg) === "undefined") {options.arcStartDeg = 0} if (typeof(options.centerPosition) === "undefined") {options.centerPosition = {x: width/2, y: width/2}} if (typeof(options.opacity) === "undefined") {options.opacity = 0.5} if (typeof(options.colorSet) === "undefined") {options.colorSet = "steelblue"} if (typeof(options.colorStroke) === "undefined") {options.colorStroke = "black"} if (typeof(options.spokelineStroke) === "undefined") {options.spokelineStroke = "gray"} if (typeof(options.transitionMS) === "undefined") {options.transitionMS = 0} if (typeof(options.tickFormat) === "undefined") {options.tickFormat = ""} if (typeof(options.tickSize) === "undefined") {options.tickSize = 1/10} if (typeof(options.axisColor) === "undefined") {options.axisColor = "#gray"} if (typeof(options.axisLabelTextSize) === "undefined") {options.axisLabelTextSize = '16' + 'px'} // options.axisLabelTextSize = (60 * Math.log(Number(onetrack[0]['n']))/20).toString() + 'px' if (typeof(options.axisLabelTextColor) === "undefined") {options.axisLabelTextColor = "#black"} if (typeof(options.axisLabelShow) === "undefined") {options.axisLabelShow = false} let spokeDeg = options.arcLength / fields.length; //let scaleAngle = d3.scaleLinear().domain([]).range([options.arcStartDeg,options.arcStartDeg+options.arcLength]) const polygon = d3.lineRadial() .angle((d,i) => radiansFromDeg(i * spokeDeg)) .radius(d => options.radiusScale(d)) .curve(d3.curveLinearClosed); let recorddata = (record) => { let recorddata = []; fields.forEach(f => { recorddata.push(toNum(record[f])); }); return recorddata; } let color = (d,i) => { let color; if (typeof(options.colorSet) === "string") { color = options.colorSet; } else if (typeof(options.colorSet) === "object") { color = options.colorSet[i]; } return color; } // transform translate. Radar charts center around 0,0 so shift the whole thing to see it. let radar = elem.select("g[id=radar]").node() ? elem.select("g[id=radar]") : elem.append("g").attr("id","radar"); radar.attr("transform", "translate(" + options.centerPosition.x + " " + options.centerPosition.y + ")"); // check for and create sublayers (groups) for parts of the radar let spokelinesLayer = radar.select("g[id=spokelines]").node() ? radar.select("g[id=spokelines]") : radar.append("g").attr("id","spokelines"); let spokepolysLayer = radar.select("g[id=spokepolys]").node() ? radar.select("g[id=spokepolys]") : radar.append("g").attr("id","spokepolys"); let outlinesLayer = radar.select("g[id=outlines]").node() ? radar.select("g[id=outlines]") : radar.append("g").attr("id","outlines"); let shapesLayer = radar.select("g[id=shapes]").node() ? radar.select("g[id=shapes]") : radar.append("g").attr("id","shapes"); let labelsLayer = radar.select("g[id=labels]").node() ? radar.select("g[id=labels]") : radar.append("g").attr("id","labels"); // draw the shapes let shapes = shapesLayer.selectAll("path") .data(data) .join("path") .transition().duration(options.transitionMS) .attr("d", d=> polygon(recorddata(d))) .style("stroke", options.colorStroke) .style("fill", (d,i) => color(d,i)) .style("opacity", options.opacity); let outlines = outlinesLayer.selectAll("path") .data(data) .join("path") .transition().duration(options.transitionMS) .style('stroke-width', '2px') .attr("d", d => polygon(createUniformPolygon(options.maxValue))) .style("stroke", options.colorStroke) .style('fill', 'none'); function createUniformPolygon(maxValue) { const numSides = fields.length; const polygonData = Array.from({ length: numSides }, () => maxValue); return polygonData; } if (typeof(options.idField) !== "undefined" && options.idField != "") {shapes.attr("id", d => d[options.idField])} if (typeof(options.classField) !== "undefined" && options.classField != "") {shapes.attr("class", d => d[options.classField])} // draw spokelines let spokelines = spokelinesLayer.selectAll(".spokeline") .data(fields) .join("g") .classed("spokeline", true) .transition().duration(options.transitionMS) .call(d3.axisBottom(options.radiusScale) .tickFormat(options.tickFormat) .tickSize(options.tickSize) .ticks(5) ) .style("color", 'black') .style('opacity', .4) .style('stroke-width', '2px') .attr("transform", (d,i) => { let angle = -90 + (i * spokeDeg); // in deg. // adjust for partial angle versions when develop this. return "rotate(" + angle + ")"; }); // Create concentric polygons let spokepolys = spokepolysLayer.selectAll(".concentric-polygon") .data(d => d3.range(options.minValue, options.maxValue + 1)) .join("path") .classed("concentric-polygon", true) .transition().duration(options.transitionMS) .attr("d", d => polygon(createUniformPolygon(d))) // Use createUniformPolygon to generate the polygon path .style("fill", "none") .style("stroke", options.spokelineStroke); // Create the outline path let outlinePath = outlinesLayer.append("path") .attr("id", "outline-path") .attr("d", d => polygon(createUniformPolygon(options.maxValue))) .attr("fill", "none") .attr("stroke", "none"); // draw labels if requested if (options.axisLabelShow) { let labels = labelsLayer.selectAll(".spokelabel") .data(fieldlabels) .join("text") .classed("spokelabel", true) .style("text-anchor", "middle") .style("font-size", options.axisLabelTextSize) .style("fill", options.axisLabelTextColor) // Append the first label twice to save both parts separately let firstLabel = labels.nodes()[0]; let firstLabelText = fieldlabels[0]; let firstLabelHalf1 = firstLabelText.slice(0, Math.floor(firstLabelText.length / 2)); let firstLabelHalf2 = firstLabelText.slice(Math.floor(firstLabelText.length / 2)); d3.select(firstLabel) .append("textPath") .attr("href", "#outline-path") .style("text-anchor", "end") .style("font-size", options.axisLabelTextSize) .attr("startOffset", "100%") .text(firstLabelHalf1); d3.select(firstLabel) .append("textPath") .attr("href", "#outline-path") .style("text-anchor", "start") .style("font-size", options.axisLabelTextSize) .attr("startOffset", "0") .text(firstLabelHalf2); // Append the remaining labels normally let remainingLabels = labels.nodes().slice(1); remainingLabels.forEach((label, i) => { let labelText = fieldlabels[i + 1]; d3.select(label) .append("textPath") .attr("href", "#outline-path") .style("text-anchor", "middle") .style("font-size", options.axisLabelTextSize) .attr("startOffset", `${((i + 1) * 100 / fieldlabels.length)}%`) .text(labelText); }); } return radar; }48:[{"id":"9251bef233d94322893b7483f640b7a0e7634e6c692a84f99e53251720a9ea1e25d4a621d16b65c8980528ae76da07db20971ca572518167ad4bde4cd7bbba86","href":"https://static.observableusercontent.com/files/9251bef233d94322893b7483f640b7a0e7634e6c692a84f99e53251720a9ea1e25d4a621d16b65c8980528ae76da07db20971ca572518167ad4bde4cd7bbba86","name":"data_clus_schl.csv","type":"text/csv","lastModified":1683633932118.487,"size":514}] 45:{"id":"e999199648ab0a4e","slug":null,"title":"Static Radar","thumbnail":"c22dcfa6b710b3e67dc35de679468dde39a73434d93e57a6dacb0b5a251465e2","access_level":"public","create_time":"$D2023-05-09T12:05:32.118Z","update_time":"$D2023-05-09T13:26:55.566Z","view_time":null,"first_public_time":"$D2023-05-09T12:05:32.118Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d6814485155c0aa8","login":"landguzzlersdanek","name":"Land Guzzlers","avatar_url":"https://avatars-next.observableusercontent.com/71f69a493cbe70bba6625db7c38c6c664f27dc78cce6eed1e0d2b08264296681","tier":"starter_2024","bio":"","following":false},"version":1066,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0f71acb82f8bebf","login":"brennandanek","name":"brennandanek","avatar_url":"https://avatars-next.observableusercontent.com/762b3f79b24424e79076c6b0003d4c28e3b84773f38cc5318e8318b3497fa631","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b0f71acb82f8bebf","login":"brennandanek","name":"brennandanek","avatar_url":"https://avatars-next.observableusercontent.com/762b3f79b24424e79076c6b0003d4c28e3b84773f38cc5318e8318b3497fa631","tier":null,"role":"editor"},{"type":"team","id":"d6814485155c0aa8","login":"landguzzlersdanek","name":"Land Guzzlers","avatar_url":"https://avatars-next.observableusercontent.com/71f69a493cbe70bba6625db7c38c6c664f27dc78cce6eed1e0d2b08264296681","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Static Radar","cells":[{"id":0,"value":"# Static Radar\n`dvRadar(elem,data,fields,width,options)`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"svgContainer","database":"$undefined"},{"id":413,"value":"### choose a track from the set","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"viewof cluster = Inputs.range([0, 4], {label: \"Cluster\", step: 1, value: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"data = FileAttachment(\"data_clus_schl.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"labels = ['Strategic Leadership Support', 'Vision For Teaching/Learning', 'Implementation Systems', 'Professional Learning','Competing Priorities']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"fields = data.columns.slice(1,6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"c1 = [data[0]]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"options1 = ({\n minValue: 0,\n maxValue: 5,\n idField: \"id\",\n transitionMS: 500,\n axisLabelShow: true,\n outerRadius: 30 * Math.log(Number(c1[0]['n'])),\n centerPosition: {x: 500, y:500},\n axisLabelTextSize: '14px'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"{ \n const radarElem1 = d3.select(svgContainer).select(\"#layer1\");\n const radar1 = dvRadar_temp(radarElem1,c1,fields,labels,500,options1);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"c2 = [data[1]]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"options2 = ({\n minValue: 0,\n maxValue: 5,\n idField: \"id\",\n transitionMS: 500,\n outerRadius: 30 * Math.log(Number(c2[0]['n'])),\n centerPosition: {x: 500, y:500}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"{\n const radarElem2 = d3.select(svgContainer).select(\"#layer2\");\n const radar2 = dvRadar_temp(radarElem2,c2,fields,labels,500,options2);\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"c3 = [data[2]]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"options3 = ({\n minValue: 0,\n maxValue: 5,\n idField: \"id\",\n transitionMS: 500,\n outerRadius: 30 * Math.log(Number(c3[0]['n'])),\n centerPosition: {x: 500, y:500}\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"{\n const radarElem3 = d3.select(svgContainer).select(\"#layer3\");\n const radar3 = dvRadar_temp(radarElem3,c3,fields,labels,500,options3);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"c4 = [data[3]]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"options4 = ({\n minValue: 0,\n maxValue: 5,\n idField: \"id\",\n transitionMS: 500,\n outerRadius: 30 * Math.log(Number(c4[0]['n'])),\n centerPosition: {x: 500, y:500}\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"{\n const radarElem4 = d3.select(svgContainer).select(\"#layer4\");\n const radar4 = dvRadar_temp(radarElem4,c4,fields,labels,500,options4);\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"c5 = [data[4]]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"options5 = ({\n minValue: 0,\n maxValue: 5,\n idField: \"id\",\n transitionMS: 500,\n outerRadius: 30 * Math.log(Number(c5[0]['n'])),\n centerPosition: {x: 500, y:500}\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"{\n const radarElem5 = d3.select(svgContainer).select(\"#layer5\");\n const radar5 = dvRadar_temp(radarElem5,c5,fields,labels,500,options5);\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":448,"value":"import {toNum, rFromArea, radiansFromDeg} from \"@emfielduva/dvlib\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"