D3 Examples - Unicorns

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>
    var unnest = function(data, children){
                var out = [];
        data.forEach(function(d, i){
          d_keys = Object.keys(d);
          values = d[children];
          
          values.forEach(function(v){
            d_keys.forEach(function(k){
              if (k != children) { v[k] = d[k]}
            })
            out.push(v);
          })
          
        })
        return out;
      }
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
​
    //data stolen from WSJ
d3.json('companies.json',function(error,data){  
    var data_by_companies = data.companies
    
    data_by_companies.forEach(d=> d.investors = d.invest.split(',').map(d=>{return {"investor":d}}))
​
    data_by_companies = unnest(data_by_companies,'investors')
     
    //console.log(data_by_investor)
​
    data_by_investor = d3.nest()
        .key(d=>d.investor)
        .entries(data_by_companies)
    
    console.log(data_by_investor)
    
    
  
        var bars = svg.selectAll('g')
                .data(data.companies)
    
    var enter = bars.enter().append('g')
​
    enter.append('rect')
    enter.append('text')
    
    bars = enter.merge(bars)
                    .attr('transform', function(d,i){
                    var x = i*25;
                    var y = 500 - d.invest.split(',').length*10;
              return 'translate('+[x,y]+')';
    })
    
    bars.select('rect')
        .attr('height', function(d){return (d.invest.split(',').length)*10 })
        .attr('width',20)
        .attr('fill','steelblue')
    
    bars.select('text')
        .text(d=>d.Company)
        .attr('x',5)
        .attr('y',-5)
        .attr('r',90)
    
    
    
})
  </script>
</body>
​
    