Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
DNZ People Timelines
<!DOCTYPE html>
<html>
<head>
<title>people's lives</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style type="text/css">
html {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.labels {
font-size: 12px;
fill: white;
text-anchor: left;
text-shadow: 1px 1px 2px #444;
}
.life-bar {
fill: '#f00';
}
</style>
</head>
<body>
<div class="container">
<h4>peoples' lives</h4>
<div id="chart"></div>
</div>
</body>
<script>
var sf = 22, bar_margin = 4;
//var sf = 4, bar_margin = 1;
d3.json('https://gist.githubusercontent.com/fogonwater/617eaa54a38aad5b1c0c/raw/a38556d307db20cf251f845048f71d3a0b0095aa/concepts.json', function (data) {
// prepare the data
var min_year = 1800,
max_year = 2015;
var height = data.length * sf,
width = 920;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var scale = d3.scale.linear()
.domain([min_year, max_year])
.range([10, width - 10]);
data.sort(function(a, b) { return b.born - a.born; });
data.reverse();
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);
var gradient1 = svg.append("svg:defs")
.append("svg:linearGradient")
.attr("id", "gradient1")
.attr("x1", "100%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient1.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", "steelblue")
.attr("stop-opacity", 1);
gradient1.append("svg:stop")
.attr("offset", "100%")
.attr("stop-color", "white")
.attr("stop-opacity", 1);
var gradient2 = svg.append("svg:defs")
.append("svg:linearGradient")
.attr("id", "gradient2")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient2.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", "steelblue")
.attr("stop-opacity", 1);
gradient2.append("svg:stop")
.attr("offset", "100%")
.attr("stop-color", "white")
.attr("stop-opacity", 1);
var bars = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d) {
console.log(d.born, scale(d.born));
return scale(d.born);
})
.attr("y", function(d, i) {
return i * sf;
})
.attr("width", function(d) {
return scale(d.died) - scale(d.born);
})
.style("fill", function(d) {
if (d.confident == 'death') {
return "url(#gradient1)";
}
if (d.confident == 'birth') {
return "url(#gradient2)";
}
return 'steelblue';
})
.attr("height", sf - bar_margin);
//.attr("fill", "steelblue");
var year_data = [1500, 1600, 1700, 1800, 1900, 2000];
var year_markers = svg.selectAll(".year_markers")
.data(year_data)
.enter()
.append("rect")
.attr("x", function(d) {
return scale(d);
})
.attr("y", 0)
.attr("width", 0.5)
.style("fill", '#696969')
.attr("height", height);
var b_date, d_date;
if (sf > 12) {
var labels = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d, i) {
b_date = d.born;
d_date = d.died;
if (d.confident == 'death') {
b_date = '??';
}
if (d.confident == 'birth') {
d_date = '??';
}
return d.name + ', ' + b_date + ' - ' + d_date;
})
.attr("x", function(d) {
return scale(d.born) + 5;
})
.attr("y", function(d, i) {
return (i * sf) + sf - 9;
})
.attr("class", "labels");
}
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment