phil-pedruco/data.tsv

## data.tsv
Date	First	Second	Third	Fourth
1917	14.3	2.8	11.7	11.2
1918	11.5	1.3	11.6	11.2
1919	13.2	1.1	9.8	9.9
1920	12.1	1.2	8.3	9.6
1921	13.4	2.1	8.4	10.6
1922	14.2	2	9.8	11.7
1923	13.4	1.9	9.1	10.9
1924	14.5	2.3	10.4	11.1
1925	15.8	3.1	14.2	12.2
1926	15.2	4.5	14	12.3
1927	15.6	4.6	14.7	13.3
1928	17.6	5.2	17.5	14
1929	14.2	2.9	14.3	12.2
1930	14.4	3	12	12.7
1931	14.5	3.1	11.4	11.6
1932	14.8	3	11.2	12.8
1933	14.5	3.3	10.7	14
1934	13.8	3.6	11.5	14.4
1935	14.1	4	11.8	13.9
1936	15.7	4.4	13.7	16
1937	15.5	4.3	12.7	14.5
1938	14.9	4.3	11.4	15.9
1939	16.1	5.1	11.7	15.7
1940	16.3	5.6	11.8	16.3
1941	15.9	5.9	12.2	17.2
1942	13.2	6.1	11.4	13.1
1943	11.7	5.2	9.2	12.9
1944	13.6	6.4	11	13.7
1945	12	4.7	11.2	11.8
1946	13.6	4.4	11.7	13.
1947	12.2	4	10	13.5
1948	12.1	4.4	11.4	12.3
1949	11.9	4	10.4	12.3
1950	13	4.2	13.9	13.1
1951	11.4	3.4	11.5	11.2
1952	10.6	4.5	10.6	10.2
1953	9.9	4.1	8.7	10.4
1954	10.9	4.3	9.8	12.7
1955	11.2	3.4	10.5	11.4
1956	10.6	3.4	10.4	11.5
1957	9.7	4.1	10	10.2
1958	10.1	4.4	9.9	11	9
1959	10.5	4.1	10.9	11.6
1960	9.8	4.7	10.7	10.7
1961	9.3	5.4	9.9	10.6
1962	9.5	4.6	9.7	10.9
1963	10	4.6	9.4	11
1964	10.2	5.6	10.1	11.8
1965	10.3	5.9	10.7	12
1966	10.3	5	9.3	10.9
1967	10.1	5.2	10.2	10.7
1968	10.3	5.1	10.3	11.7
1969	9.7	5.2	9.9	11
1970	9.1	5	8.8	9.7
1971	9.7	5.3	9.1	10.2
1972	9.8	5.2	9.1	10.4
1973	9.7	5.5	8.8	10.6
1974	8.8	8.4	7.8	9.7
1975	9.7	4.8	8.2	10.3
1976	9.3	4.3	8.2	9.9

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Line Chart Examples</title>

    <style type="text/css">
    path.line {
        fill: none;
        stroke-width: 2px;
    }
    path.domain {
        fill: none;
        stroke: black;
        stroke-width: 1px;
        shape-rendering: crispEdges;
    }
    text {
        font-family: arial;
    }
    </style>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

</head>

<body>

    <div id="chart" style="width:760; float:left"></div>
    <div id="legend" style="width:200; float:left"></div>

</body>
<script type="text/javascript">
var margin = {
    top: 20,
    right: 30,
    bottom: 30,
    left: 60
},
    width = 760 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom;

var data;

var colours = d3.scale.ordinal()
                .range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b"]);

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickFormat(d3.format(".0f"))
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .tickFormat(d3.format(",.0f"))
    .orient("left");

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.svg.line()
    .interpolate("linear")
    .x(function(d) {
        return x(+d.date);
    })
    .y(function(d) {
        return y(+d.values);
    });

d3.tsv('data.tsv', function(error, dataset) {

    var names = d3.keys(dataset[0]).filter(function(key) {
        return key !== "Date";
    });

    var series = names.map(function(name) {
        return {
            name: name,
            values: dataset.map(function(d) {
                return {
                    date: d.Date,
                    values: +d[name]
                };
            })
        };
    });

    data = series;

    var all = names.concat(["all"])

    colours.domain(all);

    d3.select("#legend").selectAll("p")
        .data(all).enter()
        .append("p")
        .style("color", function(d, i) {
            return colours(d);
        })
        .text(function(d, i) {
            return d;
        })
        .on("click", change);

    var maxNew = dataMax(data);

    x.domain(d3.extent(dataset, function(d, i) {
        return +d.Date;
    }));

    y.domain([0, maxNew]);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    change("all");

    function change(x) {

        var dataFiltered = seriesFilter(x);

        var lines = svg.selectAll("path.line")
            .data(dataFiltered);

        lines.enter()
            .append("path")
            .attr("class", "line")
            .attr("d", function(d) {
                return line(d.values);
            })
            .attr("id", function (d) {
                return d.name;
            })
            .attr("stroke", function(d, i) {
                return colours(d.name);
            });

        lines.transition()
            .duration(2000)
            .attr("d", function(d) {
                return line(d.values);
            })
            .attr("stroke", function(d, i) {
                return colours(d.name);
            });

        lines.exit()
            .transition()
            .duration(2000)
            .remove();
    }

    function dataMax(x) {
        var maxer;
        d3.max(x, function(d) {
            var temp = [];
            d.values.forEach(function(e, j) {
                temp[j] = e.values;
            })
            maxer = Math.max.apply(null, temp);
        });
        return maxer;
    }

    function seriesFilter(x) {
        var ans;
        if (x === "all") {
            ans = series;
        } else {
            ans = series.filter(function(d) {
                return d.name !== x;
            });
        }

        return ans
    }
})
</script>

</html>
	Date First Second Third Fourth
	1917 14.3 2.8 11.7 11.2
	1918 11.5 1.3 11.6 11.2
	1919 13.2 1.1 9.8 9.9
	1920 12.1 1.2 8.3 9.6
	1921 13.4 2.1 8.4 10.6
	1922 14.2 2 9.8 11.7
	1923 13.4 1.9 9.1 10.9
	1924 14.5 2.3 10.4 11.1
	1925 15.8 3.1 14.2 12.2
	1926 15.2 4.5 14 12.3
	1927 15.6 4.6 14.7 13.3
	1928 17.6 5.2 17.5 14
	1929 14.2 2.9 14.3 12.2
	1930 14.4 3 12 12.7
	1931 14.5 3.1 11.4 11.6
	1932 14.8 3 11.2 12.8
	1933 14.5 3.3 10.7 14
	1934 13.8 3.6 11.5 14.4
	1935 14.1 4 11.8 13.9
	1936 15.7 4.4 13.7 16
	1937 15.5 4.3 12.7 14.5
	1938 14.9 4.3 11.4 15.9
	1939 16.1 5.1 11.7 15.7
	1940 16.3 5.6 11.8 16.3
	1941 15.9 5.9 12.2 17.2
	1942 13.2 6.1 11.4 13.1
	1943 11.7 5.2 9.2 12.9
	1944 13.6 6.4 11 13.7
	1945 12 4.7 11.2 11.8
	1946 13.6 4.4 11.7 13.
	1947 12.2 4 10 13.5
	1948 12.1 4.4 11.4 12.3
	1949 11.9 4 10.4 12.3
	1950 13 4.2 13.9 13.1
	1951 11.4 3.4 11.5 11.2
	1952 10.6 4.5 10.6 10.2
	1953 9.9 4.1 8.7 10.4
	1954 10.9 4.3 9.8 12.7
	1955 11.2 3.4 10.5 11.4
	1956 10.6 3.4 10.4 11.5
	1957 9.7 4.1 10 10.2
	1958 10.1 4.4 9.9 11 9
	1959 10.5 4.1 10.9 11.6
	1960 9.8 4.7 10.7 10.7
	1961 9.3 5.4 9.9 10.6
	1962 9.5 4.6 9.7 10.9
	1963 10 4.6 9.4 11
	1964 10.2 5.6 10.1 11.8
	1965 10.3 5.9 10.7 12
	1966 10.3 5 9.3 10.9
	1967 10.1 5.2 10.2 10.7
	1968 10.3 5.1 10.3 11.7
	1969 9.7 5.2 9.9 11
	1970 9.1 5 8.8 9.7
	1971 9.7 5.3 9.1 10.2
	1972 9.8 5.2 9.1 10.4
	1973 9.7 5.5 8.8 10.6
	1974 8.8 8.4 7.8 9.7
	1975 9.7 4.8 8.2 10.3
	1976 9.3 4.3 8.2 9.9
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Line Chart Examples</title>

	<style type="text/css">
	path.line {
	fill: none;
	stroke-width: 2px;
	}
	path.domain {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	shape-rendering: crispEdges;
	}
	text {
	font-family: arial;
	}
	</style>

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	</head>

	<body>

	<div id="chart" style="width:760; float:left"></div>
	<div id="legend" style="width:200; float:left"></div>

	</body>
	<script type="text/javascript">
	var margin = {
	top: 20,
	right: 30,
	bottom: 30,
	left: 60
	},
	width = 760 - margin.left - margin.right,
	height = 350 - margin.top - margin.bottom;

	var data;

	var colours = d3.scale.ordinal()
	.range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b"]);

	var x = d3.scale.linear()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.tickFormat(d3.format(".0f"))
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.tickFormat(d3.format(",.0f"))
	.orient("left");

	var svg = d3.select("#chart").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var line = d3.svg.line()
	.interpolate("linear")
	.x(function(d) {
	return x(+d.date);
	})
	.y(function(d) {
	return y(+d.values);
	});

	d3.tsv('data.tsv', function(error, dataset) {

	var names = d3.keys(dataset[0]).filter(function(key) {
	return key !== "Date";
	});

	var series = names.map(function(name) {
	return {
	name: name,
	values: dataset.map(function(d) {
	return {
	date: d.Date,
	values: +d[name]
	};
	})
	};
	});

	data = series;

	var all = names.concat(["all"])

	colours.domain(all);

	d3.select("#legend").selectAll("p")
	.data(all).enter()
	.append("p")
	.style("color", function(d, i) {
	return colours(d);
	})
	.text(function(d, i) {
	return d;
	})
	.on("click", change);

	var maxNew = dataMax(data);

	x.domain(d3.extent(dataset, function(d, i) {
	return +d.Date;
	}));

	y.domain([0, maxNew]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	change("all");

	function change(x) {

	var dataFiltered = seriesFilter(x);

	var lines = svg.selectAll("path.line")
	.data(dataFiltered);

	lines.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", function(d) {
	return line(d.values);
	})
	.attr("id", function (d) {
	return d.name;
	})
	.attr("stroke", function(d, i) {
	return colours(d.name);
	});

	lines.transition()
	.duration(2000)
	.attr("d", function(d) {
	return line(d.values);
	})
	.attr("stroke", function(d, i) {
	return colours(d.name);
	});

	lines.exit()
	.transition()
	.duration(2000)
	.remove();
	}

	function dataMax(x) {
	var maxer;
	d3.max(x, function(d) {
	var temp = [];
	d.values.forEach(function(e, j) {
	temp[j] = e.values;
	})
	maxer = Math.max.apply(null, temp);
	});
	return maxer;
	}

	function seriesFilter(x) {
	var ans;
	if (x === "all") {
	ans = series;
	} else {
	ans = series.filter(function(d) {
	return d.name !== x;
	});
	}

	return ans
	}
	})
	</script>

	</html>