Skip to content

Instantly share code, notes, and snippets.

@danaoira

danaoira/.block

Last active July 17, 2017 04:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danaoira/5ab93d290c47ae60dde045dc9dc8806e to your computer and use it in GitHub Desktop.
Save danaoira/5ab93d290c47ae60dde045dc9dc8806e to your computer and use it in GitHub Desktop.
Download ZIP
hello-data-transformation-stacked
Raw
.block
license: mit
Raw
index.html
<!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>
<svg />
<script>
// var data = [{
// name: 'Sequoia',
// investments: [
// {
// name: 'Airbnb',
// amount: 20200, // millions
// year: 2010,
// sector: 'consumer'
// },
// {
// name: 'Pinterest',
// amount: 23874,
// year: 2008,
// sector: 'consumer'
// }
// ]
// }, {
// }];
var data = [{
name: 'Airbnb',
amount: 20200, // millions
year: 2010,
sector: 'enterprise',
investor: 'Sequoia'
}, {
name: 'Pinterest',
amount: 23874,
year: 2008,
sector: 'consumer',
investor: 'Sequoia'
}, {
name: 'Airbnb',
amount: 20200, // millions
year: 2010,
sector: 'consumer',
investor: 'Benchmark'
}, {
name: 'Spotify',
amount: 239847,
year: 2091,
sector: 'consumer',
investor: 'Sequoia'
}, {
name: 'Slack',
amount: 238947,
year: 2012,
sector: 'enterprise',
investor: 'a16z',
}, {
name: 'Slack',
amount: 238947,
year: 2012,
sector: 'enterprise',
investor: 'Google Ventures',
}, {
name: 'Tanium',
amount: 123987,
year: 2002,
sector: 'enterprise',
investor: 'IVP'
}, {
name: 'Lyft',
amount: 123987,
year: 2002,
sector: 'consumer',
investor: 'a16z'
}];
// bar chart, x-axis (ordinal) investor
// y-axis # of unicorns
// if stacked, sector (consumer vs. enterprise)
// color by sector
// hover to see individual unicorns
// 1. group by investor (for x-axis)
// 2. calculate stack for each sector
data = d3.nest()
.key(function(d) {return d.investor})
.key(function(d) {return d.sector})
.entries(data);
var stack = d3.stack()
.keys(['consumer', 'enterprise'])
.value(function(investor, key) {
// if sector key matches key given
var sector = investor.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(sector) {return sector.key});
// exit
sectors.exit().remove();
// enter + update
sectors = sectors.enter().append('g')
.classed('sector', true)
.merge(sectors);
// rectangles for each investor
var investor = sectors.selectAll('g')
.data(function(sector) { return sector }, function(investor) {
return investor.data.key;
});
// var txt = sectors.selectAll('text')
// .data(function(d) { return d });
// exit
investor.exit().remove();
// enter+update
var enter = investor.enter().append('g');
enter.append('rect');
enter.append('text');
investor = enter.merge(investor);
investor.select('rect')
.attr('x', function(investor, i) {return i * 25})
.attr('y', function(investor) {return 500 - investor[1] * 100})
.attr('width', 20)
.attr('height', function(investor) {return (investor[1] - investor[0]) * 100})
.attr('fill', '#fff')
.attr('stroke', '#000');
investor.select('text')
.text(function(d) { return d[1]})
.attr('x', function(investor, i) {return i * 28})
.attr('y', function(investor) {return 490 - investor[1] * 100})
.attr('fill', 'black');
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment