phil-pedruco · August 29, 2015 13:56
diff --git a/data.tsv b/data.tsv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
    path.line {
        fill: none;
        stroke-width: 2px;
    }
    path.domain {
        fill: none;
        stroke: black;
        stroke-width: 1px;
        shape-rendering: crispEdges;
    }
    .choosen {
        fill: none;
        stroke: green;
        stroke-width: 2px;
        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="dropDown"></div>
    <div id="chart"></div>

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

 var stateData;

 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.thing);
    });


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

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

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

    stateData = states;

    d3.select("#dropDown")
        .append("select")
        .on("change", function() {
            change(this.options[this.selectedIndex].__data__);
        })
        .selectAll("option")
        .data(names.filter(function(d) {
            return d !== "United States";
        })).enter()
        .append("option")
        .text(function(d) {
            return d;
        });

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

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

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

    var stateLines = svg.selectAll(".states")
        .data(states).enter()
        .append("path")
        .attr("class", "line")
        .attr("d", function(d) {
            return line(d.values);
        })
        .attr("stroke", function(d, i) {
            return (d.name === "United States") ? "orange" : "grey";
        });

    var usFilter = stateFilter("United States");

    var maxUS = dataMax(usFilter);

    change("Alabama");

    function change(x) {

        var data = stateFilter(x);

        var maxNew = Math.max(dataMax(data), maxUS);

        var greenLine = svg.selectAll(".choosen")
            .data(data);

        y.domain([0, maxNew]);

        greenLine.transition()
            .duration(2000)
            .attr("d", function(d) {
                return line(d.values);
            });

        greenLine.enter().append("path")
            .attr("class", "choosen")
            .attr("d", function(d) {
                return line(d.values);
            });

        stateLines.transition().duration(2000)
            .attr("d", function(d) {
                return line(d.values);
            });

        greenLine.exit()
            .transition()
            .duration(2000)
            .remove();

        svg.selectAll(".y")
            .transition().duration(2000)
            .call(yAxis.scale(y));
    }

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

    function stateFilter(x) {
        var ans = states.filter(function(d) {
            return d.name === x;
        });
        return ans
    }
 })
 </script>

 </html>
diff --git a/thumbnail.png b/thumbnail.png
Date	Alabama	Alaska	Arizona	Arkansas	California	Colorado	Connecticut	Delaware	Midwest	Northeast	South	West	United States
1917	14.3	2.8	11.7	11.2	15	13.3	19.1	37.9	13.1	22.9	15.7	13.2	17.3
1918	11.5	1.3	11.6	11.7	14.9	10.3	16.9	32.9	11.7	20.2	15.1	11.7	15.6
1919	13.2	1.1	9.8	9.9	15	12.1	16.6	30.4	12.8	21.2	14.3	12.2	16
1920	12.1	1.2	8.3	9.6	12.7	11.1	14.1	21	12.4	17.8	13.5	10.9	14.5
1921	13.4	2.1	8.4	10.6	13.4	11.7	16.4	21.8	13.2	17.9	14	12	15.3
1922	14.2	2	9.8	11.7	14.2	13.6	16.6	23	14.1	19.8	15	12.8	16.6
1923	13.4	1.9	9.1	10.9	13.4	12.1	16.2	22.7	12.9	18	14.4	12	15.3
1924	14.5	2.3	10.4	11.1	14.7	13.1	18.5	29.1	14.7	20	15.3	12.9	17
1925	15.8	3.1	14.2	12.5	16.3	16	21.3	35.4	17.3	22.9	18	15.2	19.8
1926	15.2	4.5	14	12.3	17.3	15.7	20	38.1	17.4	21.6	17.7	16.2	19.4
1927	15.6	4.6	14.7	13.3	17.5	17.4	21.2	42.1	18	23	18.5	16.4	20.5
1928	17.6	5.2	17.5	14	20	19.3	23.6	45	20.6	26.3	20.4	18.8	23.4
1929	14.2	2.9	14.3	12.8	17.5	16.9	23.6	67.8	18.1	27.4	17.4	16.1	21.8
1930	14.4	3	12	12.7	14.4	14.7	17.1	28	15.2	18.5	15.5	13.5	16.8
1931	14.5	3.1	11.4	11.2	12.9	14.7	15	25.1	13.9	15.8	14.9	12.6	15.1
1932	14.8	3	11.2	12.8	12.8	14.2	15.3	28.6	13.5	16.1	15.3	12.4	15.2
1933	14.5	3.3	10.7	14	13.3	13.6	15.8	29.4	14.3	17.6	15.5	12.9	16.1
1934	13.8	3.6	11.5	14.5	14.6	16.6	15.7	34	14.7	17	16	13.8	16
1935	14.1	4	11.8	13.9	15	16	17.1	36.4	14.4	17.9	16.2	14.2	16.3
1936	15.7	4.4	13.7	16	16.7	17.9	20.5	46	17.6	20.2	18.6	15.8	18.8
1937	15.5	4.3	12.7	14.5	15.4	17.5	18.8	41.7	15.3	17.8	17.2	14.8	16.8
1938	14.9	4.3	11.4	15.1	13.8	14.9	15.9	34.6	14.2	15.2	16.3	13.1	15.1
1939	16.1	5.1	11.7	15.4	13.4	15.3	16.8	44.7	14.7	16	16.4	13	15.5
1940	16.3	5.6	11.8	16.1	13.2	14.9	16.8	39.6	15.3	16.1	16.8	13.1	15.8
1941	15.9	5.9	12.2	17.5	13.1	15.1	15.1	30.2	14.5	15.5	16	12.9	15.1
1942	13.2	6.1	11.4	13.3	11.3	13	12.5	18.8	12.6	13.7	12.9	11.4	13
1943	11.7	5.2	9.2	12.9	10.7	12.8	11.5	18	11.4	12.8	11.7	10.6	11.9
1944	13.6	6.4	11	13.7	9.9	13.1	10.1	9.9	12.6	11.4	12.3	10.5	11.9
1945	12	4.7	11.2	11.8	11.5	13.6	13.3	21.8	12.4	14.7	12.2	11.4	13.1
1946	13.6	4.4	11.7	13.7	11.5	13.2	12.8	22.2	12.2	14.1	13.3	11.3	13.1
1947	12.2	4	10	13.5	10.4	11.8	11.3	20.6	10.9	12.4	11.8	10.3	11.7
1948	12.1	4.4	11.4	12.5	12.5	12.8	12.3	22.3	11	13	12.9	11.9	12.3
1949	11.9	4	10.4	12.3	11.6	11.1	12.1	25.1	11	12.4	12.1	10.9	11.7
1950	13	4.2	13.9	13.1	12.8	13.1	13.6	30.7	11.7	13.8	13.4	12.2	12.9
1951	11.4	3.4	11.5	11.2	11.7	11.3	11.7	23.7	10.8	12.7	12	11.2	11.8
1952	10.6	4.5	10.6	10.4	10.3	11.1	12.3	20.2	10	11.6	11.2	10.1	10.8
1953	9.9	4.1	8.7	10.4	9.2	9.6	9.8	20.1	9.4	10.6	10.2	8.9	9.9
1954	10.9	4.3	9.8	12.7	10.3	11.1	11.1	23.1	9.8	11.7	11.3	9.9	10.8
1955	11.2	3.4	10.5	11.4	10.7	11	11.3	25.6	9.8	12.4	11.3	10.2	11.1
1956	10.6	3.4	10.4	11.4	9.5	11.4	11.3	20.4	9.9	11.7	11	9.5	10.7
1957	9.7	4.1	10	10.2	9.2	9.4	9.9	20.1	9.5	10.9	10.6	9.1	10.2
1958	10.1	4.4	9.9	11	9.5	9.5	11	19.8	9.4	11.3	10.3	9.3	10.2
1959	10.5	4.1	10.9	11.1	10	9.5	10.9	20.6	9.5	11.9	10.9	9.7	10.7
1960	9.8	4.7	10.7	10.5	9.4	9.1	10.9	18.4	9.4	10.8	10.3	9.1	10
1961	9.3	5.4	9.9	10.6	10	9.9	11.4	19.6	9.9	11.8	10.6	9.7	10.7
1962	9.5	4.6	9.7	10.9	9.1	9.2	10.3	19.4	9.2	10.7	10.3	8.9	9.9
1963	10	4.6	9.4	11	9.1	9.4	10.3	19	9.2	10.7	10.3	8.9	9.9
1964	10.2	5.6	10.1	11.4	9.8	9.5	11.5	24.7	9.9	11.4	11	9.6	10.6
1965	10.3	5.9	10.7	12	9.9	9.1	11.9	26.3	10.1	11.8	11.2	9.7	10.8
1966	10.3	5	9.3	10.9	9.3	8.9	11	17	9.5	11.3	10.6	9.1	10.3
1967	10.1	5.2	10.2	10.9	10	9.6	11.8	15.5	10	12.1	10.8	9.7	10.8
1968	10.3	5.1	10.3	11.2	10.3	9.7	14.3	14.4	10.1	12.7	11.1	10	11.2
1969	9.7	5.2	9.9	11	9.5	9.3	12.2	13.7	9.6	11.5	10.6	9.4	10.4
1970	9.1	5	8.8	9.7	8.4	7.9	9.7	11.6	8.6	9.7	9.5	8.2	9.1
1971	9.7	5.3	9.1	10.2	8.8	8.5	10.5	11.4	8.7	10.1	10.1	8.6	9.5
1972	9.8	5.2	9.1	10.4	9.1	8.6	10.9	11.4	8.9	10.2	10.3	8.8	9.7
1973	9.7	5.5	8.8	10.6	8.7	8.2	9.8	11.2	8.3	9.5	10	8.6	9.2
1974	8.8	8.4	7.8	9.7	8.6	8.1	9.3	9.1	8	8.8	9	8.3	8.7
1975	9.7	4.8	8.2	10.3	8.5	8.2	9.6	9	8.4	9.2	9.5	8.3	8.9
1976	9.3	4.3	8.2	9.9	8.7	7.8	9.8	9.1	8.5	9.2	9.4	8.3	8.9
1977	9.4	4.8	8.3	9.9	9	8.4	10.2	9.2	8.5	9.3	9.5	8.6	9
1978	8.8	4.9	8.5	9	9	8.3	10.1	9.4	8.4	9.4	9.3	8.6	9
1979	9.5	5.3	9.1	9.8	10.2	9	11.2	10.2	9.1	10.3	10.4	9.6	9.9
1980	9.8	5.1	8.5	9.6	9.7	9.2	11.4	10.2	9.1	10.6	10.4	9.2	9.9
1981	9.4	5.6	8.5	9.5	9.8	9.1	11.3	10	8.9	10.7	10.3	9.2	9.9
1982	10.3	7.1	9.7	10.5	9.9	9.6	11.7	9.7	9.7	10.7	10.7	9.5	10.2
1983	0	0	0	0	0	0	0	0	0	0	0	0	0
1984	0	0	0	0	0	0	0	0	0	0	0	0	0
1985	0	0	0	0	0	0	0	0	0	0	0	0	0
1986	12.4	7.1	12.1	12	12.9	10.7	16.3	11.2	11.2	15.1	13.2	12.1	13
1987	10	6.6	10.2	9.9	11.3	8.8	13.5	9.3	9.7	12.7	10.8	10.4	11
1988	11.2	7	11.3	11.3	13.4	10.3	16	10.6	11.2	14.7	12.5	12.4	12.8
1989	10.9	7.6	10.7	10.4	13.4	10	14.2	10	10.7	13.6	12.1	12.3	12.3
1990	12.5	11.4	12.8	12.3	16	12.3	16.5	11.6	12.7	15.6	13.8	15	14.4
1991	12.4	8.5	12.2	11.9	14.2	11.8	15.8	11.2	12.4	14.7	13	13.5	13.5
1992	13.6	9.1	13.4	13	15	13.1	18.9	12.2	13.5	16.7	14.3	14.4	14.9
1993	13.2	8.8	13.2	12.6	14.4	13.1	18.3	12.2	13.3	16.3	13.9	13.9	14.5
1994	13.9	9	13.3	13.4	14.4	13.4	17.3	12.3	13.4	15.9	14	13.9	14.4
1995	14.4	9	14.4	13.5	15.6	13.7	19.7	12.8	13.9	17.1	14.6	14.9	15.2
1996	14.7	9.6	16.2	13.3	17.2	14.7	21.9	14.2	17	18.8	15.7	16.4	16.5
1997	15.1	10.1	16.8	13.5	18.9	16.2	25.5	20.9	15.5	20.4	17	17.8	17.8
1998	15.4	11.2	17.4	14.9	19.4	17.4	26.6	16.2	16.3	21.5	17.8	18.7	18.7
1999	15.5	10.5	17.6	14.5	23.3	18.6	27.5	24.9	16.1	22.8	17.7	21.6	19.6
2000	15	11.5	17.8	14.8	27.5	20.5	30.4	17.5	16.1	24.6	18.1	24.1	20.9
2001	14	10.3	15.6	14	19.9	16.4	27.8	14.8	14.5	22.7	16.2	18.2	18.1
2002	13.9	10.1	14.6	14.2	17.4	14.8	23.4	13.9	14.4	19.6	15.4	16.5	16.6
2003	14.3	10.9	15.6	14.1	18.7	15.1	25	14.8	13.2	18.4	14.6	15.7	17.2
2004	15.6	11.4	18.7	15.1	20.9	17.5	27.6	17.7	15.7	22.2	18	19.6	19.1
2005	17.7	12	21.7	16	23.2	18.8	29.7	20.5	16.7	23.7	20.4	21.7	21
2006	19.3	12.6	21.8	15.5	22.6	20.1	29.9	18	17.4	24.5	21	21.7	21.5
2007	18.5	12.8	20	16.1	22.7	19.7	33.4	17.3	17.8	26.1	20.1	21.5	21.8
2008	16.7	13	16.8	15.9	19.3	16.9	27.4	15.2	16.4	22.7	18.9	18.3	19.5
2009	15.2	12.3	16	17.2	18.6	15.3	26.5	13.8	15.3	21.3	17	17.4	18
2010	16.7	12.6	16.9	17.3	21.8	17.7	31.5	13.7	16.8	23.9	18.3	19.7	19.9
2011	16.2	12	16.9	17.6	21.3	18.8	29.1	14.1	16.6	23.6	18.5	19.5	19.8
2012	0	0	0	0	0	0	0	0	0	0	0	0	0
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="" rel="stylesheet">
	<style type="text/css">
	path.line {
	fill: none;
	stroke-width: 2px;
	}
	path.domain {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	shape-rendering: crispEdges;
	}
	.choosen {
	fill: none;
	stroke: green;
	stroke-width: 2px;
	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="dropDown"></div>
	<div id="chart"></div>

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

	var stateData;

	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.thing);
	});


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

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

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

	stateData = states;

	d3.select("#dropDown")
	.append("select")
	.on("change", function() {
	change(this.options[this.selectedIndex].__data__);
	})
	.selectAll("option")
	.data(names.filter(function(d) {
	return d !== "United States";
	})).enter()
	.append("option")
	.text(function(d) {
	return d;
	});

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

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

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

	var stateLines = svg.selectAll(".states")
	.data(states).enter()
	.append("path")
	.attr("class", "line")
	.attr("d", function(d) {
	return line(d.values);
	})
	.attr("stroke", function(d, i) {
	return (d.name === "United States") ? "orange" : "grey";
	});

	var usFilter = stateFilter("United States");

	var maxUS = dataMax(usFilter);

	change("Alabama");

	function change(x) {

	var data = stateFilter(x);

	var maxNew = Math.max(dataMax(data), maxUS);

	var greenLine = svg.selectAll(".choosen")
	.data(data);

	y.domain([0, maxNew]);

	greenLine.transition()
	.duration(2000)
	.attr("d", function(d) {
	return line(d.values);
	});

	greenLine.enter().append("path")
	.attr("class", "choosen")
	.attr("d", function(d) {
	return line(d.values);
	});

	stateLines.transition().duration(2000)
	.attr("d", function(d) {
	return line(d.values);
	});

	greenLine.exit()
	.transition()
	.duration(2000)
	.remove();

	svg.selectAll(".y")
	.transition().duration(2000)
	.call(yAxis.scale(y));
	}

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

	function stateFilter(x) {
	var ans = states.filter(function(d) {
	return d.name === x;
	});
	return ans
	}
	})
	</script>

	</html>