D3 Examples - voronoi tree

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <p>based on kcnarf's tree voronoi https://blockbuilder.org/Kcnarf/fa95aa7b076f537c00aed614c29bb568</p>
    <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-treemap plugin to remake 'The Costs of Being Fat, in Actual Dollars'">
    <script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <script src="https://raw.githack.com/kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js"></script>
    <script src="https://raw.githack.com/kcnarf/d3-voronoi-map/master/build/d3-voronoi-map.js"></script>
    <script src="https://raw.githack.com/kcnarf/d3-voronoi-treemap/master/build/d3-voronoi-treemap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.5/d3-legend.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
      }
      
      .world {
        stroke: lightgrey;
        stroke-width: 4px;
      }
      
      .cell {
        stroke: #333;
        stroke-width: 1px;
      }
      
      .label {
        text-anchor: middle;
        fill: #333;
      }
      
      .label>.name {
        dominant-baseline: text-after-edge;
      }
      
      .label>.value {
        dominant-baseline: text-before-edge;
      }
      
      .hoverer {
        fill: transparent;
        stroke: white;
        stroke-width:0px;
      }
      
      .hoverer:hover {
        stroke-width: 3px;
      }
      
      .legend-color {
        stroke-width: 1px;
        stroke:darkgrey;
      }
    </style>
  </head>
  <body>
    <svg></svg>
    
    <script>
      //begin: constants
      var _2PI = 2*Math.PI;
      //end: constants
      
      //begin: layout conf.
      var svgWidth = 700,
          svgHeight = 520,
          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,
          treemapRadius = 205,
          treemapCenter = [halfWidth, halfHeight+5];
      //end: layout conf.
      
      //begin: treemap conf.
      var _voronoiTreemap = d3.voronoiTreemap();
      var hierarchy, circlingPolygon;
      //end: treemap conf.
      
      //begin: drawing conf.
      var fontScale = d3.scaleLinear();
      var opacityScale = d3.scaleLinear()
        .domain([0.1,0.9])
        .range([0.3,1]);
      var numFormat = d3.format(",.0%") 
      //end: drawing conf.
      
      //begin: reusable d3Selection
      var svg, drawingArea, treemapContainer;
      //end: reusable d3Selection
      
      var rootData = {
  "name": "world",
  "children": [
    {
      "name": "Eastern Asia",
      "color": "#DE4945",
      "children": [{"name":"China","code":"CHN","production":136873,"weight":0.2762610809,"pct":0.9140710565},{"name":"Democratic People's Republic of Korea","code":"PRK","production":1935,"weight":0.003905556183,"pct":0.01292239882},{"name":"Japan","code":"JPN","production":7176,"weight":0.01448386107,"pct":0.04792306665},{"name":"Republic of Korea","code":"KOR","production":3756,"weight":0.007581017584,"pct":0.02508347803}]
    },
     {
      "name": "Southern Asia",
      "color": "#DBB62A",
      "children": 
      [{"name":"Bangladesh","code":"BGD","production":34350,"weight":0.06933119116,"pct":0.2210908436},{"name":"India","code":"IND","production":106186,"weight":0.2143231984,"pct":0.683457127},{"name":"Nepal","code":"NPL","production":3005,"weight":0.006065217742,"pct":0.01934142605},{"name":"Pakistan","code":"PAK","production":6767,"weight":0.01365834558,"pct":0.043555218},{"name":"Sri Lanka","code":"LKA","production":3082,"weight":0.00622063264,"pct":0.01983702998},{"name":"Others","code":"Others","production":1976,"weight":0.00398830957,"pct":0.01271835537}]
    },
        {
      "name": "South-Eastern Asia",
      "color": "#1FAD8F",
      "children": 
      [{"name":"Indonesia","code":"IDN","production":47544,"weight":0.09596163472,"pct":0.3329505028},{"name":"Myanmar","code":"MMR","production":19188,"weight":0.03872858504,"pct":0.1343735119},{"name":"Philippines","code":"PHL","production":12299,"weight":0.02482399767,"pct":0.08612986358},{"name":"Thailand","code":"THA","production":24054,"weight":0.04854999919,"pct":0.1684500966},{"name":"Viet Nam","code":"VNM","production":29374,"weight":0.05928775573,"pct":0.2057060422},{"name":"Others","code":"Others","production":10337,"weight":0.02086394536,"pct":0.07238998291}]
    },
     {
      "name": "South America",
      "color": "#5DBCD2",
      "children": 
      [{"name":"Argentina","code":"ARG","production":1043,"weight":0.002105165426,"pct":0.06396026246},{"name":"Brazil","code":"BRA","production":7843,"weight":0.01583011739,"pct":0.4809590973},{"name":"Colombia","code":"COL","production":1367,"weight":0.00275911902,"pct":0.08382903048},{"name":"Ecuador","code":"ECU","production":1011,"weight":0.002040577417,"pct":0.06199791501},{"name":"Peru","code":"PER","production":2035,"weight":0.004107393712,"pct":0.1247930337},{"name":"Others","code":"Others","production":3008,"weight":0.006071272868,"pct":0.1844606611}]
    },
     {
      "name": "Western Africa",
      "color": "#6E5194",
      "children": 
     [{"name":"Côte d'Ivoire","code":"CIV","production":1290,"weight":0.002603704122,"pct":0.1330720033},{"name":"Guinea","code":"GIN","production":1370,"weight":0.002765174145,"pct":0.1413245306},{"name":"Mali","code":"MLI","production":1475,"weight":0.002977103551,"pct":0.1521559728},{"name":"Nigeria","code":"NGA","production":3135,"weight":0.00632760653,"pct":0.323395915},{"name":"Sierra Leone","code":"SLE","production":837,"weight":0.001689380117,"pct":0.08634206726},{"name":"Others","code":"Others","production":1587,"weight":0.003203161583,"pct":0.163709511}]
    },
    {
      "name": "Other Regions",
      "color": "  #D47176",
      "children": 
      [{"name":"Egypt","code":"EGY","production":3818,"weight":0.007706156852,"pct":0.1772104897},{"name":"Italy","code":"ITA","production":956,"weight":0.001929566776,"pct":0.04437224414},{"name":"Madagascar","code":"MDG","production":2408,"weight":0.004860247695,"pct":0.111766071},{"name":"United Republic of Tanzania","code":"TZA","production":1464,"weight":0.002954901423,"pct":0.06795080065},{"name":"United States of America","code":"USA","production":5745,"weight":0.01159556603,"pct":0.2666511952},{"name":"Others","code":"Others","production":7154,"weight":0.01443945681,"pct":0.3320491994}]
    }
    ]}
        
        initData();
        initLayout(rootData);
        
        hierarchy = d3.hierarchy(rootData).sum(function(d){ return d.weight; });
        _voronoiTreemap
          .clip(circlingPolygon)
          (hierarchy);
        
        drawTreemap(hierarchy);
      
      
      
      
      function initData(rootData) {
        circlingPolygon = computeCirclingPolygon(treemapRadius);
        fontScale.domain([0, 0.4]).range([6, 20]).clamp(true);
      }
      
      function computeCirclingPolygon(radius) {
        var points = 60,
            increment = _2PI/points,
            circlingPolygon = [];
        
        for (var a=0, i=0; i<points; i++, a+=increment) {
          circlingPolygon.push(
            [radius + radius*Math.cos(a), radius + radius*Math.sin(a)]
          )
        }
        
        return circlingPolygon;
      };
      
      function initLayout(rootData) {
        svg = d3.select("svg")
          .attr("width", svgWidth)
          .attr("height", svgHeight);
        
        drawingArea = svg.append("g")
          .classed("drawingArea", true)
          .attr("transform", "translate("+[margin.left,margin.top]+")")
          .style('fill','white');
        
        treemapContainer = drawingArea.append("g")
          .classed("treemap-container", true)
          .attr("transform", "translate("+treemapCenter+")");
        
        treemapContainer.append("path")
          .classed("world", true)
          .attr("transform", "translate("+[-treemapRadius,-treemapRadius]+")")
          .attr("d", "M"+circlingPolygon.join(",")+"Z");
        
        drawTitle();
      
        
      }
      
      function drawTitle() {
        drawingArea.append("text")
          .attr("id", "title")
          .attr("transform", "translate("+[halfWidth, titleY]+")")
          .attr("text-anchor", "middle")
          //.text("The Global Economy by GDP (as of 01/2017)")
      }
      
      function drawFooter() {
        drawingArea.append("text")
          .classed("tiny light", true)
          .attr("transform", "translate("+[0, height]+")")
          .attr("text-anchor", "start")
          .text("Remake of HowMuch.net's article 'The Global Economy by GDP'")
        drawingArea.append("text")
          .classed("tiny light", true)
          .attr("transform", "translate("+[halfWidth, height]+")")
          .attr("text-anchor", "middle")
          .text("by @_Kcnarf")
        drawingArea.append("text")
          .classed("tiny light", true)
          .attr("transform", "translate("+[width, height]+")")
          .attr("text-anchor", "end")
          .text("bl.ocks.org/Kcnarf/fa95aa7b076f537c00aed614c29bb568")
      }
      
      
      function drawTreemap(hierarchy) {
        var leaves=hierarchy.leaves();
        
        var cells = treemapContainer.append("g")
          .classed('cells', true)
          .attr("transform", "translate("+[-treemapRadius,-treemapRadius]+")")
          .selectAll(".cell")
          .data(leaves)
          .enter()
            .append("path")
              .classed("cell", true)
              .attr("d", function(d){ return "M"+d.polygon.join(",")+"z"; })
              .style("fill", d=>d3.interpolateLab("white", d.parent.data.color)(opacityScale(d.data.pct)));
        
​
        var labels = treemapContainer.append("g")
          .classed('labels', true)
          .attr("transform", "translate("+[-treemapRadius,-treemapRadius]+")")
          .selectAll(".label")
          .data(leaves)
          .enter()
            .append("g")
              .classed("label", true)
              .attr("transform", function(d){
                return "translate("+[d.polygon.site.x, d.polygon.site.y]+")";
              })
              .style("font-size", function(d){ return fontScale(d.data.weight); });
        
        labels.append("text")
          .classed("name", true)
          .html(function(d){
            return (d.data.weight<0.015)? d.data.code : d.data.name;
          })
          .style('font-weight','bold')
          .style('font-family', 'futura');
        labels.append("text")
          .classed("value", true)
          .text(function(d){ return numFormat(d.data.weight); })
          .style('font-family', 'futura');
        
        var hoverers = treemapContainer.append("g")
          .classed('hoverers', true)
          .attr("transform", "translate("+[-treemapRadius,-treemapRadius]+")")
          .selectAll(".hoverer")
          .data(leaves)
          .enter()
            .append("path")
              .classed("hoverer", true)
              .attr("d", function(d){ return "M"+d.polygon.join(",")+"z"; });
        
        hoverers.append("title")
          .text(function(d) { return d.data.name + "\n" + d.value+"%"; });
      }
      ////////////////
      ////legend
      ////////////////
      var ordinal = d3.scaleOrdinal()
      .domain(["Eastern Asia", 
               "Southern Asia",
               "South-Eastern Asia",
               "South America",
               "Western Africa",
               "Other Regions"])
      .range(["#DE4945","#DBB62A","#1FAD8F",
             "#5DBCD2","#6E5194","#D47176"]);
    svg.append("g")
      .attr("class", "legendOrdinal")
      .attr("transform", "translate(50,20)");
​
    var legendOrdinal = d3.legendColor()
      .shape("path", d3.symbol().type(d3.symbolCircle).size(100)())
      .shapePadding(90)
      .scale(ordinal)
    .shapeWidth(200)
    .orient('horizontal');
     //add legend
    svg.select(".legendOrdinal")
      .call(legendOrdinal)
      .style('font-family', 'futura')
      .style('font-size', '12px'); 
    </script>
  </body>
</html>
​
​
    