fogonwater/index.html

## index.html
<!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>
	<!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>