Built with blockbuilder.org
xxxxxxxxxx
<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("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;
data = d3.nest()
.key(function(d) { return d.investorWriteInName })
.key(function(d) { return d.industrySegment })
.entries(data);
/*
var stack = d3.stack()
.keys(['Aerospace and Defense', 'Biopharmaceuticals', 'Business Support Services', 'Construction and Civil Engineering', 'Consumer Information Services', 'Electronics and Computer Hardware', 'Financial Institutions and Services', 'Healthcare Services', 'Machinery and Industrial Goods', 'Media and Content', 'Medical Devices and Equipment', 'Medical Software and Information Services', 'Personal Goods', 'Renewable Energy', 'Retailers', 'Software', 'Travel and Leisure', 'Vehicles and Parts', 'Wholesale Trade and Shipping'])(data);
.value(function(d, key) {
var sector = investor.values.find(function())
})
*/
data.sort(function(a, b) { return b.total - a.total });
console.log(data);
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var bars = svg.selectAll('g')
.data(data, function(d) {return d.key});
// exit
bars.exit().remove();
// enter
var enter = bars.enter().append('g');
enter.append('rect'); // inherit the data
enter.append('text'); // bound on the parent
// set Extent before you set scales, right?
/*
// set scales
var xScale = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
var yScale = d3.scaleLinear()
.rangeRound([height, 0]);
xScale.domain(data.map(function(d) { return d.investorWriteInName; }));
yScale.domain([0, d3.max(data, function(d) { return d.values.length; })])
*/
// enter + update
bars = enter.merge(bars)
.attr('transform', function (d, i) {
// please write scale
// don't be lazy like me
var x = i * 25;
var y = 500 - d.values.length * 10;
return 'translate(' + [x, y] + ')';
});
// rectangle height + y
bars.select('rect')
.attr('height', function(d, i) {return d.values.length * 100})
.attr('width', 20)
.attr('fill', 'steelblue')
.attr('opacity', 0.5);
bars.select('text')
.attr('x', 5)
.attr('y', -5)
.text(function(d) {return d.values.length});
});
</script>
</body>
https://d3js.org/d3.v4.min.js