D3 Examples - Nest Perc Cnt

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
  <script>
    console.clear();
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = window.innerWidth*0.98 - margin.left - margin.right,
    height = window.innerHeight*0.98 - margin.top - margin.bottom;
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);
    
    var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var x = d3.scaleBand().rangeRound([0, width]).padding(1),
            y = d3.scaleBand().rangeRound([height, 0]).padding(1);
    
    var xAxis = d3.axisBottom(x);
        var yAxis = d3.axisLeft(y);
    
    d3.csv("data.csv",function(data){
     
      var keys = ["CHN","SZ"]
      var counter = []
      var columnArr = d3.keys(data[0])
      
      var keyList = keys!="" ? keys : columnArr;
      var counter = counter!="" ? counter : columnArr[columnArr.length-1];
      
      var ndx = crossfilter(data);
      var getUniqueDim = ndx.dimension(function(d){return [d[keyList[0]], d[keyList[1]]]});
      var getUniqueGrp = getUniqueDim.group().reduceSum(function(d){return d[counter]});
      
      var aggregateData = (getUniqueGrp.top(Infinity));
      
      var nestData = d3.nest()
            .key(function(d) { return d[keyList[1]]; })
      .rollup(function(leaves) {return d3.sum(leaves, function(d) {return parseFloat(d[counter]);}) })
            .entries(data);
      
      var newFormatData = []
      
      nestData.forEach(function(nD,i){
        aggregateData.forEach(function(aD,j){
          if(aD.key[1] == nD.key){
            aD.Perc = aD.value/nD.value * 100
          }
        })  
      })
      
      console.log(aggregateData);
      
      x.domain((aggregateData.map(function (d) {
                return d.key[1];
            })).sort(function (a, b) {
                return d3.ascending(a, b);
            }));
            y.domain((aggregateData.map(function (d) {
                return d.key[0];
            })).sort(function (a, b) {
                return d3.ascending(a, b);
            }));
      
      var scatterDots = g.selectAll(".circle")
        .data(aggregateData)
        .enter()
      
      scatterDots.append("circle")
        .attr("class", "circle")
        .attr("cx", function(d) { return x(d.key[1]); })
        .attr("cy", function(d) { return y(d.key[0]); })
        .attr('fill', 'cyan')
        .transition().duration(800).delay(0)
        .on("start",function(){
            d3.active(this)
            .attr('r',0)
            .attr('opacity',0.9) 
            .transition() 
            .attr('r', function(d) { return d.Perc/100 * 60}) 
            .attr('opacity', function(d) { return Math.max(d.Perc / 100, 0.4) })
        })
      
      var maxCircle = g.selectAll(".Maxcircle")
          .data(aggregateData)
          .enter()     
      
      var circleLayer = 5;
      
      circleLayer = circleLayer!=undefined ? circleLayer : 5;
      
      for(var mC = 0; mC < circleLayer; mC++){
        
        maxCircle
            .append("text")
          .attr("dx", function(d) { return (x(d.key[1])); })
            .attr("dy", function(d) { return ((y(d.key[0]) - ((100-(mC*(100/circleLayer)))/100 * 60))); })
          .text(function(d){return d3.format('.0f')(100 - mC*(100/circleLayer))})
            .style('font-size', 10)
        
        maxCircle.append("circle")
          .attr("class", "Maxcircle")
          .attr("cx", function(d) { return x(d.key[1]); })
          .attr("cy", function(d) { return y(d.key[0]); })
          .attr('r', function(d) { 
            return (100-(mC*(100/circleLayer)))/100 * 60
            })
          .attr('fill', 'transparent')
          .attr('stroke', 'grey')
          .attr('opacity',  0.4)
          .append("title")
          .text(function(d){
            return "Size : " + d.key[1] +"\n"+
                  "Channel : " + d.key[0] +"\n"+
              "Percentage : " + d3.format(".2f")(d.Perc) + "%"
          });
        
      }
      
      g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
      
      g.append("g")
        .attr("class", "axis axis--y")
        .call(yAxis)
      
      // add the X gridlines
      g.append("g")         
          .attr("class", "grid")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis
              .tickSize(-height)
              .tickFormat("")
          )
            .attr('stroke-dasharray', '4 1')
            .attr('stroke','grey')
            .attr('opacity', 0.3)
            .style('pointer-events','none')
​
      // add the Y gridlines
      g.append("g")         
          .attr("class", "grid")
          .call(yAxis
              .tickSize(-width)
              .tickFormat("")
          )
            .attr('stroke-dasharray', '4 1')
            .attr('stroke','grey')
            .attr('opacity', 0.3)
            .style('pointer-events','none')
    })
    
​
  </script>
  
</body>
​
    