d3-voronoi-map v2 usage

This block illustrates the use of the d3-voronoi-map plugin. It enhances a previous block by using the version 2 of the plugin, which is capable of displaying the self-organizing arrangement of the Voronoï map. This block is a remake of the HowMuch.net's post The Costs of Being Fat, in Actual Dollars.

The d3-voronoi-map plugin produces Voronoï maps (one-level treemap). Given a convex polygon (here, a 60-gon simulating a circle for each gender) and weighted data, it tesselates/partitions the polygon in several inner cells, such that the area of a cell represents the weight of the underlying datum.

This block always produces the same Voronoï map on reload thanks to the initialPosition() API. This API allows to define the initial positions of each sites, before launching the iterative computation of the Voronoï map. By default, a random positioning is used, which leads to distinct final Vornoï maps on each reload. By setting the initial sites' positions in a repeatable way, reloadings produce always the same final Voronoï map.

In this particular block, controlling initial positions of sites also helps to make the two Voronoï maps (men/women) having the same layout (e.g. placing sites/cells of the same type at the same position), which eases comparison.

Acknowledgments to :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>d3-voronoi-treemap usage</title>
    <meta name="description" content="d3-voronoi-map plugin to remake 'The Costs of Being Fat, in Actual Dollars'">
    <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
    <script src="https://rawcdn.githack.com/kcnarf/d3-weighted-voronoi/v1.0.0/build/d3-weighted-voronoi.js"></script>
    <script src="https://rawcdn.githack.com/kcnarf/d3-voronoi-map/v2.0.0/build/d3-voronoi-map.js"></script>
    <style>
      svg {
        background-color: rgb(250,250,250);
      }
      
      #title {
        letter-spacing: 4px;
        font-weight: 700;
        font-size: x-large;
      }
      
      text.tiny {
        font-size: 10pt;
      }
      text.light {
        fill: lightgrey
      }
      
      .symbol {
        fill: none;
        stroke: lightgrey;
        stroke-width: 14px;
      }
      
      .cell {
        stroke: darkgrey;
        stroke-width: 1px;
      }
      
      .cost {
        text-anchor: middle;
      }
      
      .total-cost {
        fill: lightgrey;
        text-anchor: middle;
        font-size: 20px;
        font-weight: 700;
      }
      
      .legend-color {
        stroke-width: 1px;
        stroke:darkgrey;
      }
      
      .highlighter {
        fill: transparent;
        stroke: none;
      }
      .highlight {
        stroke: black;
        stroke-width: 2px;
      }
    </style>
  </head>
  <body>
    <svg>
    	<defs>
        <filter id="inset-shadow">
          <feGaussianBlur stdDeviation="5" result="offset-blur"></feGaussianBlur>
          
    			<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite>
          
    			<feFlood flood-color="grey" flood-opacity="1" result="color"></feFlood>           	
    			<feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite>
          
    			<feComponentTransfer in="shadow" result="shadow">
            
        		<feFuncA type="linear" slope=".75"></feFuncA>
    			</feComponentTransfer>
    			<feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite>
          
        </filter>
      </defs>
    </svg>
    
    <script>
      //begin: constants
      var _2PI = 2*Math.PI;
      //end: constants
      
      //begin: raw data global def
      var menTotalCost = 0,
          womenTotalCost = 0;
      //end: raw data global def
      
      //begin: data-related utils
      function menCostAccessor(d){ return d.menCost; };
      function womenCostAccessor(d){ return d.womenCost; };
      function highlighterGroupId(d){ return "group-"+d.id};
      //end: data-related utils
      
      //begin: layout conf.
      var svgWidth = 960,
          svgHeight = 500,
          margin = {top: 10, right: 10, bottom: 10, left: 10},
          height = svgHeight - margin.top - margin.bottom,
          width = svgWidth - margin.left - margin.right,
          halfWidth = width/2,
          halfHeight = height/2,
          quarterWidth = width/4,
          quarterHeight = height/4,
          titleY = 20,
          legendsMinY = height - 20,
          menTreemapCenter = [300, 200],
          womenTreemapCenter = [650, 200];
      //end: layout conf.
      
      //begin: treemap conf.
      var baseRadius = 100;
      var menRadius, womenRadius,
          menCirclingPolygon, womenCirclingPolygon,
          menPolygons, womenPolygons;
      //end: treemap conf.
      
      //begin: reusable d3Selection
      var svg, drawingArea, menContainer, womenContainer;
      //end: reusable d3Selection
      
      d3.csv("costOfBeingFat.csv").then(function(data) {
        data.forEach(function(d) {csvParser(d)});
        
        initData(data);
        initLayout();
        drawLegends(data);
        
        var menData = data.filter( function(d){ return menCostAccessor(d)>0; }).reverse();
        menSimulation = d3.voronoiMapSimulation(menData)
          .clip(menCirclingPolygon)
          .weight(menCostAccessor)
        	.initialPosition(d3.voronoiMapInitialPositionPie().startAngle(-Math.PI*3/5))
        	.on("tick", function() {
          	// function called after each iteration of computation
          	// called only in simulation mode, not in static mode (see below)
          	menPolygons = menSimulation.state().polygons;
          	drawTreemap("men");
        	})
        	.on("end", function() {
          	attachMouseListener(data);
          });
        
        var womenData = data.filter( function(d){ return womenCostAccessor(d)>0; }).reverse();
        womenSimulation = d3.voronoiMapSimulation(womenData)
          .clip(womenCirclingPolygon)
          .weight(womenCostAccessor)
        	.initialPosition(d3.voronoiMapInitialPositionPie().startAngle(-Math.PI*3/4))
        	.on("tick", function() {
          	// function called after each iteration of computation
          	// called only in simulation mode, not in static mode (see below)
          	womenPolygons = womenSimulation.state().polygons;
          	drawTreemap("women");
        	})
        	.on("end", function() {
          	attachMouseListener(data);
          });
        
        
        //begin: how to draw a static arrangement
        // set simulation to false for a staic arrangement
        var simulate = true;
        if (!simulate) {
          // firstly, stop simulations
          menSimulation.stop();
          womenSimulation.stop();
          
          // secondly, manually call ticks until final arrangment is produced
          while (!menSimulation.state().ended) {
            menSimulation.tick();
            // function defined by .on("tick", ...) above are not called
          }
          while (!womenSimulation.state().ended) {
            womenSimulation.tick();
            // function defined by .on("tick", ...) above are not called
          }
          
          // finally, polygons are available and can be used as desired
          menPolygons = menSimulation.state().polygons;
          womenPolygons = womenSimulation.state().polygons;
          
          drawTreemap("men");
          drawTreemap("women");
          attachMouseListener(data);
        }
        //end: how to draw a static arrangement
      });

Updated missing url https://rawcdn.githack.com/Kcnarf/d3-weighted-voronoi/v1.0.0/build/d3-weighted-voronoi.js to https://rawcdn.githack.com/kcnarf/d3-weighted-voronoi/v1.0.0/build/d3-weighted-voronoi.js

Updated missing url https://rawcdn.githack.com/Kcnarf/d3-voronoi-map/v2.0.0/build/d3-voronoi-map.js to https://rawcdn.githack.com/kcnarf/d3-voronoi-map/v2.0.0/build/d3-voronoi-map.js

https://d3js.org/d3.v5.min.js

https://rawcdn.githack.com/Kcnarf/d3-weighted-voronoi/v1.0.0/build/d3-weighted-voronoi.js

https://rawcdn.githack.com/Kcnarf/d3-voronoi-map/v2.0.0/build/d3-voronoi-map.js