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>

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 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) {

});
</script>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js