30:T4b2,flower_chart = { var elm = html``; return elm; }31:T120c,update_flower_chart = { var dom_node = d3.select(flower_chart).style('display', 'block'); var updateHeight = () => { mutable calculated_height = getHeight(); }; window.onresize = updateHeight; //event handlers.. var switcher = dom_node.select(".switched"); switcher.select('.alpha').on('click', function() { dom_node.select('.switched').classed('alpha', true); dom_node.select('.switched').classed('ranked', false); mutable sortKey = "key"; }); switcher.select('.ranked').on('click', function() { dom_node.select('.switched').classed('alpha', false); dom_node.select('.switched').classed('ranked', true); mutable sortKey = "Main"; }); switcher.select('.flowering').on('click', function() { dom_node.select('.switched').classed('flowering', true); dom_node.select('.switched').classed('budding', false); mutable abMode = false; }); switcher.select('.budding').on('click', function() { dom_node.select('.switched').classed('flowering', false); dom_node.select('.switched').classed('budding', true); mutable abMode = true; }); //set width and height of the chart dom_node.attr("height", calculated_height + margin.top + margin.bottom); dom_node .select('svg') .attr("width", calculated_width + margin.left + margin.right) .attr("height", calculated_height + margin.top + margin.bottom); //chart mode selection dom_node .select('svg') .select(".root") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .classed('abMode', abMode); //setup flowers var countries = dom_node .select('svg') .select(".root") .selectAll(".countries") .data(aggregated_data, d => d.key); //enters var countryEnter = countries .enter() .append("g") .attr("class", "countries") .attr("data-name", d => d['key']) .attr("transform", function(d) { var xd = x(d.key) + x.bandwidth() / 2; var yd = y(0); return "translate(" + xd + "," + yd + ")"; }); countryEnter .transition() .duration(3 * 1e3) .attr("transform", function(d) { var xd = x(d.key) + x.bandwidth() / 2; var yd = y(d["Main"]); return "translate(" + xd + "," + yd + ")"; }); countryEnter .append('rect') .attr("class", "hoverhelper") .attr("x", -x.bandwidth() / 2 - paddingInPixel) .attr("y", function(d) { return -y(d["Main"]); }) .attr("width", x.bandwidth() + paddingInPixel * 2) .attr("height", function(d) { return calculated_height; }) .attr("fill", "rgba(0,0,0,0)"); countryEnter .append('rect') .attr("class", "bar") .attr("width", 1) .attr("height", function(d) { return calculated_height - y(d["Main"]); }) .style('fill', "url(#grad)"); countryEnter .append('g') .attr("class", "flower") .call(flowerBloomer); countryEnter .append('g') .attr("class", "plotab") .call(plotAB); countryEnter .append('text') .attr("class", "labelBg") .attr("letter-spacing", 1) .text(function(d) { return d.key; }); countryEnter .append('text') .attr("class", "label") .attr("letter-spacing", 1) .text(function(d) { return d.key; }); /* countryEnter.on("mouseenter", function(d) { mutable hovered = [d.key]; dom_node.selectAll(".countries").classed('hover', a => a.key == d.key); d3.select(this).each(function() { this.parentNode.appendChild(this); }); }); countryEnter.on("mouseleave", function(d) { mutable hovered = []; d3.select(this).classed('hover', 0); }); */ countryEnter.on("click", function(d) { if (mutable hovered[0] == d.key) { mutable hovered = []; d3.select(this).classed('hover', 0); } else { mutable hovered = [d.key]; dom_node.selectAll(".countries").classed('hover', a => a.key == d.key); d3.select(this).each(function() { this.parentNode.appendChild(this); }); } }); //updates only countries .transition() .duration(1 * 1e3) .attr("transform", function(d) { var xd = x(d.key) + x.bandwidth() / 2; var yd = y(d["Main"]); return "translate(" + xd + "," + yd + ")"; }); countries.select('.bar').attr("height", function(d) { return calculated_height - y(d["Main"]); }); countries.select('.flower').call(flowerBloomer); countries.select('.plotab').call(plotAB); //exits countries.exit().remove(); // update the y Axis dom_node.select(".leftaxis").call(d3.axisLeft(y).ticks(4)); return "Flower Chart Updated!"; }32:T9af,function flowerBloomer(flower) { var petelLength = d3.scaleLinear().range([0, 30]); var attribs = Object.keys(weights); var pie = d3 .pie() .sort(null) .padAngle(0.09) .value(d => d)(Object.values(weights)); if (flower.selectAll('*').empty()) { //create flower .append('circle') .attr('class', 'flowerbg') .attr('r', 40) .style('fill', "url(#radgrad)"); flower .selectAll('.petels') .data(function(d) { return attribs.map(a => { return { name: a, value: d.values.filter(v => v.Attribute == a)[0]["Main"] }; }); }) .enter() .append('g') .attr('class', 'petels') .attr('data-attribute', d => d.name) .append('path') .attr('d', (p, i) => { var pied = pie[i]; var val = petelLength(p.value); var sa = pied.startAngle + pied.padAngle; var ea = pied.endAngle - pied.padAngle; var ang = Math.min(sa, ea) + (Math.max(sa, ea) - Math.min(sa, ea)) / 2; return d3 .line() .curve(d3.curveBundle.beta(1)) .x(k => k[0]) .y(k => k[1])([ [0, 0], [val * 0.8 * Math.sin(sa), val * 0.8 * Math.cos(sa)], [val * 1.2 * Math.sin(ang), val * 1.2 * Math.cos(ang)], [val * 0.8 * Math.sin(ea), val * 0.8 * Math.cos(ea)], [0, 0] ]); }) .attr('transform', (p, i) => { return `translate(0 25) rotate(${((pie[i].startAngle + pie[i].padAngle) * 180) / Math.PI - 165})`; }); } //update only flower .selectAll('.petels path') .attr('fill', p => { return colors(p.name); }) .transition() .attr('d', (p, i) => { var pied = pie[i]; var val = petelLength(p.value); var sa = pied.startAngle + pied.padAngle; var ea = pied.endAngle - pied.padAngle; var ang = Math.min(sa, ea) + (Math.max(sa, ea) - Math.min(sa, ea)) / 2; return d3 .line() .curve(d3.curveBundle.beta(1)) .x(k => k[0]) .y(k => k[1])([ [0, 0], [val * 0.8 * Math.sin(sa), val * 0.8 * Math.cos(sa)], [val * 1.2 * Math.sin(ang), val * 1.2 * Math.cos(ang)], [val * 0.8 * Math.sin(ea), val * 0.8 * Math.cos(ea)], [0, 0] ]); }) .delay(1 * 1e3) .duration(3 * 1e3) .attr('transform', "translate(0 0) rotate(0)"); }33:T632,stylesheet = ` #App{ position:relative; width:100%; height:100%; overflow:hidden; } .leftaxis { color: #999999; font-weight: 600; } .leftaxis .domain { display: none; } .countries text.label, .countries text.labelBg { fill: #333; font-size: 10.5px; text-anchor: end; transform: translate(2.9px, 40px) rotate(-90deg); /* transform: translate(0px, 30px); writing-mode: tb; glyph-orientation-vertical: 0; writing-mode: vertical-rl; text-orientation: upright; font-stretch: condensed; */ } .labelBg { stroke-width: 4px; stroke: #fff; fill: #fff; } .petels path { stroke: #1b1b1b; stroke-width: 0.2px; } .plotab { display: none; } .abMode .plotab { display: block; } .abMode .flower { display: none; } .countries .flowerbg { pointer-events: none; display: none; } .countries .nodeA, .countries .nodeB { opacity: 0.9; } .countries.hover .flowerbg { display: block; } .countries.hover .nodeA, .countries.hover .nodeB { opacity: 1; stroke: #fff; stroke-width: 2px; } .countries.hover .bar { fill: #333 !important; } .switched { display: inline-block; position: absolute; bottom: 6px; right: 6px; font-size: 12px; color: #999; z-index: 100; } .switched .alpha, .switched .ranked, .switched .flowering, .switched .budding { cursor: pointer; } .switched .alpha:hover, .switched .ranked:hover, .switched .flowering:hover, .switched .budding:hover { text-decoration: underline; } .switched.alpha .alpha, .switched.ranked .ranked, .switched.flowering .flowering, .switched.budding .budding { color: #1D5278; } `34:[{"id":"d7bbcf7fb6491e42e9e51263afc70e8126136c16f5ef922280d1d5ac8b53290f5c33eb444ea24feb20ceff76226b6b19440d0ba1d67480817ea18bcbb16f90c0","href":"https://static.observableusercontent.com/files/d7bbcf7fb6491e42e9e51263afc70e8126136c16f5ef922280d1d5ac8b53290f5c33eb444ea24feb20ceff76226b6b19440d0ba1d67480817ea18bcbb16f90c0","name":"flower-chart-sample-data.json","type":"application/json","lastModified":1579806738992.644,"size":58840}] 2e:{"title":"Flower Chart Visual","cells":[{"id":0,"value":"md`# Flower Chart Visual`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`### Visual`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"is_embed = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"mutable hovered = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"colors = d3\n .scaleOrdinal()\n .range([\n \"#38A348\",\n \"#FBD955\",\n \"#E01750\",\n \"#1C83A9\",\n \"#32C77F\",\n \"#999999\",\n \"#FF736C\",\n \"#16DDF6\",\n \"#1D5278\",\n \"#333333\",\n \"#B21847\"\n ])\n .domain(Object.keys(weights))","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"margin = ({ top: 40, right: 10, bottom: 10, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"mutable sortKey = \"key\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"mutable abMode = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"x = d3\n .scaleBand()\n .range([0, calculated_width])\n .padding(0.4)\n .domain(\n aggregated_data.map(function(d) {\n return d.key;\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"paddingInPixel = x.bandwidth() * x.padding()","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"y = d3\n .scaleLinear()\n .range([calculated_height, 0])\n .domain([\n 0,\n d3.max(aggregated_data, function(d) {\n return Math.max(d[\"Main\"], d[\"A\"], d[\"B\"]);\n })\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"function plotAB(bud) {\n if (bud.selectAll('*').empty()) {\n //create\n bud\n .append('circle')\n .attr('class', 'nodeA')\n .attr('r', 4)\n .style('fill', \"#253356\");\n bud\n .append('circle')\n .attr('class', 'nodeB')\n .attr('r', 4)\n .style('fill', \"#FF736C\");\n bud\n .append('circle')\n .attr('class', 'nodeCenter')\n .attr('r', 2)\n .style('fill', \"#999\");\n }\n //update only\n bud.select('.nodeA').attr('cy', function(d) {\n return calculated_height - y(d.Main - d.A);\n });\n bud.select('.nodeB').attr('cy', function(d) {\n return calculated_height - y(d.Main - d.B);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"aggregated_data = {\n function balanceweights(w) {\n var sum = d3.sum(Object.values(w));\n var len = Object.keys(w).length;\n var n = {};\n Object.keys(w).map(d => {\n n[d] = w[d] / (sum / len);\n });\n return n;\n }\n var balancedWeights = balanceweights(weights);\n var agg = d3\n .nest()\n .key(function(d) {\n return d[\"Name\"];\n })\n .entries(data)\n .map(function(country) {\n country['Main'] =\n 10 *\n d3.mean(\n country.values.map(d => balancedWeights[d['Attribute']] * +d['Main'])\n );\n country['A'] =\n 10 *\n d3.mean(\n country.values.map(d => balancedWeights[d['Attribute']] * +d['A'])\n );\n country['B'] =\n 10 *\n d3.mean(\n country.values.map(d => balancedWeights[d['Attribute']] * +d['B'])\n );\n return country;\n });\n agg = agg.sort(function(a, b) {\n return d3.ascending(a[sortKey], b[sortKey]);\n });\n return agg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"weights = {\n var tmp = {};\n d3.nest()\n .key(d => d.Attribute)\n .entries(data)\n .map(d => (tmp[d.key] = +d.values[0][\"Weight\"]));\n\n return tmp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"calculated_width = {\n if (is_embed) {\n return document.documentElement.clientWidth - margin.left - margin.right;\n } else {\n return width - margin.left - margin.right;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"mutable calculated_height = getHeight()","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"function getHeight() {\n return (\n (is_embed\n ? Math.max(document.documentElement.clientHeight, window.innerHeight || 0)\n : 500) -\n margin.top -\n margin.bottom\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`### Sample data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"data = FileAttachment('flower-chart-sample-data.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"d3 = require(\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}