2b:null 2c:["$","title",null,{"children":"Radar chart with dynamic .csv binding and static image generator | Noble | Observable"}] 31:T44f,style = html``32:T463,sampleData = [ { "key": "Group 1", "values": [ { "axis": "Axis 1", "value": 0.11016044441435802 }, { "axis": "Axis 2", "value": 0.8696647550791439 }, { "axis": "Axis 3", "value": 0.677354149502813 }, { "axis": "Axis 4", "value": 0.2767470130303311 } ] }, { "key": "Group 2", "values": [ { "axis": "Axis 1", "value": 0.764850754499599 }, { "axis": "Axis 2", "value": 0.4101102267907162 }, { "axis": "Axis 3", "value": 0.08409747421414293 }, { "axis": "Axis 4", "value": 0.20108202752033222 } ] }, { "key": "Group 3", "values": [ { "axis": "Axis 1", "value": 0.24029852239131788 }, { "axis": "Axis 2", "value": 0.8898237856143538 }, { "axis": "Axis 3", "value": 0.34252864582381815 }, { "axis": "Axis 4", "value": 0.6527074665992016 } ] }, ]33:T912c,function RadarChart() { // options which should be accessible via ACCESSORS var data = []; var _data = []; var options = { filter: 'glow', // define your own filter; false = no filter; width: window.innerWidth, height: window.innerHeight, // Margins for the SVG margins: { top: 100, right: 100, bottom: 100, left: 100 }, circles: { levels: 4, maxValue: 0, labelFactor: 1.2, opacity: 0.1, fill: "#CDCDCD", color: "#CDCDCD" }, areas: { colors: {}, // color lookup by key opacity: 0.35, borderWidth: 2, rounded: false, dotRadius: 4, sort: true, // sort layers by approximation of size, smallest on top filter: [] }, axes: { lineColor: "white", lineWidth: "1px", wrapWidth: 60, // The number of pixels after which a label needs to be given a new line filter: [], invert: [], ranges: { "Large Screen": [0, 1] } // { axisname: [min, max], axisname: [min, max] } }, legend: { display: true, symbol: 'circle', // 'circle', 'cross', 'diamond', 'triangle-up', 'triangle-down' toggle: 'circle', position: { x: 44, y: 44 } }, color: d3.scale.category10() //Color function } // nodes layered such that radarInvisibleCircles always on top of radarAreas // and tooltip layer is at topmost layer var chart_node; // parent node for this instance of radarChart var hover_node; // parent node for invisibleRadarCircles var tooltip_node; // parent node for tooltip, to keep on top var legend_node; // parent node for tooltip, to keep on top // DEFINABLE EVENTS // Define with ACCESSOR function chart.events() var events = { 'update': { 'begin': null, 'end': null }, 'gridCircle': { 'mouseover': null, 'mouseout': null, 'mouseclick': null }, 'axisLabel': { 'mouseover': null, 'mouseout': null, 'mouseclick': null }, 'line': { 'mouseover': null, 'mouseout': null, 'mouseclick': null }, 'legend': { 'mouseover': legendMouseover, 'mouseout': areaMouseout, 'mouseclick': legendClick }, 'axis_legend': { 'mouseover': null, 'mouseout': null, 'mouseclick': null }, 'radarArea': { 'mouseover': areaMouseover, 'mouseout': areaMouseout, 'mouseclick': null }, 'radarInvisibleCircle': { 'mouseover': tooltip_show, 'mouseout': tooltip_hide, 'mouseclick': null } }; // functions which should be accessible via ACCESSORS var updateData; // helper functions var tooltip; // programmatic var radial_calcs = {}; var Format = d3.format('%'); // Percentage formatting var transition_time = 0; var delay = 0; var keys; var keyScale; var colorScale; function chart(selection) { selection.each(function() { dataCalcs(); radialCalcs(); var dom = d3.select(this); //////////// Create the container SVG and children g ///////////// var svg = dom.append('svg') .attr('class', 'svg-class') .attr('width', options.width) .attr('height', options.height); // append parent g for chart chart_node = svg.append('g').attr('class', 'radar_node'); hover_node = svg.append('g').attr('class', 'hover_node'); tooltip_node = svg.append('g').attr('class', 'tooltip_node'); legend_node = svg.append("g").attr("class", "legendOrdinal"); // Wrapper for the grid & axes var axisGrid = chart_node.append("g").attr("class", "axisWrapper"); ////////// Glow filter for some extra pizzazz /////////// var filter = chart_node.append('defs').append('filter').attr('id', 'glow'), feGaussianBlur = filter.append('feGaussianBlur').attr('stdDeviation', '2.5').attr('result', 'coloredBlur'), feMerge = filter.append('feMerge'), feMergeNode_1 = feMerge.append('feMergeNode').attr('in', 'coloredBlur'), feMergeNode_2 = feMerge.append('feMergeNode').attr('in', 'SourceGraphic'); // Set up the small tooltip for when you hover over a circle tooltip = tooltip_node.append("text") .attr("class", "tooltip") .style("opacity", 0); // update updateData = function() { var duration = transition_time; dataCalcs(); radialCalcs(); keys = _data.map(function(m) { return m.key; }); keyScale = d3.scale.ordinal() .domain(_data.map(function(m) { return m._i; })) .range(_data.map(function(m) { return m.key; })); colorScale = d3.scale.ordinal() .domain(_data.map(function(m) { return options.areas.colors[keyScale(m._i)] ? keyScale(m._i) : m._i.toString(); })) .range(_data.map(function(m) { return setColor(m); })); svg.transition().delay(delay).duration(duration) .attr('width', options.width) .attr('height', options.height) chart_node.transition().delay(delay).duration(duration) .attr('width', options.width) .attr('height', options.height) .attr("transform", "translate(" + ((options.width - (options.margins.left + options.margins.right)) / 2 + options.margins.left) + "," + ((options.height - (options.margins.top + options.margins.bottom)) / 2 + options.margins.top) + ")") hover_node.transition().delay(delay).duration(duration) .attr('width', options.width) .attr('height', options.height) .attr("transform", "translate(" + ((options.width - (options.margins.left + options.margins.right)) / 2 + options.margins.left) + "," + ((options.height - (options.margins.top + options.margins.bottom)) / 2 + options.margins.top) + ")") tooltip_node.transition().delay(delay).duration(duration) .attr('width', options.width) .attr('height', options.height) .attr("transform", "translate(" + ((options.width - (options.margins.left + options.margins.right)) / 2 + options.margins.left) + "," + ((options.height - (options.margins.top + options.margins.bottom)) / 2 + options.margins.top) + ")") legend_node .attr("transform", "translate(" + options.legend.position.x + "," + options.legend.position.y + ")"); var update_gridCircles = axisGrid.selectAll(".gridCircle") .data(d3.range(1, (options.circles.levels + 1)).reverse()) update_gridCircles .transition().duration(duration) .attr("r", function(d, i) { return radial_calcs.radius / options.circles.levels * d; }) .style("fill", options.circles.fill) .style("fill-opacity", options.circles.opacity) .style("stroke", options.circles.color) .style("filter", function() { if (options.filter) return "url(#" + options.filter + ")" }); update_gridCircles.enter() .append("circle") .attr("class", "gridCircle") .attr("r", function(d, i) { return radial_calcs.radius / options.circles.levels * d; }) .on('mouseover', function(d, i) { if (events.gridCircle.mouseover) events.gridCircle.mouseover(d, i); }) .on('mouseout', function(d, i) { if (events.gridCircle.mouseout) events.gridCircle.mouseout(d, i); }) .style("fill", options.circles.fill) .style("fill-opacity", options.circles.opacity) .style("stroke", options.circles.color) .style("filter", function() { if (options.filter) return "url(#" + options.filter + ")" }); update_gridCircles.exit() .transition().duration(duration * .5) .delay(function(d, i) { return 0; }) .remove(); var update_axisLabels = axisGrid.selectAll(".axisLabel") .data(d3.range(1, (options.circles.levels + 1)).reverse()) update_axisLabels .transition().duration(duration / 2) .style('opacity', 1) // don't change to 0 if there has been no change in dimensions! possible?? .transition().duration(duration / 2) .text(function(d, i) { if (radial_calcs.maxValue) return Format(radial_calcs.maxValue * d / options.circles.levels); }) .attr("y", function(d) { return -d * radial_calcs.radius / options.circles.levels; }) .style('opacity', 1) update_axisLabels.enter() .append("text") .attr("class", "axisLabel") .attr("x", 4) .attr("y", function(d) { return -d * radial_calcs.radius / options.circles.levels; }) .attr("dy", "0.4em") .style("font-size", "10px") .attr("fill", "#737373") .on('mouseover', function(d, i) { if (events.axisLabel.mouseover) events.axisLabel.mouseover(d, i); }) .on('mouseout', function(d, i) { if (events.axisLabel.mouseout) events.axisLabel.mouseout(d, i); }) .text(function(d, i) { if (radial_calcs.maxValue) return Format(radial_calcs.maxValue * d / options.circles.levels); }); update_axisLabels.exit() .transition().duration(duration * .5) .remove(); var update_axes = axisGrid.selectAll(".axis") .data(radial_calcs.axes, get_axis) update_axes .enter().append("g") .attr("class", "axis") .attr("key", function(d) { return d.axis; }); update_axes.exit() .transition().duration(duration) .style('opacity', 0) .remove() var update_lines = update_axes.selectAll(".line") .data(function(d) { return [d]; }, get_axis) update_lines.enter() .append("line") .attr("class", "line") .attr("x1", 0) .attr("y1", 0) .attr("x2", function(d, i, j) { return calcX(null, 1.1, j); }) .attr("y2", function(d, i, j) { return calcY(null, 1.1, j); }) .on('mouseover', function(d, i, j) { if (events.line.mouseover) events.line.mouseover(d, j); }) .on('mouseout', function(d, i, j) { if (events.line.mouseout) events.line.mouseout(d, j); }) .style("stroke", options.axes.lineColor) .style("stroke-width", "2px") update_lines.exit() .transition().duration(duration * .5) .delay(function(d, i) { return 0; }) .remove(); update_lines .transition().duration(duration) .style("stroke", options.axes.lineColor) .style("stroke-width", options.axes.lineWidth) .attr("x2", function(d, i, j) { return calcX(null, 1.1, j); }) .attr("y2", function(d, i, j) { return calcY(null, 1.1, j); }) var update_axis_legends = update_axes.selectAll(".axis_legend") .data(function(d) { return [d]; }, get_axis) update_axis_legends.enter() .append("text") .attr("class", "axis_legend") .style("font-size", "11px") .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("x", function(d, i, j) { return calcX(null, options.circles.labelFactor, j); }) .attr("y", function(d, i, j) { return calcY(null, options.circles.labelFactor, j); }) .on('mouseover', function(d, i, j) { if (events.axis_legend.mouseover) events.axis_legend.mouseover(d, i, j); }) .on('mouseout', function(d, i, j) { if (events.axis_legend.mouseout) events.axis_legend.mouseout(d, i, j); }) .call(wrap, options.axes.wrapWidth) update_axis_legends.exit() .transition().duration(duration * .5) .delay(function(d, i) { return 0; }) .remove(); update_axis_legends .transition().duration(duration) .attr("x", function(d, i, j) { return calcX(null, options.circles.labelFactor, j); }) .attr("y", function(d, i, j) { return calcY(null, options.circles.labelFactor, j); }) .selectAll('tspan') .attr("x", function(d, i, j) { return calcX(null, options.circles.labelFactor, j); }) .attr("y", function(d, i, j) { return calcY(null, options.circles.labelFactor, j); }) var radarLine = d3.svg.line.radial() .interpolate(options.areas.rounded ? "cardinal-closed" : "linear-closed") .radius(function(d) { return radial_calcs.rScale(d.value); }) .angle(function(d, i) { return i * radial_calcs.angleSlice; }); var update_blobWrapper = chart_node.selectAll(".radarWrapper") .data(_data, get_key) update_blobWrapper.enter() .append("g") .attr("class", "radarWrapper") .attr("key", function(d) { return d.key; }); update_blobWrapper.exit() .transition().duration(duration) .style('opacity', 0) .remove() var update_radarArea = update_blobWrapper.selectAll('.radarArea') .data(function(d) { return [d]; }, get_key); update_radarArea.enter() .append("path") .attr("class", function(d) { return "radarArea " + d.key.replace(/\W/g, '') }) .attr("d", function(d, i) { return radarLine(d.values); }) .style("fill", function(d, i, j) { return setColor(d); }) .style("fill-opacity", 0) .on('mouseover', function(d, i) { if (events.radarArea.mouseover) events.radarArea.mouseover(d, i, this); }) .on('mouseout', function(d, i) { if (events.radarArea.mouseout) events.radarArea.mouseout(d, i, this); }) update_radarArea.exit().remove() update_radarArea .transition().duration(duration) .style("fill", function(d, i, j) { return setColor(d); }) .attr("d", function(d, i) { return radarLine(d.values); }) .style("fill-opacity", function(d, i) { return options.areas.filter.indexOf(d.key) >= 0 ? 0 : options.areas.opacity; }) var update_radarStroke = update_blobWrapper.selectAll('.radarStroke') .data(function(d) { return [d]; }, get_key); update_radarStroke.enter() .append("path") .attr("class", "radarStroke") .attr("d", function(d, i) { return radarLine(d.values); }) .style("opacity", 0) .style("stroke-width", options.areas.borderWidth + "px") .style("stroke", function(d, i, j) { return setColor(d); }) .style("fill", "none") .style("filter", function() { if (options.filter) return "url(#" + options.filter + ")" }); update_radarStroke.exit().remove(); update_radarStroke .transition().duration(duration) .style("stroke", function(d, i, j) { return setColor(d); }) .attr("d", function(d, i) { return radarLine(d.values); }) .style("filter", function() { if (options.filter) return "url(#" + options.filter + ")" }) .style("opacity", function(d, i) { return options.areas.filter.indexOf(d.key) >= 0 ? 0 : 1; }); var update_radarCircle = update_blobWrapper.selectAll('.radarCircle') .data(function(d, i) { return add_index(d._i, d.values); }); update_radarCircle.enter() .append("circle") .attr("class", "radarCircle") .attr("r", options.areas.dotRadius) .attr("cx", function(d, i) { return calcX(0, 0, i); }) .attr("cy", function(d, i) { return calcY(0, 0, i); }) .style("fill", function(d, i, j) { return setColor(d, d._i, _data[j].key); }) .style("fill-opacity", function(d, i) { return 0; }) .transition().duration(duration) .attr("cx", function(d, i) { return calcX(d.value, 0, i); }) .attr("cy", function(d, i) { return calcY(d.value, 0, i); }) update_radarCircle.exit().remove(); update_radarCircle .transition().duration(duration) .style("fill", function(d, i, j) { return setColor(d, d._i, _data[j].key); }) .style("fill-opacity", function(d, i, j) { var key = data.map(function(m) { return m.key })[j]; return options.areas.filter.indexOf(key) >= 0 ? 0 : 0.8; }) .attr("r", options.areas.dotRadius) .attr("cx", function(d, i) { return calcX(d.value, 0, i); }) .attr("cy", function(d, i) { return calcY(d.value, 0, i); }) var update_blobCircleWrapper = hover_node.selectAll(".radarCircleWrapper") .data(_data, get_key) update_blobCircleWrapper .enter().append("g") .attr("class", "radarCircleWrapper") .attr("key", function(d) { return d.key; }); update_blobCircleWrapper.exit() .transition().duration(duration) .style('opacity', 0) .remove() var update_radarInvisibleCircle = update_blobCircleWrapper.selectAll(".radarInvisibleCircle") .data(function(d, i) { return add_index(d._i, d.values); }); update_radarInvisibleCircle.enter() .append("circle") .attr("class", "radarInvisibleCircle") .attr("r", options.areas.dotRadius * 1.5) .attr("cx", function(d, i) { return calcX(d.value, 0, i); }) .attr("cy", function(d, i) { return calcY(d.value, 0, i); }) .style("fill", "none") .style("pointer-events", "all") .on('mouseover', function(d, i) { if (events.radarInvisibleCircle.mouseover) events.radarInvisibleCircle.mouseover(d, i, this); }) .on("mouseout", function(d, i) { if (events.radarInvisibleCircle.mouseout) events.radarInvisibleCircle.mouseout(d, i, this); }) update_radarInvisibleCircle.exit().remove(); update_radarInvisibleCircle .attr("cx", function(d, i) { return calcX(d.value, 0, i); }) .attr("cy", function(d, i) { return calcY(d.value, 0, i); }) if (options.legend.display) { alert("!") var shape = d3.svg.symbol().type(options.legend.symbol).size(150)(); var foo; legend_node.selectAll('cell').remove(); var colorScale = d3.scale.ordinal() .domain(_data.map(function(m) { return m._i; })) .range(_data.map(function(m) { return setColor(m); })); if (d3.legend) { var legendOrdinal = d3.legend.color() .shape("path", shape) .shapePadding(10) .scale(colorScale) .labels(colorScale.domain().map(function(m) { return keyScale(m); })) .on("cellclick", function(d, i) { if (events.legend.mouseclick) events.legend.mouseclick(d, i, this); }) .on("cellover", function(d, i) { if (events.legend.mouseover) events.legend.mouseover(d, i, this); }) .on("cellout", function(d, i) { if (events.legend.mouseout) events.legend.mouseout(d, i, this); }); legend_node .call(legendOrdinal); } } } }); } // REUSABLE FUNCTIONS // ------------------ // calculate average for sorting, add unique indices for color // accounts for data updates and assigns unique colors when possible function dataCalcs() { // this deep copy method has limitations which should not be encountered // in this context _data = JSON.parse(JSON.stringify(data)); var axes = getAxisLabels(_data); var ranges = {}; // filter out axes var d_indices = axes.map(function(m, i) { return (options.axes.filter.indexOf(axes[i]) >= 0) ? i : undefined; }).reverse(); _data.forEach(function(e) { d_indices.forEach(function(i) { if (i >= 0) e.values.splice(i, 1); }); }); // determine min/max range for each axis _data.forEach(function(e) { e.values.forEach(function(d, i) { var range = ranges[axes[i]] ? // already started? ranges[axes[i]] : options.axes.ranges[axes[i]] ? // rande defined in options? options.axes.ranges[axes[i]].slice() : [0, 1]; // default var max = d.value > range[1] ? d.value : range[1]; var min = d.value < range[0] ? d.value : range[0]; ranges[axes[i]] = [min, max]; // update }) }); // convert all axes to range [0,1] (procrustean) _data.forEach(function(e) { e.values.forEach(function(d, i) { if (ranges[axes[i]][0] != 0 && ranges[axes[i]][1] != 1) { var range = ranges[axes[i]]; d.original_value = Number(d.value); d.value = (d.value - range[0]) / (range[1] - range[0]); } if (options.axes.invert.indexOf(axes[i]) >= 0) { d.value = 1 - d.value; } }) }) _data.forEach(function(d) { d['_avg'] = d3.mean(d.values, function(e) { return e.value }); }) _data = options.areas.sort ? _data.sort(function(a, b) { var a = a['_avg']; var b = b['_avg']; return b - a; }) : _data; var color_indices = (function(a, b) { while (a--) b[a] = a; return b })(10, []); var indices = _data.map(function(i) { return i._i }); var unassigned = color_indices.filter(function(x) { return indices.indexOf(x) < 0; }).reverse(); _data = _data.map(function(d, i) { if (d['_i'] >= 0) { return d; } else { d['_i'] = unassigned.length ? unassigned.pop() : i; return d; } }); } function getAxisLabels(dataArray) { return dataArray.length ? dataArray[0].values.map(function(i, j) { return i.axis; }) : []; } function radialCalcs() { var axes = _data.length ? _data[0].values.map(function(i, j) { return i; }) : []; var axisLabels = getAxisLabels(_data); radial_calcs = { // Radius of the outermost circle radius: Math.min((options.width - (options.margins.left + options.margins.right)) / 2, (options.height - (options.margins.bottom + options.margins.top)) / 2), axes: axes, axisLabels: axisLabels, // If the supplied maxValue is smaller than the actual one, replace by the max in the data maxValue: Math.max(options.circles.maxValue, d3.max(_data, function(i) { return d3.max(i.values.map(function(o) { return o.value; })) })) } radial_calcs.total = radial_calcs.axes.length; // The width in radians of each "slice" radial_calcs.angleSlice = radial_calcs.total > 0 ? Math.PI * 2 / radial_calcs.total : 1; //Scale for the radius radial_calcs.rScale = d3.scale.linear() .range([0, radial_calcs.radius]) .domain([0, radial_calcs.maxValue]) // logarithmic scale for the radius radial_calcs.rScale = d3.scale.pow() .exponent(2) .range([0, radial_calcs.radius]) .domain([0, radial_calcs.maxValue]) // d3.scaleLinear() // .domain([0, 10]) // .range([0, 600]); } function modifyList(list, values, valid_list) { if (values.constructor === Array) { values.forEach(function(e) { checkType(e); }); } else if (typeof values != "object") { checkType(values); } else { return chart; } function checkType(v) { if (!isNaN(v) && (function(x) { return (x | 0) === x; })(parseFloat(v))) { checkValue(parseInt(v)); } else if (typeof v == "string") { checkValue(v); } } function checkValue(val) { if (valid_list.indexOf(val) >= 0) { modify(val); } else if (val >= 0 && val < valid_list.length) { modify(valid_list[val]); } } function modify(index) { if (list.indexOf(index) >= 0) { remove(list, index); } else { list.push(index); } } function remove(arr, item) { for (var i = arr.length; i--;) { if (arr[i] === item) { arr.splice(i, 1); } } } } function calcX(value, scale, index) { return radial_calcs.rScale(value ? value : radial_calcs.maxValue * scale) * Math.cos(radial_calcs.angleSlice * index - Math.PI / 2); } function calcY(value, scale, index) { return radial_calcs.rScale(value ? value : radial_calcs.maxValue * scale) * Math.sin(radial_calcs.angleSlice * index - Math.PI / 2); } function setColor(d, index, key) { index = index ? index : d._i; key = key ? key : d.key; return options.areas.colors[key] ? options.areas.colors[key] : options.color(index); } // END REUSABLE FUNCTIONS // ACCESSORS // --------- chart.nodes = function() { return { svg: svg, chart: chart_node, hover: hover_node, tooltip: tooltip_node, legend: legend_node }; } chart.events = function(functions) { if (!arguments.length) return events; var fKeys = Object.keys(functions); var eKeys = Object.keys(events); for (var k = 0; k < fKeys.length; k++) { if (eKeys.indexOf(fKeys[k]) >= 0) events[fKeys[k]] = functions[fKeys[k]]; } return chart; } chart.width = function(value) { if (!arguments.length) return options.width; options.width = value; return chart; }; chart.height = function(value) { if (!arguments.length) return options.height; options.height = value; return chart; }; chart.duration = function(value) { if (!arguments.length) return transition_time; transition_time = value; return chart; } // chart.updateDimensions = function() { // if (updateDimensions && typeof updateDimensions === 'function') // updateDimensions(transition_time); // } chart.update = function() { if (events.update.begin) events.update.begin(_data); if (typeof updateData === 'function') updateData(); setTimeout(function() { if (events.update.end) events.update.end(_data); }, transition_time); } chart.data = function(value) { if (!arguments.length) return data; data = value; return chart; }; chart.pop = function() { return data.pop(); }; chart.push = function(row) { if (row && row.constructor === Array) { for (var i = 0; i < row.length; i++) { check_key(row[i]); } } else { check_key(row); } function check_key(one_row) { if (one_row.key && data.map(function(m) { return m.key }).indexOf(one_row.key) < 0) { data.push(one_row); } } return chart; }; chart.shift = function() { return data.shift(); }; chart.unshift = function(row) { if (row && row.constructor === Array) { for (var i = 0; i < row.length; i++) { check_key(row[i]); } } else { check_key(row); } function check_key(one_row) { if (one_row.key && data.map(function(m) { return m.key }).indexOf(one_row.key) < 0) { data.unshift(one_row); } } return chart; }; chart.slice = function(begin, end) { return data.slice(begin, end); }; // allows updating individual options and suboptions // while preserving state of other options chart.options = function(values) { if (!arguments.length) return options; var vKeys = Object.keys(values); var oKeys = Object.keys(options); for (var k = 0; k < vKeys.length; k++) { if (oKeys.indexOf(vKeys[k]) >= 0) { if (typeof(options[vKeys[k]]) == 'object') { var sKeys = Object.keys(values[vKeys[k]]); var osKeys = Object.keys(options[vKeys[k]]); for (var sk = 0; sk < sKeys.length; sk++) { if (osKeys.indexOf(sKeys[sk]) >= 0) { options[vKeys[k]][sKeys[sk]] = values[vKeys[k]][sKeys[sk]]; } } } else { options[vKeys[k]] = values[vKeys[k]]; } } } return chart; } chart.margins = function(value) { if (!arguments.length) return options.margins; var vKeys = Object.keys(value); var mKeys = Object.keys(options.margins); for (var k = 0; k < vKeys.length; k++) { if (mKeys.indexOf(vKeys[k]) >= 0) options.margins[vKeys[k]] = value[vKeys[k]]; } return chart; } chart.levels = function(value) { if (!arguments.length) return options.circles.levels; options.circles.levels = value; return chart; } chart.maxValue = function(value) { if (!arguments.length) return options.circles.maxValue; options.circles.maxValue = value; return chart; } chart.opacity = function(value) { if (!arguments.length) return options.areas.opacity; options.areas.opacity = value; return chart; } chart.borderWidth = function(value) { if (!arguments.length) return options.areas.borderWidth; options.areas.borderWidth = value; return chart; } chart.rounded = function(value) { if (!arguments.length) return options.areas.rounded; options.areas.rounded = value; return chart; } // range of colors to set color based on index chart.color = function(value) { if (!arguments.length) return options.color; options.color = value; return chart; } // colors set according to data keys chart.colors = function(colores) { if (!arguments.length) return options.areas.colors; options.areas.colors = colores; return chart; } chart.keys = function() { return data.map(function(m) { return m.key }); } chart.axes = function() { return getAxisLabels(data); } // add or remove keys (or key indices) to filter axes chart.filterAxes = function(values) { if (!arguments.length) return options.axes.filter; var axes = getAxisLabels(data); modifyList(options.axes.filter, values, axes); return chart; } // add or remove keys (or key indices) to filter areas chart.filterAreas = function(values) { if (!arguments.length) return options.areas.filter; var keys = data.map(function(m) { return m.key }); modifyList(options.areas.filter, values, keys); return chart; } // add or remove keys (or key indices) to invert chart.invert = function(values) { if (!arguments.length) return options.axes.invert; var axes = getAxisLabels(data); modifyList(options.axes.invert, values, axes); return chart; } // add or remove ranges for keys chart.ranges = function(values) { if (!arguments.length) return options.axes.ranges; if (typeof values == "string") return chart; var axes = getAxisLabels(data); if (values && values.constructor === Array) { values.forEach(function(e) { checkRange(e); }); } else { checkRange(values); } function checkRange(range_declarations) { var keys = Object.keys(range_declarations); for (var k = 0; k < keys.length; k++) { if (axes.indexOf(keys[k]) >= 0 // is valid axis && range_declarations[keys[k]] // range array not undefined && range_declarations[keys[k]].constructor === Array && checkValues(keys[k], range_declarations[keys[k]])) { options.axes.ranges[keys[k]] = range_declarations[keys[k]]; } } } function checkValues(key, range) { if (range.length == 2 && !isNaN(range[0]) && !isNaN(range[1])) { return true; } else if (range.length == 0) { delete options.axes.ranges[key]; } return false; } return chart; } // END ACCESSORS // DEFAULT EVENTS // -------------- function areaMouseover(d, i, self) { //Dim all blobs d3.selectAll(".radarArea") .transition().duration(200) .style("fill-opacity", function(d, i, j) { return options.areas.filter.indexOf(d.key) >= 0 ? 0 : 0.1; }); //Bring back the hovered over blob d3.select(self) .transition().duration(200) .style("fill-opacity", function(d, i, j) { return options.areas.filter.indexOf(d.key) >= 0 ? 0 : 0.7; }); } function areaMouseout(d, i, self) { //Bring back all blobs d3.selectAll(".radarArea") .transition().duration(200) .style("fill-opacity", function(d, i, j) { return options.areas.filter.indexOf(d.key) >= 0 ? 0 : options.areas.opacity; }); } // on mouseover for the legend symbol function legendMouseover(d, i, self) { var area = keys.indexOf(d) >= 0 ? d : keyScale(d); //Dim all blobs d3.selectAll(".radarArea") .transition().duration(200) .style("fill-opacity", function(d, i, j) { return options.areas.filter.indexOf(d.key) >= 0 ? 0 : 0.1; }); //Bring back the hovered over blob d3.selectAll(".radarArea." + area.replace(/\W/g, '')) .transition().duration(200) .style("fill-opacity", function(d, i, j) { return options.areas.filter.indexOf(d.key) >= 0 ? 0 : 0.7; }); } function legendClick(d, i, self) { var keys = data.map(function(m) { return m.key }); modifyList(options.areas.filter, keys[d], keys); updateData(); var state = d3.select(self).select('path').attr('toggle'); if (state == 'true') { var shape = d3.svg.symbol().type(options.legend.symbol).size(150)() } else { var shape = d3.svg.symbol().type(options.legend.toggle).size(150)() } d3.select(self).select('path') .attr('toggle', state == 'true' ? 'false' : 'true') .attr('d', function(d, i) { return shape; }); } function tooltip_show(d, i, self) { var value = d.original_value ? d.original_value : Format(d.value); var newX = parseFloat(d3.select(self).attr('cx')) - 10; var newY = parseFloat(d3.select(self).attr('cy')) - 10; tooltip .attr('x', newX) .attr('y', newY) .text(value) .transition().duration(200) .style('opacity', 1); } function tooltip_hide() { tooltip .transition().duration(200) .style("opacity", 0); } // Helper Functions // ---------------- function add_index(key, values) { for (var v = 0; v < values.length; v++) { values[v]['_i'] = key; } return values; } var get_key = function(d) { return d && d.key; }; var get_axis = function(d) { return d && d.axis; }; // Wraps SVG text // modification of: http://bl.ocks.org/mbostock/7555321 function wrap(text, width) { text.each(function(d, i, j) { var text = d3.select(this); var words = d.axis.split(/\s+/).reverse(); var word; var line = []; var lineNumber = 0; var lineHeight = 1.4; // ems var x = calcX(null, options.circles.labelFactor, j); var y = calcY(null, options.circles.labelFactor, j); var dy = parseFloat(text.attr("dy")); var tspan = text.text(null).append("tspan").attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan").attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); } } }); } return chart; } 34:[] 2f:{"id":"1a1b823646b2e423","slug":null,"title":"Radar chart with dynamic .csv binding and static image generator","thumbnail":"614f2913933446db266c9ffe46314121fd5f25074d295a4852799d197d4ad466","access_level":"public","create_time":"$D2023-10-27T23:24:07.769Z","update_time":"$D2023-10-27T23:24:07.769Z","view_time":null,"first_public_time":"$D2023-10-27T23:24:07.769Z","has_unpublished_edits":null,"fork":{"id":"a30e3ad35808acfe","slug":"radar-chart-generator","title":"Radar chart with dynamic .csv binding and static image generator","owner":{"id":"c53761f873c0cf85","login":"bradysheridan","name":"Brady Sheridan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f1de0844e9cff86a","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":"starter_2024"},"version":900,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"04c32d8a18696e81","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":null}],"members":[{"type":"individual","id":"04c32d8a18696e81","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Radar chart with dynamic .csv binding and static image generator","cells":[{"id":757,"value":"md`# Radar chart with dynamic .csv binding and static image generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"html`\n

\n Paste .csv data into the field below, or experiment by tweaking existing values.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof csv = html`\n group,Axis 1,Axis 2,Axis 3,Axis 4,Axis 5\nGroup 1,75,27,56,78,38\nGroup 2,44,31,76,55,94\nGroup 3,61,72,72,55,12\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"html`\n

\n You can use this button to download a static version of the visible chart.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"html`

Download

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"html`\n

\n This chart will update to reflect your changes.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"html`\n

\n Anything below this point is code. You can ignore it, unless you're curious!\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"download = d3.select('#download').on('click', () => {\n let size = d3.select(\"#chart\").node().getBoundingClientRect(),\n content = d3.select(\"#chart\").html(),\n cloneId = `clone-${Math.random()}`,\n filename = \"radar-chart.png\"\n \n let div = d3.select('body').append('div')\n .html(content)\n .attr('class', 'clone')\n .attr('id', cloneId)\n .style({\n 'width': `${size.width * 3}px`,\n 'height': `${size.height * 3}px`,\n 'background-color': 'white',\n 'display': 'flex',\n 'justify-content': 'center',\n 'align-items': 'center'\n })\n \n let svg = div.select('svg')\n .attr('transform', 'scale(3)')\n\n // download image\n domToImage\n .toBlob(div.node())\n .then((blob) => fileSaver.saveAs(blob, filename))\n .catch((err) => console.error(err))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"function format(data) {\n let groups = [],\n axes = []\n \n data.forEach((d) => {\n // populate groups\n if (!groups.includes(d.group)) groups.push(d.group)\n \n // populate axes\n Object.keys(d).filter((k) => k !== \"group\").forEach((axis) => {\n if (!axes.includes(axis)) axes.push(axis)\n })\n })\n \n return data.map((o) => ({\n key: o.group,\n values: Object.keys(o).filter((k) => k !== \"group\").map((axis) => ({\n axis,\n value: parseFloat(o[axis]) / 100\n }))\n }))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"radar = RadarChart()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"d3.select(\"#chart\").call(radar)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"chartConfig = ({\n data: format(d3.csv.parse(csv)),\n duration: 750,\n options: {\n areas: { sort: false },\n circles: { labelFactor: 1.1 },\n margins: { top: 100, right: 100, bottom: 100, left: 100 },\n filter: 'glow',\n width: 700,\n height: 700,\n color: d3.scale.category10()\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"radar\n .options(chartConfig.options)\n .data(chartConfig.data)\n .duration(chartConfig.duration)\n .update()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"html`\n

\n Imports\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"import {button} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"d3 = require('d3@^3.5.6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"legend = require('https://bundle.run/d3-svg-legend@1.3.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"d3.legend = legend.legend","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"domToImage = require('https://bundle.run/dom-to-image@2.6.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"fileSaver = require('https://bundle.run/file-saver@2.0.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"