1

I am trying to transition between two SVG views with d3.js. The aim is to be able to alternate between displays:

  • a classical choropleth map (map where color represents a measurement)
  • a bubble chart where the radius is proportionate to the population of the region

enter image description here

See here for a demo.

However, transitioning from arbitrary SVG path to an (approximated) circle is not straightforward. I have the following issues:

  1. regions of the map may contain islands or enclaves ; more generally, a SVG path may contain independent rings. (I would have thought d3 would have rendered multi-polygons as several paths but no!) On the other hand, a circle is made of only one ring. How do you smooth the smaller polygons out during the transition? (I think merging the rings together is too complicated to be worth it.) I thought about fading or shrinking the polygones, but how can I implement that in practice? 'Cause I am not sure whether it is possible to single out one ring inside the d attribute of a path.
  2. small regions are represented by few points and transitioning those few points onto a circle produces a polygon with too few vertices to look like an actual circle (see image under) ; What is a good strategy for smoothly adding points in the d attribute of a path? ;
  3. alternatively, instead of adding points to the broken line, one could also transition straight lines to Bézier curves (4 points and adequate anchors already produce a very good approximation of a circle). Since my own attempt is not convincing, here is the third question: How do you transition between straight lines and Bézier curves?
  4. lastly, at the beginning of the transition in both direction, I get spikes / stripes in some (but not all) of the shapes; any idea where that could come from?

Spikes + polygon effects Spikes + enclaves and islands

Arthur
  • 1,208
  • 13
  • 25
  • Despite this question being very interesting, avoid making several questions in one post. That's a reason to close: *too broad*. Please, choose **one** question and edit your post. – Gerardo Furtado Jun 25 '17 at 23:33
  • I can also just ask one question: **how do you transition a map feature to a circle in SVG?** ;) – Arthur Jun 25 '17 at 23:34
  • Yes, you can. That being the case, convert this Bostock's code from v3 to v4: https://bl.ocks.org/mbostock/3081153 – Gerardo Furtado Jun 26 '17 at 02:28
  • I know this one, it's the inspiration for the map. But his version 1) does not contain islands or enclaves ; 2) does not contain small regions that could be transitioned to a polygon instead of a circle ; 3) does not exhibit those spikes. – Arthur Jun 26 '17 at 08:58
  • After further investigation, spikes appear when the number of points is higher for the circle than for the region. By default, the transition make the dots appear at their destination (i.e. on the circle) instead of interpolating its appearance at the right moment. (Mike Bostok proposed an interpolation between paths with different number of points here: https://bl.ocks.org/mbostock/3916621) Removing one point by circle does the work for me. – Arthur Jun 26 '17 at 09:47
  • An other track to follow: https://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathElement – Arthur Jun 26 '17 at 10:13

0 Answers0