31:T851,chart = { const svg = d3.create('svg').attr('viewBox', [0, 0, w, h]); const legend = svg.append('g') .attr('class', 'legend') .attr('transform', `translate(${w - 105}, 40)`); appendLegendItems(); const voivodeships = svg.append('g') .selectAll('.voivodeship') .data(baseCoords.features) .join('path') .attr('class', 'voivodeship') .attr('d', d => path(d.geometry.coordinates[0])) .attr('fill', d => color(d.value)) .call(path => path.append('title').text(d => `${d.name}: ${d.value}%`)); const names = svg.append('g') .selectAll('.name') .data(baseCoords.features) .join('text') .attr('class', 'name') .attr('x', margin.left + 5) .attr('y', (d, i) => y(i) + 13) .text(d => d.name); const labels = svg.append('g') .selectAll('.label') .data(baseCoords.features) .join('text') .attr('class', 'label') .attr('x', d => barWidth(d.value) + margin.left + 4) .attr('y', (d, i) => y(i) + 13) .text(d => d.value + '%'); function appendLegendItems() { d3.range(color.domain().length).forEach((i) => { legend.append('g') .attr('class', 'legend-item') .call( g => g.append('circle') .attr('cx', i * 32.5) .attr('r', 17.5) .style('fill', color.range()[i]) ) .call( g => g.append('text') .attr('x', i * 32.5) .attr('y', 30) .text(color.domain()[i] + '%') ) }); }; return Object.assign(svg.node(), { morph(type) { if (type == 'bar') { legend.transition().duration(1750).style('opacity', 0); names.transition().duration(1250).delay(1000).style('opacity', 1); labels.transition().duration(1250).delay(1000).style('opacity', 1); } else { legend.transition().duration(1750).style('opacity', 1); names.transition().duration(750).style('opacity', 0); labels.transition().duration(750).style('opacity', 0); }; morphVoivodeships(voivodeships, type); return 'Morphing!'; } }); }32:T93b,rectangle = (coords, config = { x: 0, y: 0 }) => { let rectangle = [], polygon = d3.polygonHull(coords), p0 = coords[0], [yMin, yMax] = d3.extent(coords, d => d[1]), i = 0, n = coords.length, cp, // closest point cpi // closest point index let area = d3.polygonArea(polygon), centroid = d3.polygonCentroid(coords), // By default, the area of the rectangle will be equal to area of // initial shape. In order to limit the number of infinite possibilities // to select a and b, b will always be set to the extent of y coords. b = config.height || yMax - yMin, a = config.width || area / b, xMin = centroid[0] - a / 2, xMax = centroid[0] + a / 2; yMin = centroid[1] - b / 2; yMax = centroid[1] + b / 2; const length = Math.floor(n / 4); // Going clockwise with rectangle's sides. const sides = [ // top ...Array.from({length}).map((d, i) => [xMin + a * i / length, yMin]), // right ...Array.from({length}).map((d, i) => [xMax, yMin + b * i / length]), // bottom ...Array.from({length}).map((d, i) => [xMax - a * i / length, yMax]), // left ...Array.from({length: length + (n - length * 4)}).map((d, i) => [xMin, yMax - b * i / length]) ]; // Looking for the point on the rectangle's sides which is closest to the // first point of a given shape. while (++i < n) { const dx = p0[0] - sides[i][0]; const dy = p0[1] - sides[i][1]; const d = Math.sqrt(dx * dx + dy * dy); if (d < cp || !cp) { cp = d; cpi = i; }; }; // The shape will morph starting from the closest point, going clockwise side by side. rectangle.push( ...sides.slice(cpi, n), ...sides.slice(0, cpi) ); return { coords: rectangle, // The below line is more important than it seems - by default (most often during // initial shape -> bar chart morph), the shape tweens is ugly looking way: e.g. // the line is flipping, the whole transition doesn't look natural. However, // when we morph the shape with respect to its centroid, the transition looks // as it should - that's why the shape always morphs with respect to its centroid, // and is translated to given x and y coords along the way. translate: `translate(${config.x > 0 ? config.x - xMin : 0}, ${config.y > 0 ? -yMin + config.y : 0})` }; }33:T4b7,// Overlapping prevention comes from https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted. prepareInitialCoords = baseCoords => { baseCoords.features .forEach(c => { c.name = c.properties.nazwa.toUpperCase(); c.value = data.filter(d => d.name == c.name)[0].value; const coords = c.geometry.coordinates[0].map(projection); c.geometry.coordinates[0] = coords; c.centroid = d3.polygonCentroid(coords); c.centroidHull = d3.polygonCentroid(d3.polygonHull(coords)); c.radius = Math.sqrt(Math.abs(d3.polygonArea(coords)) / Math.PI); }); const simulation = d3.forceSimulation(baseCoords.features) .force('x', d3.forceX().x(d => d.centroid[0]).strength(0.3)) .force('y', d3.forceY().y(d => d.centroid[1]).strength(0.3)) .force('charge', d3.forceManyBody().strength(-1)) .force('collide', d3.forceCollide().radius(d => d.radius).strength(1)) .stop(); let i = 0; while (simulation.alpha() > 0.01 && i < 200) { simulation.tick(); i++; }; const result = {type: 'FeatureCollection', features: simulation.nodes()}; result.features = result.features.sort((a, b) => a.value - b.value) return result; }34:[{"id":"baaa2c98d6ea13e98d72ceb0fdb7df74059589b62779934b2cf5e9e53a421db1b8644a0e96dbe17db22f5755dab3f012bdc5da87aefe685df610cc7e9eca30a1","href":"https://static.observableusercontent.com/files/baaa2c98d6ea13e98d72ceb0fdb7df74059589b62779934b2cf5e9e53a421db1b8644a0e96dbe17db22f5755dab3f012bdc5da87aefe685df610cc7e9eca30a1","name":"coords.json","type":"application/json","lastModified":1603911996669.481,"size":147486},{"id":"d22ea4dba9e786664c3da951f5f1ea1ea8838858ff5b942c715481f8ff152bd90851c53e90579c20b25cba0866da932c90066ab47b10b829dc4f9eb8f7e5f234","href":"https://static.observableusercontent.com/files/d22ea4dba9e786664c3da951f5f1ea1ea8838858ff5b942c715481f8ff152bd90851c53e90579c20b25cba0866da932c90066ab47b10b829dc4f9eb8f7e5f234","name":"data.csv","type":"text/csv","lastModified":1603913244313.908,"size":325}] 2f:{"title":"Short Tale of a Country That Liked to Change Shape","cells":[{"id":0,"value":"md`# Short Tale of a Country That Liked to Change Shape`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`*Who wouldn't like to be a circle?*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`---\n## Goal\nA long time ago, I came across a data visualization that stuck in my head and — in fact — inspired me to dive into making charts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"md`It was a part of a scrollytelling article: the map which was shown next to the text seamlessly transformed into a bar chart as I was scrolling.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"md`Unfortunately, I didn't save the link to the article and I couldn't find it afterwards, so I have decided to try to recreate this behavior.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"md`---\n## Approach`","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"md`I started working on this notebook by trying to morph original shapes (voivodeships, the highest-level administrative subdivisions of Poland) into rectangles, by finding minimal and maximal values of x and y.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"md`The next step was to calculate the points on the boundaries of that imaginary rectangle in the number which was equal to the number of coordinates in the original shape and... use a transition to transform it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"md`The best thing which can be said about this approach is that after the transition finished, there was a rectangle — but everything in between was a complete disaster. The animation was shaky and buggy — it turned out that this wasn't the best way to approach this problem.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"md`After some research I came across Mike Bostock's post about shape tweening. After going through it, I realized that the new path **has to start as close as possible to the starting coordinate of the old one**. This was a breakthrough — constructing the rectangle in the same manner every time wasn't making a lot of sense.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"md`I slightly modified Mike's code for morphing shapes into circles to automatically find the closest point for each shape, and after that I wrote a function to transform them into rectangles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"md`The default approach makes sure that the area of both circles and rectangles is the same as the area of the original shape; what's more is that the shape's centroid also stays in place (besides the circle layout to prevent overlapping [based on this example]).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`But in order to achieve my initial goal of morphing voivodeships into a bar chart, I had to implement additional features to the rectangle function, to be able to set width, height and starting x & y coordinates of the rect.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"md`The resulting animation was looking ok-ish, but it still didn't satify me, as for some of the shapes, the lines were being inverted along the way. After spending some time thinking about the solution, it became clear that the shape has to morph with respect to its centroid and be translated at the same time, so the animation will look as expected each time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"md`Happy morphing!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"md`---\n## Dynamics of retail sales of motor vehicles and auto parts in Poland in September 2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"md`*In comparison to September 2019.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"viewof type = radio({\n title: 'Shape type',\n description: 'Morph them all.',\n options: ['initial', 'circle', 'rectangle', 'bar'],\n value: 'initial'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"chart.morph(type)","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"h = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"margin = ({\n top: 100,\n right: 75,\n bottom: 100,\n left: 75\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"barWidth = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)])\n .range([0, w - margin.right - margin.left])","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"y = d3.scaleLinear()\n .domain([0, data.length])\n .range([margin.top, h - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"color = d3.scaleLinear()\n .domain([d3.min(data, d => d.value), 100, d3.max(data, d => d.value)])\n .range(['#745CFF', '#FCFCFC', '#FFA05C'])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"projection = d3.geoMercator()\n .fitExtent([[margin.left * 0.5, margin.top * 0.5], [w - margin.left * 0.5, h - margin.top * 0.5]], coordsData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"path = coords => 'M' + coords.join('L') + 'Z'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"delay = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"md`---\n### Most important stuff`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"// Slightly modified code from https://bl.ocks.org/mbostock/3081153\ncircle = (coords, cx, cy, r) => {\n\n let circle = [],\n length = 0,\n lengths = [length],\n p0 = coords[0],\n p1,\n x,\n y,\n i = 0,\n n = coords.length;\n\n while (++i < n) {\n p1 = coords[i];\n x = p1[0] - p0[0];\n y = p1[1] - p0[1];\n lengths.push(length += Math.sqrt(x * x + y * y));\n p0 = p1;\n };\n\n p0 = coords[0];\n\n let area = d3.polygonArea(coords),\n centroid = [cx, cy],\n angle,\n angleOffset = Math.atan2(p0[1] - centroid[1], p0[0] - centroid[0]),\n k = 2 * Math.PI / length;\n\n i = -1;\n\n while (++i < n) {\n angle = angleOffset + lengths[i] * k;\n circle.push([\n centroid[0] + r * Math.cos(angle),\n centroid[1] + r * Math.sin(angle)\n ]);\n };\n\n // Might add an ability to specify the w, h, x and y in the future.\n return { coords: circle, translate: 'translate(0, 0)' };\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"prepareCoords = (d, i, type) => {\n const coords = d.geometry.coordinates[0];\n if (type === 'initial') {\n return { coords, translate: 'translate(0, 0)' };\n } else if (type === 'circle') {\n return circle(coords, d.x, d.y, d.radius);\n } else if (type === 'rectangle') {\n return rectangle(coords);\n } else if (type === 'bar') {\n return rectangle(\n coords, {\n width: barWidth(d.value),\n height: (y.range()[1] - y.range()[0]) / data.length - 5,\n x: margin.left,\n y: y(i)\n }\n );\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"morphVoivodeships = (voivodeships, type) => {\n voivodeships.each(function(d, i) {\n const { coords, translate } = prepareCoords(d, i, type);\n d3.select(this)\n .transition()\n .duration(1250)\n .delay(i * delay)\n .attr('d', path(coords))\n .attr('transform', translate)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`---\n### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"baseCoords = prepareInitialCoords(coordsData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"coordsData = await FileAttachment('coords.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"data = d3.csvParse(await FileAttachment('data.csv').text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`---\n### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3@6', 'd3-polygon')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}