JoshRosen · December 25, 2015 17:19
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>Time Searcher in D3</title>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <style>
        body {
            font: 10px "Helvetica" sans-serif;
            text-align: center;
        }

        .grid .tick {
            stroke: lightgrey;
            opacity: 0.7;
        }
        .grid path {
            stroke-width: 0;
        }

        .axis {
            shape-rendering: crispEdges;
            fill: #777;
        }

        .axis line {
            stroke: #ccc;
        }

        .series {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
            stroke-opacity: 0.5;
        }

        .series:hover {
            stroke: #ffa200;
            stroke-opacity: 1;
            stroke-width: 2px;
        }

        .line {
            stroke: inherit;
        }

        .point {
            fill: inherit;
            stroke: inherit;
        }

        .axis .minor {
            stroke-opacity: 0.5;
        }

        .axis path {
            display: none;
        }

        div.tooltip {
            position: absolute;
            text-align: center;
            width: auto;
            height: auto;
            padding: 4px;
            font: 12px sans-serif;
            background: #feffa8;
            border: 1px;
            border-color: #111;
            border-style: solid;
            border-radius: 8px;
            pointer-events: none;
        }

        .extent {
            fill: #00efec;
            fill-opacity: .125;
            stroke: #fff;
        }

        .extent:hover {
            fill-opacity: .25;
        }

        .highlight {
            stroke: #000;
        }

        .label {
            fill: #777;
            font: 12px "Helvetica Neue";
            font-weight: bold;
        }
    </style>

 </head>

 <body>
 <h1>Time Searcher in D3</h1>
 <input type="button" value="New Brush" id="newBrushButton" />
 <br/>
 <svg id="vis"></svg>




 <script>
    // ---------------- Gridlines, axes, and plot setup --------------------
    // Some of this code is adapted from http://bl.ocks.org/mbostock/1166403

    var margin = {top: 20, right: 20, bottom: 20, left: 20},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

    var svg = d3.select("#vis")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .style("margin-top", margin.top)
            .style("margin-bottom", margin.bottom)
            .style("margin-left", margin.left)
            .style("margin-right", margin.right);

    d3.xhr("life-expectancy-at-birth-total-years.csv", function(error, response) {

        // ---------------- Data loading and axis creation -----------------

        var rawCSV = response.responseText;

        // Process the rows; the first column is the time axis:
        var data = d3.csv.parseRows(rawCSV);
        var headers = data.shift();

        // Calculate domains for scaling the axes:
        var timeDomain = d3.extent(data, function(d) {
            return d[0];
        });
        var nonEmptyValues = data.slice(1).filter(function(d) { return d != ''; });
        var minValue = d3.min(nonEmptyValues, function(d) {
            return d3.min(d);
        });
        var maxValue = d3.max(nonEmptyValues, function(d) {
            return d3.max(d);
        });

        var xScale = d3.scale.linear()
                .domain(timeDomain)
                .range([0, width]);

        var yScale = d3.scale.linear()
                .domain([minValue, maxValue])
                .range([height, 0]);

        // Draw axes and labels:
        var xAxis = d3.svg.axis().scale(xScale);
        var yAxis = d3.svg.axis().scale(yScale).orient("right");
        svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
        svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + width + ", 0)")
                .call(yAxis);
        svg.append("text")
                .attr("class", "label")
                .attr("x", width/2)
                .attr("y", height + 35)
                .attr("text-anchor", "middle")
                .text("Year");

        svg.append("text")
                .attr("class", "label")
                .attr("x", -height/2)
                .attr("y", width + 35)
                .attr("text-anchor", "middle")
                .attr("transform", "rotate(-90)")
                .text("Life Expectancy at Birth, Total (Years)");


        // ---------------- Plotting the time series --------------------


        // Plot the time series points.  Each column of the data represents
        // a single time-series and each row represents a single instant in time.
        var transposed = d3.transpose(data);
        var times = transposed.shift();
        var series_names = headers.slice(1);
        var series_data = transposed;

        var line = d3.svg.line()
                .x(function(d, i) { return xScale(times[i]); })
                .y(yScale)
                .defined(function(d) { return d != ""; })
                .interpolate("linear");

        var seriesContainer = svg.append("svg:g")
                .attr("id", "seriesContainer");

        var series = seriesContainer.selectAll("g.path")
                .data(series_data)
                .enter()
                .append("svg:g")
                .attr("class", "series");

        series.attr("title", function(d, i) {
            return series_names[i].replace(/"/g, "");
        });

        var lines = series.append("path")
                .attr("class", "line")
                .attr("d", line);

        var points = series.selectAll("circle")
                .data(function(d) { return d;})
                .enter()
                .append("svg:circle")
                .attr("cx", function(d, i) { return xScale(times[i]); })
                .attr("cy", yScale)
                .attr("r", "1")
                .attr("class", "point");

        // ---------------- Move-to-front ---------------------------------

        // The following method, from http://stackoverflow.com/questions/14167863,
        // is used to move DOM elements to the front.  I use this to ensure that
        // highlighted series aren't obscured in dense regions of the graph.

        d3.selection.prototype.moveToFront = function() {
            return this.each(function(){
                this.parentNode.appendChild(this);
            });
        };

        d3.selection.prototype.moveToBack = function() {
            return this.each(function(){
                // Unfortunately, prependChild() doesn't exist:
                // http://blogs.adobe.com/cantrell/archives/2011/11/adding-prependchild-to-element.html
                this.parentNode.insertBefore(this, this.parentNode.firstChild);
            });
        };

        // ---------------- Tooltips and mouseover events -----------------

        // Tooltip code adapted from
        // http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

        var tooltip = d3.select("body").append("div")
                .attr("class", "tooltip")
                .style("opacity", 0);

        var tooltipSeriesTitle = "";
        var tooltipDataValue = null;

        function refreshTooltipHtml() {
            var html = "<b>" + tooltipSeriesTitle + "</b>";
            if (tooltipDataValue !== null) {
                html += "<br/>" + tooltipDataValue;
            }
            tooltip.html(html);
        }

        // Mousing over a series displays its name:
        series.on("mouseover", function(d) {
            // Move the selected series to the front, so it's not covered up:
            d3.select(this).moveToFront();
            tooltipSeriesTitle = d3.select(this).attr("title");
            refreshTooltipHtml();
            tooltip.style("left", (d3.event.pageX) + "px")
                   .style("top", (d3.event.pageY - 28) + "px")
                   .style("opacity", 0.9)
        }).on("mouseout", function(d) {
            tooltip.style("opacity", 0);
            // Send the series to the back, unless it's already highlighted
            // due to matching the query:
            if (!d3.select(this).classed("highlight")) {
                d3.select(this).moveToBack();
            }
        });

        // Mousing over an individual point upates the tooltip to display its coordinates:
        points.on("mouseover", function(d) {
            tooltipDataValue = d;
            refreshTooltipHtml();
        }).on("mouseout", function() {
            tooltipDataValue = null;
            refreshTooltipHtml();
        });


        // -------------------------- Brushing ---------------------------

        // Implement brushing.  The d3.svg.brush() element provides most of the functionality
        // that we need, except it doesn't allow us to draw multiple brushes on the same
        // plot.  To support this, we'll overlay multiple d3.svg.brush() instances on top
        // of <g> elements.
        //
        // When users users hit the 'New Brush' button, the brush's invisible background is at
        // the front of the SVG, so it accepts pointer events and lets users draw the new brush.
        // After the brush is drawn, we delete its background, so clicking outside of a brush
        // won't delete and re-draw it.

        // This container holds all of the brushes so that they're always
        // drawn above the time-series (even when the series are re-ordered):
        var brushContainer = svg.append("g").attr("class", "brushContainer");

        // Track the active brushes:
        var brushes = [];

        // Click the button to start a new brush:
        var newBrushButton = d3.select("#newBrushButton").on("click", createNewBrush);

        function createNewBrush() {
            var brush = d3.svg.brush()
                    .x(xScale)
                    .y(yScale)
                    .on("brushstart", function() {
                        newBrushButton.attr("disabled", null);
                    })
                    .on("brush", brushmove)
                    .on("brushend", brushend);
            brushes.push(brush);
            newBrushButton.attr("disabled", "disabled");
            brushContainer.append("g").call(brush).call(brush.clear());
        }

        // Highlight the selected time series:
        var matchingSeries = svg.selectAll("g.series.highlight");  // Cached across invocations.
        function brushmove() {
            matchingSeries.classed("highlight", false);
            matchingSeries = svg.selectAll("g.series");
            // For large datasets, it would be better to use an index to accelerate
            // the search for matching series.  In that case, we'd just extract the
            // extents and issues a series of queries.  We could optimize this process
            // by sorting the extends in increasing order of area, based on the idea
            // that smaller extents will have higher selectivities.
            brushes.forEach(function(brush) {
                var e = brush.extent();
                matchingSeries = matchingSeries.filter(function() {
                    // A series matches if at least one of its points falls
                    // within the extent:
                    return ! d3.select(this).selectAll("circle").filter(function() {
                        var cx = xScale.invert(d3.select(this).attr("cx"));
                        if (e[0][0] > cx || cx > e[1][0]) {
                            return false;
                        }
                        var cy = yScale.invert(d3.select(this).attr("cy"));
                        return !(e[0][1] > cy || cy > e[1][1]);
                    }).empty();
                });
             });
            matchingSeries.classed("highlight", true);
            // Move all matching series to the front of their container, so that
            // they're drawn in front and not obscured by unmatched series:
            matchingSeries.moveToFront();
        }

        function brushend() {
            svg.selectAll(".background").data([]).exit().remove();
        }
    });

 </script>

 </body>

 </html>
diff --git a/life-expectancy-at-birth-total-years.csv b/life-expectancy-at-birth-total-years.csv
	<!DOCTYPE html>
	<html>

	<head>
	<title>Time Searcher in D3</title>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<style>
	body {
	font: 10px "Helvetica" sans-serif;
	text-align: center;
	}

	.grid .tick {
	stroke: lightgrey;
	opacity: 0.7;
	}
	.grid path {
	stroke-width: 0;
	}

	.axis {
	shape-rendering: crispEdges;
	fill: #777;
	}

	.axis line {
	stroke: #ccc;
	}

	.series {
	fill: none;
	stroke: #ccc;
	stroke-width: 1.5px;
	stroke-opacity: 0.5;
	}

	.series:hover {
	stroke: #ffa200;
	stroke-opacity: 1;
	stroke-width: 2px;
	}

	.line {
	stroke: inherit;
	}

	.point {
	fill: inherit;
	stroke: inherit;
	}

	.axis .minor {
	stroke-opacity: 0.5;
	}

	.axis path {
	display: none;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: auto;
	height: auto;
	padding: 4px;
	font: 12px sans-serif;
	background: #feffa8;
	border: 1px;
	border-color: #111;
	border-style: solid;
	border-radius: 8px;
	pointer-events: none;
	}

	.extent {
	fill: #00efec;
	fill-opacity: .125;
	stroke: #fff;
	}

	.extent:hover {
	fill-opacity: .25;
	}

	.highlight {
	stroke: #000;
	}

	.label {
	fill: #777;
	font: 12px "Helvetica Neue";
	font-weight: bold;
	}
	</style>

	</head>

	<body>
	<h1>Time Searcher in D3</h1>
	<input type="button" value="New Brush" id="newBrushButton" />
	<br/>
	<svg id="vis"></svg>




	<script>
	// ---------------- Gridlines, axes, and plot setup --------------------
	// Some of this code is adapted from http://bl.ocks.org/mbostock/1166403

	var margin = {top: 20, right: 20, bottom: 20, left: 20},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var svg = d3.select("#vis")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.style("margin-top", margin.top)
	.style("margin-bottom", margin.bottom)
	.style("margin-left", margin.left)
	.style("margin-right", margin.right);

	d3.xhr("life-expectancy-at-birth-total-years.csv", function(error, response) {

	// ---------------- Data loading and axis creation -----------------

	var rawCSV = response.responseText;

	// Process the rows; the first column is the time axis:
	var data = d3.csv.parseRows(rawCSV);
	var headers = data.shift();

	// Calculate domains for scaling the axes:
	var timeDomain = d3.extent(data, function(d) {
	return d[0];
	});
	var nonEmptyValues = data.slice(1).filter(function(d) { return d != ''; });
	var minValue = d3.min(nonEmptyValues, function(d) {
	return d3.min(d);
	});
	var maxValue = d3.max(nonEmptyValues, function(d) {
	return d3.max(d);
	});

	var xScale = d3.scale.linear()
	.domain(timeDomain)
	.range([0, width]);

	var yScale = d3.scale.linear()
	.domain([minValue, maxValue])
	.range([height, 0]);

	// Draw axes and labels:
	var xAxis = d3.svg.axis().scale(xScale);
	var yAxis = d3.svg.axis().scale(yScale).orient("right");
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + width + ", 0)")
	.call(yAxis);
	svg.append("text")
	.attr("class", "label")
	.attr("x", width/2)
	.attr("y", height + 35)
	.attr("text-anchor", "middle")
	.text("Year");

	svg.append("text")
	.attr("class", "label")
	.attr("x", -height/2)
	.attr("y", width + 35)
	.attr("text-anchor", "middle")
	.attr("transform", "rotate(-90)")
	.text("Life Expectancy at Birth, Total (Years)");


	// ---------------- Plotting the time series --------------------


	// Plot the time series points. Each column of the data represents
	// a single time-series and each row represents a single instant in time.
	var transposed = d3.transpose(data);
	var times = transposed.shift();
	var series_names = headers.slice(1);
	var series_data = transposed;

	var line = d3.svg.line()
	.x(function(d, i) { return xScale(times[i]); })
	.y(yScale)
	.defined(function(d) { return d != ""; })
	.interpolate("linear");

	var seriesContainer = svg.append("svg:g")
	.attr("id", "seriesContainer");

	var series = seriesContainer.selectAll("g.path")
	.data(series_data)
	.enter()
	.append("svg:g")
	.attr("class", "series");

	series.attr("title", function(d, i) {
	return series_names[i].replace(/"/g, "");
	});

	var lines = series.append("path")
	.attr("class", "line")
	.attr("d", line);

	var points = series.selectAll("circle")
	.data(function(d) { return d;})
	.enter()
	.append("svg:circle")
	.attr("cx", function(d, i) { return xScale(times[i]); })
	.attr("cy", yScale)
	.attr("r", "1")
	.attr("class", "point");

	// ---------------- Move-to-front ---------------------------------

	// The following method, from http://stackoverflow.com/questions/14167863,
	// is used to move DOM elements to the front. I use this to ensure that
	// highlighted series aren't obscured in dense regions of the graph.

	d3.selection.prototype.moveToFront = function() {
	return this.each(function(){
	this.parentNode.appendChild(this);
	});
	};

	d3.selection.prototype.moveToBack = function() {
	return this.each(function(){
	// Unfortunately, prependChild() doesn't exist:
	// http://blogs.adobe.com/cantrell/archives/2011/11/adding-prependchild-to-element.html
	this.parentNode.insertBefore(this, this.parentNode.firstChild);
	});
	};

	// ---------------- Tooltips and mouseover events -----------------

	// Tooltip code adapted from
	// http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

	var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	var tooltipSeriesTitle = "";
	var tooltipDataValue = null;

	function refreshTooltipHtml() {
	var html = "<b>" + tooltipSeriesTitle + "</b>";
	if (tooltipDataValue !== null) {
	html += "<br/>" + tooltipDataValue;
	}
	tooltip.html(html);
	}

	// Mousing over a series displays its name:
	series.on("mouseover", function(d) {
	// Move the selected series to the front, so it's not covered up:
	d3.select(this).moveToFront();
	tooltipSeriesTitle = d3.select(this).attr("title");
	refreshTooltipHtml();
	tooltip.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px")
	.style("opacity", 0.9)
	}).on("mouseout", function(d) {
	tooltip.style("opacity", 0);
	// Send the series to the back, unless it's already highlighted
	// due to matching the query:
	if (!d3.select(this).classed("highlight")) {
	d3.select(this).moveToBack();
	}
	});

	// Mousing over an individual point upates the tooltip to display its coordinates:
	points.on("mouseover", function(d) {
	tooltipDataValue = d;
	refreshTooltipHtml();
	}).on("mouseout", function() {
	tooltipDataValue = null;
	refreshTooltipHtml();
	});


	// -------------------------- Brushing ---------------------------

	// Implement brushing. The d3.svg.brush() element provides most of the functionality
	// that we need, except it doesn't allow us to draw multiple brushes on the same
	// plot. To support this, we'll overlay multiple d3.svg.brush() instances on top
	// of <g> elements.
	//
	// When users users hit the 'New Brush' button, the brush's invisible background is at
	// the front of the SVG, so it accepts pointer events and lets users draw the new brush.
	// After the brush is drawn, we delete its background, so clicking outside of a brush
	// won't delete and re-draw it.

	// This container holds all of the brushes so that they're always
	// drawn above the time-series (even when the series are re-ordered):
	var brushContainer = svg.append("g").attr("class", "brushContainer");

	// Track the active brushes:
	var brushes = [];

	// Click the button to start a new brush:
	var newBrushButton = d3.select("#newBrushButton").on("click", createNewBrush);

	function createNewBrush() {
	var brush = d3.svg.brush()
	.x(xScale)
	.y(yScale)
	.on("brushstart", function() {
	newBrushButton.attr("disabled", null);
	})
	.on("brush", brushmove)
	.on("brushend", brushend);
	brushes.push(brush);
	newBrushButton.attr("disabled", "disabled");
	brushContainer.append("g").call(brush).call(brush.clear());
	}

	// Highlight the selected time series:
	var matchingSeries = svg.selectAll("g.series.highlight"); // Cached across invocations.
	function brushmove() {
	matchingSeries.classed("highlight", false);
	matchingSeries = svg.selectAll("g.series");
	// For large datasets, it would be better to use an index to accelerate
	// the search for matching series. In that case, we'd just extract the
	// extents and issues a series of queries. We could optimize this process
	// by sorting the extends in increasing order of area, based on the idea
	// that smaller extents will have higher selectivities.
	brushes.forEach(function(brush) {
	var e = brush.extent();
	matchingSeries = matchingSeries.filter(function() {
	// A series matches if at least one of its points falls
	// within the extent:
	return ! d3.select(this).selectAll("circle").filter(function() {
	var cx = xScale.invert(d3.select(this).attr("cx"));
	if (e[0][0] > cx \|\| cx > e[1][0]) {
	return false;
	}
	var cy = yScale.invert(d3.select(this).attr("cy"));
	return !(e[0][1] > cy \|\| cy > e[1][1]);
	}).empty();
	});
	});
	matchingSeries.classed("highlight", true);
	// Move all matching series to the front of their container, so that
	// they're drawn in front and not obscured by unmatched series:
	matchingSeries.moveToFront();
	}

	function brushend() {
	svg.selectAll(".background").data([]).exit().remove();
	}
	});

	</script>

	</body>

	</html>