We can make this file beautiful and searchable if this error is corrected: It looks like row 4 should actually have 5 columns, instead of 6.
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment