Built with blockbuilder.org
xxxxxxxxxx
<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">
<!-- Dropdown goes here -->
</select>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
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'])
.value(function(d, key) {
var sector = d.values.find(function(sector) {
return sector.key === key });
if (!sector) return 0;
return sector.values.length;
});
var series = stack(data);
console.log(series);
var svg = d3.select('svg')
.attr('width', 960).attr('height', 500);
var sectors = svg.selectAll('g')
.data(series, function(d) {
debugger
// console.log("We're here!" + d);
// return d.key
});
// exit
sectors.exit().remove();
// enter + update
sectors = sectors.enter().append('g')
.classed('sector', true)
.merge(sectors);
// 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, i) { return i * 25 })
.attr('y', function(d) { return 500 - d[1] * 10})
.attr('width', 20)
.attr('height', function(d) {return (d[1]-d[0]) * 10})
.attr('fill', '#fff')
.attr('stroke', '#000');
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; });
/*
// Set scales
var xScale = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
var yScale = d3.scaleLinear()
.rangeRound([height, 0]);
var colorScale = d3.scaleOrdinal()
.range(["#e6194b", "#3cb44b", "#ffe119", "#0082c8", "#f58231", "#911eb4", "#46f0f0", "#f032e6", "#d2f53c", "#d2f53c", "#fabebe", "#008080", "#e6beff", "#aa6e28", "#fffac8", "#800000", "#aaffc3", "#808000", "#ffd8b1", "#808080", "#FFFFFF", "#000000"
]);
xScale.domain(data.map(function(d) { return d.investorWriteInName; }));
yScale.domain([0, d3.max(data, function(d) { return d.values.length; })]).nice();
colorScale.domain(keys);
//Append things
g.append("g")
.selectAll("g")
.data(d3.stack().keys(keys)(data))
.enter().append("g")
.attr("fill", function(d) { return colorScale(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return xScale(d.data.name); })
.attr("y", function(d) { return yScale(d[1]); })
.attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })
.attr("width", xScale.bandwidth());
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(yScale).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", yScale(yScale.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Items");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", colorScale);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) { return d; });
// update
function update(data) {
var item = d3.select("#menu").property("value");
var itemData = getItemData(data, item);
console.log(itemData);
}
// main
d3.select("#menu")
.on("change", function(d) {
update(data);
});
*/
</script>
</body>
https://d3js.org/d3.v4.min.js