Unicorns by investor Try 4

forked from anonymous's block: Unicorns by investor Try 4

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="jquery-3.2.1.min.js"></script>  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .axis .domain {
  display: none;
	}
  </style>
</head>

<body>
<select id="menu">
  <option value="all">All sectors</option>
	<option value="Aerospace and Defense">Aerospace and Defense</option>
	<option value="Biopharmaceuticals">Biopharmaceuticals</option>
	<option value="Business Support Services">Business Support Services</option>
	<option value="Construction and Civil Engineering">Construction and Civil Engineering</option>
  <option value="Consumer Information Services">Consumer Information Services</option>
  <option value="Electronics and Computer Hardware">Electronics and Computer Hardware</option>
  <option value="Financial Institutions and Services">Financial Institutions and Services</option>
  <option value="Healthcare Services">Healthcare Services</option>
  <option value="Machinery and Industrial Goods">Machinery and Industrial Goods</option>
  <option value="Media and Content">Media and Content</option>
  <option value="Medical Devices and Equipment">Medical Devices and Equipment</option>
  <option value="Medical Software and Information Services">Medical Software and Information Services</option>
  <option value="Personal Goods">Personal Goods</option>
  <option value="Renewable Energy">Renewable Energy</option>
  <option value="Retailers">Retailers</option>
  <option value="Software">Software</option>
  <option value="Travel and Leisure">Travel and Leisure</option>
  <option value="Vehicles and Parts">Vehicles and Parts</option>
  <option value="Wholesale Trade and Shipping">Wholesale Trade and Shipping</option>
 </select>
  
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// Create SVG and margins
var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("unicorns.csv", function(error, data) {
			if (error) return error;
    console.log(data);
   // Nest the data
    data = d3.nest()
    	.key(function(d) { return d.investorWriteInName })
      .key(function(d) { return d.industrySegment })
    	.entries(data);

var yScale = d3.scaleLinear()
  	.domain([0, 30])
    .rangeRound([height, 0]);

var colorScale = d3.scaleOrdinal()
    .domain(stack.keys)
    .range(["#e6194b", "#3cb44b", "#ffe119", "#0082c8", "#f58231", "#911eb4", "#46f0f0", "#f032e6", "#d2f53c", "#d2f53c", "#fabebe", "#008080", "#e6beff", "#aa6e28", "#fffac8", "#800000", "#aaffc3", "#808000", "#ffd8b1", "#808080", "#FFFFFF", "#000000"
]); 
   
    var svg = d3.select('svg')
    	.attr('width', 960).attr('height', 500);
    var sectors = svg.selectAll('g')
    	.data(series, function(industrySegment) {
       return industrySegment
      });
   
    // exit
    sectors.exit().remove();
    
    // enter + update
    sectors = sectors.enter().append('g')
    	.classed('sector', true)
      .merge(sectors);

sectors.attr('fill', function(d) {return colorScale(d.key)});
    // rectangles for each investor
    // tells it that that key on each investor is unique, so use that as an ID
    	var investor = sectors.selectAll('g')
      	.data(function(d) { return d }, function(investor) { return investor.data.key });
    
      // in this instance, d.key is going to refer to the investor
      // exit
      investor.exit().remove();
    
    	var enter = investor.enter().append('g')
      	enter.append('rect');
    		enter.append('text');
    
    	investor = enter.merge(investor);
    
    	investor.select('rect')
      	.attr('x', function(d) { return xScale(d.data.key)})
      	.attr('y', function(investor) { console.log(sectors);
        return yScale(investor[1])})
      	.attr('width', xScale.bandwidth())
      	.attr('height', function(d) {return yScale(d[0])-yScale(d[1])}); 
   /*
    	investor.append('text')
    		.text(function(d) { return d.data.key})
    		.attr('x', function(investor, i) { return i * 25 })
    		.attr('y', function(investor) { return 500 - investor[1] * 100})
    		.attr('font-size', '12px'); 
        */
 });  
   // Sort the bars so they show up tallest to shortest
//  data.sort(function(a, b) { return b.total - a.total; }); 
</script>
</body>

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