2f:T653,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); const yG = svg.append("g").attr("stroke-width", 0); let node = svg.append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.deforestation)) .attr("cy", d => y(d.group) + y.bandwidth() / 2) .attr("r", d => r(d.volume)) .attr("stroke", "white") .attr("stroke-width", 1) .attr("fill", d => colour(d.deforestation)); const simulation = d3.forceSimulation() .force("x", d3.forceX(d => x(d.deforestation))) .force("y", d3.forceY(d => y(d.group) + y.bandwidth() / 2)) .force("collide", d3.forceCollide(d => r(d.volume) + 1).strength(0.3)); simulation.on("tick", () => { node .transition() .delay((d, i) => d.x) .ease(d3.easeLinear) .attr("cx", d => d.x) .attr("cy", d => d.y) }); invalidation.then(() => simulation.stop()); return Object.assign(svg.node(), { update(split) { let height = split ? 800 : 400; y.domain(split ? groups : groups.concat("ALL")); // workaround for updating the yAxis y.range(split ? [margin.top, height - margin.bottom] : [height / 2, height / 2]); let ticks = split ? groups : ["ALL"]; const t = svg.transition().duration(750); svg.transition(t).attr("viewBox", [0, 0, width, height]) ; yG.transition(t).call(yAxis, y, ticks); simulation.nodes(data); // update nodes simulation.alpha(1).restart(); // restart simulation } }); }30:[{"id":"10d954ccf1af6429b298b3b0c9aa0bce70d77af0d62674a6ee6a16338da769c8b2e40b34bea4514b5508bd51b6f637891b62eb06fe419b818880c36d0cbfba02","href":"https://static.observableusercontent.com/files/10d954ccf1af6429b298b3b0c9aa0bce70d77af0d62674a6ee6a16338da769c8b2e40b34bea4514b5508bd51b6f637891b62eb06fe419b818880c36d0cbfba02","name":"data.json","type":"application/json","lastModified":1678508659352.793,"size":18203}] 2d:{"title":"Splitting the bunch","cells":[{"id":0,"value":"md`# Splitting the bunch\n\nUsing [d3.force](https://github.com/d3/d3-force) to create a layout like the one in [this New York Times article](https://archive.nytimes.com/www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html?_r=1). Data on Indonesian palm oil exporters (and their groups) from [Trase](https://trase.earth).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"toggle = {\n chart.update(false)\n return html` chart.update(false)}>All exporters\n chart.update(true)}>Split by group`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1194,"value":"height = 400 // initial height","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"margin = ({top: 50, right: 100, bottom: 50, left: 200})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1042,"value":"data = FileAttachment(\"data.json\").json().then(data => data.map((d, i) => ({id: i + 1, ...d})))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1192,"value":"groups = [...new Set(data.map(d => d.group))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.deforestation))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"y = d3.scaleBand()\n .domain(groups)\n .range([height / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0, ${margin.top})`)\n .call(d3.axisTop(x).ticks(4))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"Commodity deforestation (ha) →\")\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"yAxis = (g, scale = y, ticks = y.domain()) =>\n g\n .attr(\"transform\", `translate(${30}, 0)`)\n .call(d3.axisLeft(scale).tickValues(ticks))\n .call(g => g.style(\"text-anchor\", \"start\"))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"r = d3.scaleSqrt()\n .domain(d3.extent(data, d => d.volume))\n .range([3, 30])","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"colour = d3.scaleSequential(d3.extent(data, d => d.deforestation), d3.interpolateViridis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1207,"value":"html = (await require(\"htl@0.2\")).html","pinned":true,"hidden":false,"mode":"ojs"},{"id":967,"value":"// data = client.query(`\n// WITH top AS (\n// SELECT exporter_group, SUM(volume) AS volume\n// FROM views.datasets\n// WHERE latest_dataset = TRUE\n// AND country_of_production = 'INDONESIA'\n// AND commodity = 'PALM OIL'\n// AND country_of_production != country_of_import\n// AND year = 2015\n// GROUP BY exporter_group\n// ORDER BY volume DESC\n// LIMIT 5\n// )\n// SELECT\n// CASE WHEN exporter_group = ANY(SELECT exporter_group FROM top) \n// THEN exporter_group\n// ELSE 'OTHER' END AS group,\n// exporter,\n// SUM(volume) AS volume,\n// SUM(commodity_deforestation) AS deforestation\n// FROM views.datasets\n// WHERE latest_dataset = TRUE\n// AND country_of_production = 'INDONESIA'\n// AND commodity = 'PALM OIL'\n// AND country_of_production != country_of_import\n// AND year = 2015\n// GROUP BY exporter_group, exporter\n// ORDER BY volume DESC`)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}