Unicorns

forked from andrewdblevins's block: Unicorns

<!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>

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