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>
    // 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)
​
    
d3.json('companies.json',function(error,data){
    
        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>
​
    