datafunk · May 30, 2017 04:45
diff --git a/README.md b/README.md
diff --git a/Global-ocean-land-temperatures.csv b/Global-ocean-land-temperatures.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>#KnightD3 wk6 linechart</title>

 <!-- <script type="text/javascript" src="d3.v3.js"></script> -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>


        <style type="text/css">

            html, body, * {
                font-family: Arial, sans-serif;
                text-align: center;
                font-size: 14px 65%;
            }

            div#title {
                width: 700px;
                margin: 10px auto 0;
                padding: 5px 20px;
                background-color: grey;
                border: 1px solid grey;
                color: white;
                box-shadow: 3px 0px 3px lightgrey;
            }

            h1 {
                font-family: Georgia, serif;
                font-size: 1.2em;
                letter-spacing: 1px;
                margin: 0 auto;
            }

            h2 {
                font-size: .9em;
                font-weight:100;
                margin: .3em auto;
            }

            p {
                font-size: .7em;
                margin: 5px auto;
            }

            div#chart {
                width:740px;
                height: 400px;
                margin: 0 auto 1em;
                border: 1px solid grey;
                box-shadow: 3px 3px 3px lightgrey;
            }

            svg {
                background-color: white;
            }

            path.line {
                /*stroke: black;*/
                stroke-width:.5px;
                fill:none;
            }

            path.x.axis {
                stroke: black;
                stroke-width:.4px;
            }

            .x.axis path,
            .x.axis line {
                fill: none;
                stroke: none;
                shape-rendering: crispEdges;
            }

            .y.axis path,
            .y.axis line {
                fill: none;
                stroke: none;
                shape-rendering: crispEdges;
            }

            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }

        </style>

 </head>
 <body>

    <div id="title">
        <h1>
            Monthly mean Land &amp; Ocean Temperature
        </h1>
        <p>deviation from the base period of 1951-1980</p>
    </div>
    <div id="chart"></div>

 <script type="text/javascript" src="linechart.js"></script>

 </body>
 </html>
diff --git a/linechart.js b/linechart.js
 var margin = {
    top: 20,
    right: 0,
    bottom: 20,
    left: 30
 };
 var width = 680 - margin.left - margin.right;
 var height = 360 - margin.top - margin.bottom;

 var x = d3.scale.ordinal()
    .rangeRoundBands([0, width]);

 var y = d3.scale.linear()
    .rangeRound([height - 20, 0]);

 var xLabel = d3.time.scale()
    .domain([new Date(1960, 0, 1), new Date(2014, 11, 31)])
    .range([0, width]);

 var xAxis = d3.svg.axis()
    .scale(xLabel)
    .ticks(3)
    .tickFormat(d3.time.format("%Y"));

 var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(4)
    .orient("left");

 var line = d3.svg.line()
    .defined(function(d) {
        if (!isNaN(d.value)) {
            return d.value;
        }
    })
    .interpolate("cardinal")
    .x(function(d) {
        return x(d.label) + x.rangeBand() / 2;
    })
    .y(function(d) {
        return y(d.value);
    });

    var colors = ["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000", "#cc4c02", "#993404", "#662506"];

    var color = d3.scale.ordinal().range(colors);




 var dateFormat = d3.time.format("%Y");

 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 + ")");

 d3.csv("Global-ocean-land-temperatures.csv", function(error, data) {

    // console.log(data);

    var years = Object.keys(data[0]);
    years.sort();

    var labelVar = 'year';
    var varNames = d3.keys(data[0]).filter(function(key) {
        return key !== labelVar;
    });
    color.domain(varNames);

    var seriesData = varNames.map(function(name) {
        return {
            name: name,
            values: data.map(function(d) {
                return {
                    name: name,
                    label: d[labelVar],
                    value: +d[name]
                };
            })
        };
    });

    // console.log(seriesData);

    data.forEach(function(d) {
        d.year = +d.year;
    });

    x.domain(data.map(function(d) {
        return d.year;
    }));
    y.domain([d3.min(seriesData, function(c) {
        return d3.min(c.values, function(d) {
            return d.value;
        });
    }),
    d3.max(seriesData, function(c) {
        return d3.max(c.values, function(d) {
                return d.value;
            });
        })
    ]);

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

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("x", 0)
        .attr("y", 0)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("°C");

    var series = svg.selectAll(".series")
        .data(seriesData)
        .enter().append("g")
        .attr("class", "series")
        .attr("transform", "translate(-20,0)");

    series.append("path")
        .attr("class", "line")
        .attr("id", function(d) {
            return d.name
        })
        .attr("stroke", function(d, i){
            return colors[i];
        })
        .attr("opacity", 0)
        .transition()
        .delay(function(d, i) {
            return i * 550;
        })
        .duration(500)
        .attr("d", function(d, i) {
            return line(d.values);
        })
        .attr("opacity", 1);

 });
diff --git a/thumbnail.png b/thumbnail.png
year	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
1880	-0.3	-0.21	-0.19	-0.28	-0.15	-0.29	-0.24	-0.08	-0.17	-0.17	-0.19	-0.21
1881	-0.09	-0.14	0.01	-0.03	-0.05	-0.29	-0.06	-0.02	-0.09	-0.2	-0.26	-0.15
1882	0.09	0.08	0.01	-0.2	-0.18	-0.25	-0.1	0.03	-0.01	-0.23	-0.21	-0.25
1883	-0.33	-0.42	-0.18	-0.24	-0.26	-0.12	-0.09	-0.13	-0.19	-0.12	-0.21	-0.18
1884	-0.18	-0.12	-0.35	-0.36	-0.33	-0.39	-0.34	-0.26	-0.24	-0.23	-0.31	-0.3
1885	-0.65	-0.3	-0.24	-0.45	-0.42	-0.51	-0.29	-0.28	-0.2	-0.2	-0.23	-0.06
1886	-0.42	-0.46	-0.42	-0.3	-0.28	-0.4	-0.17	-0.33	-0.2	-0.26	-0.27	-0.26
1887	-0.66	-0.48	-0.32	-0.38	-0.34	-0.21	-0.19	-0.28	-0.21	-0.33	-0.27	-0.38
1888	-0.43	-0.42	-0.48	-0.28	-0.22	-0.21	-0.09	-0.11	-0.08	0.01	-0.01	-0.12
1889	-0.2	0.14	0.03	0.04	-0.04	-0.12	-0.06	-0.19	-0.2	-0.23	-0.31	-0.3
1890	-0.47	-0.49	-0.42	-0.39	-0.49	-0.28	-0.3	-0.37	-0.37	-0.24	-0.38	-0.3
1891	-0.46	-0.49	-0.15	-0.26	-0.18	-0.22	-0.22	-0.21	-0.14	-0.24	-0.37	-0.01
1892	-0.25	-0.14	-0.36	-0.35	-0.25	-0.2	-0.27	-0.19	-0.25	-0.17	-0.5	-0.28
1893	-0.68	-0.5	-0.24	-0.32	-0.35	-0.23	-0.13	-0.23	-0.18	-0.16	-0.17	-0.37
1894	-0.55	-0.32	-0.21	-0.41	-0.3	-0.44	-0.32	-0.27	-0.23	-0.17	-0.25	-0.22
1895	-0.44	-0.43	-0.3	-0.23	-0.23	-0.25	-0.17	-0.16	-0.02	-0.11	-0.16	-0.12
1896	-0.23	-0.15	-0.3	-0.33	-0.2	-0.14	-0.06	-0.08	-0.04	0.05	-0.16	-0.12
1897	-0.23	-0.19	-0.13	-0.02	-0.01	-0.14	-0.05	-0.04	-0.05	-0.1	-0.18	-0.26
1898	-0.07	-0.33	-0.57	-0.35	-0.37	-0.22	-0.24	-0.24	-0.2	-0.33	-0.36	-0.21
1899	-0.17	-0.4	-0.34	-0.21	-0.21	-0.26	-0.14	-0.05	-0.03	-0.01	0.12	-0.26
1900	-0.39	-0.07	0.02	-0.14	-0.05	-0.14	-0.06	-0.03	0.01	0.09	-0.13	-0.13
1901	-0.27	-0.04	0.06	-0.05	-0.17	-0.1	-0.08	-0.12	-0.17	-0.28	-0.16	-0.28
1902	-0.17	-0.03	-0.29	-0.28	-0.3	-0.32	-0.25	-0.28	-0.21	-0.26	-0.36	-0.46
1903	-0.28	-0.06	-0.23	-0.4	-0.42	-0.44	-0.3	-0.44	-0.43	-0.42	-0.39	-0.47
1904	-0.64	-0.54	-0.46	-0.5	-0.5	-0.5	-0.48	-0.43	-0.47	-0.35	-0.17	-0.29
1905	-0.38	-0.58	-0.25	-0.37	-0.34	-0.31	-0.23	-0.2	-0.15	-0.24	-0.09	-0.2
1906	-0.3	-0.32	-0.16	-0.03	-0.21	-0.21	-0.25	-0.18	-0.26	-0.21	-0.39	-0.18
1907	-0.44	-0.5	-0.24	-0.4	-0.46	-0.43	-0.36	-0.37	-0.33	-0.24	-0.51	-0.5
1908	-0.45	-0.35	-0.57	-0.46	-0.4	-0.39	-0.34	-0.44	-0.34	-0.44	-0.51	-0.5
1909	-0.7	-0.47	-0.52	-0.59	-0.54	-0.53	-0.43	-0.31	-0.38	-0.4	-0.33	-0.54
1910	-0.43	-0.42	-0.48	-0.38	-0.34	-0.38	-0.32	-0.34	-0.38	-0.39	-0.56	-0.69
1911	-0.63	-0.6	-0.63	-0.55	-0.52	-0.47	-0.42	-0.44	-0.39	-0.26	-0.2	-0.24
1912	-0.27	-0.15	-0.38	-0.21	-0.2	-0.26	-0.41	-0.52	-0.49	-0.56	-0.37	-0.41
1913	-0.41	-0.44	-0.43	-0.36	-0.46	-0.46	-0.34	-0.33	-0.34	-0.35	-0.17	-0.03
1914	0.01	-0.14	-0.23	-0.27	-0.2	-0.23	-0.24	-0.14	-0.13	-0.06	-0.22	-0.09
1915	-0.18	-0.01	-0.12	0.08	-0.02	-0.15	-0.03	-0.15	-0.13	-0.23	-0.14	-0.26
1916	-0.19	-0.21	-0.32	-0.25	-0.27	-0.43	-0.33	-0.26	-0.29	-0.28	-0.42	-0.78
1917	-0.47	-0.55	-0.48	-0.39	-0.49	-0.4	-0.22	-0.26	-0.18	-0.35	-0.27	-0.71
1918	-0.43	-0.3	-0.19	-0.39	-0.37	-0.28	-0.2	-0.25	-0.14	-0.04	-0.16	-0.28
1919	-0.18	-0.21	-0.25	-0.18	-0.19	-0.27	-0.2	-0.18	-0.17	-0.15	-0.3	-0.34
1920	-0.14	-0.23	-0.06	-0.25	-0.25	-0.32	-0.31	-0.28	-0.19	-0.28	-0.33	-0.46
1921	-0.03	-0.21	-0.27	-0.36	-0.35	-0.3	-0.15	-0.23	-0.17	-0.07	-0.16	-0.18
1922	-0.32	-0.41	-0.13	-0.21	-0.34	-0.32	-0.26	-0.3	-0.28	-0.32	-0.16	-0.17
1923	-0.26	-0.36	-0.31	-0.37	-0.33	-0.23	-0.28	-0.29	-0.27	-0.12	0.04	-0.04
1924	-0.22	-0.26	-0.12	-0.34	-0.19	-0.27	-0.25	-0.34	-0.31	-0.36	-0.23	-0.42
1925	-0.33	-0.33	-0.22	-0.24	-0.3	-0.33	-0.29	-0.18	-0.14	-0.17	0.03	0.1
1926	0.21	0.08	0.12	-0.13	-0.24	-0.24	-0.19	-0.1	-0.11	-0.11	-0.06	-0.3
1927	-0.27	-0.19	-0.38	-0.31	-0.25	-0.27	-0.14	-0.18	-0.05	0	-0.03	-0.35
1928	-0.01	-0.1	-0.28	-0.29	-0.29	-0.4	-0.2	-0.25	-0.19	-0.19	-0.1	-0.2
1929	-0.47	-0.58	-0.35	-0.42	-0.39	-0.43	-0.33	-0.29	-0.24	-0.15	-0.15	-0.53
1930	-0.28	-0.23	-0.09	-0.25	-0.25	-0.18	-0.15	-0.1	-0.11	-0.08	0.14	-0.07
1931	-0.1	-0.2	-0.06	-0.2	-0.22	-0.05	0.02	0	-0.07	0	-0.1	-0.09
1932	0.14	-0.17	-0.19	-0.08	-0.22	-0.3	-0.23	-0.23	-0.13	-0.09	-0.26	-0.22
1933	-0.31	-0.3	-0.28	-0.23	-0.25	-0.32	-0.19	-0.23	-0.26	-0.24	-0.32	-0.46
1934	-0.26	-0.04	-0.29	-0.27	-0.11	-0.14	-0.11	-0.1	-0.16	-0.11	-0.01	-0.08
1935	-0.37	0.12	-0.14	-0.35	-0.26	-0.23	-0.19	-0.17	-0.17	-0.07	-0.28	-0.2
1936	-0.28	-0.39	-0.25	-0.2	-0.16	-0.19	-0.05	-0.11	-0.05	-0.03	-0.04	-0.02
1937	-0.08	0.06	-0.16	-0.16	-0.06	-0.07	-0.04	0.04	0.14	0.09	0.1	-0.1
1938	0.02	-0.03	0.06	0.05	-0.08	-0.17	-0.08	-0.04	0.03	0.12	0.02	-0.23
1939	-0.12	-0.11	-0.2	-0.12	-0.07	-0.08	-0.05	-0.05	0	-0.03	0.06	0.41
1940	-0.13	0.06	0.12	0.16	0.06	0.05	0.11	0.01	0.12	0.07	0.13	0.2
1941	0.12	0.23	0.06	0.11	0.1	0.04	0.16	0.15	0.03	0.25	0.13	0.15
1942	0.29	0.06	0.11	0.14	0.14	0.11	0.02	-0.02	0	0.07	0.13	0.13
1943	0	0.23	0.02	0.14	0.11	0	0.15	0.04	0.11	0.3	0.26	0.28
1944	0.42	0.31	0.35	0.27	0.26	0.2	0.22	0.23	0.3	0.27	0.13	0.08
1945	0.15	0.05	0.11	0.24	0.11	0.03	0.07	0.26	0.21	0.22	0.1	-0.09
1946	0.16	0.06	0	0.11	-0.03	-0.15	-0.08	-0.1	-0.02	-0.07	-0.02	-0.27
1947	-0.08	-0.04	0.06	0.05	-0.06	-0.03	-0.04	-0.08	-0.14	0.06	-0.01	-0.16
1948	0.06	-0.12	-0.24	-0.1	0.06	-0.05	-0.13	-0.1	-0.14	-0.07	-0.09	-0.21
1949	0.1	-0.16	-0.01	-0.08	-0.11	-0.26	-0.13	-0.09	-0.09	-0.03	-0.09	-0.16
1950	-0.28	-0.27	-0.08	-0.21	-0.12	-0.08	-0.09	-0.18	-0.11	-0.19	-0.34	-0.19
1951	-0.34	-0.43	-0.19	-0.11	-0.01	-0.08	-0.02	0.06	0.04	0.09	0.01	0.16
1952	0.16	0.13	-0.09	0.02	-0.06	-0.04	0.05	0.07	0.08	-0.03	-0.16	-0.02
1953	0.09	0.17	0.11	0.2	0.09	0.07	0.03	0.09	0.06	0.05	-0.05	0.04
1954	-0.27	-0.1	-0.12	-0.18	-0.2	-0.15	-0.16	-0.12	-0.07	0	0.08	-0.17
1955	0.12	-0.21	-0.35	-0.22	-0.2	-0.07	-0.07	0.07	-0.14	-0.05	-0.28	-0.32
1956	-0.16	-0.24	-0.22	-0.27	-0.27	-0.15	-0.11	-0.26	-0.19	-0.24	-0.15	-0.09
1957	-0.13	-0.06	-0.06	-0.02	0.07	0.14	0	0.14	0.08	0	0.06	0.16
1958	0.37	0.23	0.09	0.02	0.07	-0.06	0.03	-0.07	-0.05	0.03	0.02	0
1959	0.06	0.09	0.2	0.17	0.05	0.03	0.05	-0.01	-0.05	-0.09	-0.09	-0.02
1960	-0.02	0.13	-0.36	-0.17	-0.09	0	-0.03	0	0.04	0.07	-0.12	0.18
1961	0.07	0.19	0.1	0.15	0.14	0.11	-0.04	-0.01	0.05	-0.01	0.02	-0.15
1962	0.07	0.15	0.11	0.05	-0.06	0.05	-0.03	-0.03	-0.02	-0.04	0.06	-0.01
1963	-0.03	0.18	-0.15	-0.05	-0.1	0.02	0.09	0.23	0.19	0.14	0.16	-0.01
1964	-0.06	-0.11	-0.24	-0.3	-0.26	-0.09	-0.07	-0.22	-0.28	-0.3	-0.21	-0.3
1965	-0.09	-0.17	-0.12	-0.2	-0.14	-0.1	-0.1	-0.01	-0.13	-0.04	-0.06	-0.06
1966	-0.16	-0.01	0.04	-0.14	-0.09	0.03	0.08	-0.11	-0.02	-0.15	-0.02	-0.06
1967	-0.07	-0.19	0.04	-0.06	0.12	-0.08	-0.01	0.02	-0.04	0.07	-0.06	-0.02
1968	-0.22	-0.15	0.21	-0.05	-0.1	-0.05	-0.1	-0.11	-0.19	0.11	-0.05	-0.14
1969	-0.11	-0.14	0.01	0.18	0.19	0.04	-0.02	0.03	0.1	0.09	0.11	0.28
1970	0.1	0.23	0.08	0.09	-0.05	-0.02	-0.05	-0.1	0.11	0.04	0.01	-0.14
1971	-0.03	-0.21	-0.19	-0.11	-0.07	-0.18	-0.13	-0.03	0.01	-0.06	-0.05	-0.08
1972	-0.26	-0.17	0.03	-0.01	-0.01	0.05	0.02	0.18	0.04	0.08	0.02	0.18
1973	0.27	0.31	0.25	0.26	0.26	0.16	0.09	0.02	0.06	0.12	0.05	-0.06
1974	-0.14	-0.28	-0.05	-0.1	0	-0.04	-0.03	0.11	-0.13	-0.07	-0.07	-0.1
1975	0.08	0.07	0.14	0.06	0.17	0	-0.02	-0.2	-0.02	-0.09	-0.15	-0.17
1976	-0.01	-0.06	-0.21	-0.09	-0.23	-0.15	-0.1	-0.17	-0.09	-0.26	-0.06	0.08
1977	0.17	0.21	0.25	0.27	0.3	0.26	0.24	0.2	0.03	0.05	0.2	0.05
1978	0.08	0.13	0.22	0.14	0.07	-0.02	0.07	-0.19	0.06	0.01	0.18	0.11
1979	0.15	-0.07	0.18	0.12	0.06	0.14	0.02	0.14	0.26	0.26	0.3	0.48
1980	0.3	0.42	0.3	0.33	0.35	0.18	0.29	0.27	0.23	0.19	0.29	0.2
1981	0.55	0.41	0.5	0.32	0.23	0.32	0.35	0.34	0.18	0.15	0.23	0.4
1982	0.09	0.16	-0.02	0.09	0.15	0.04	0.13	0.09	0.16	0.14	0.14	0.43
1983	0.53	0.4	0.42	0.3	0.36	0.19	0.15	0.32	0.39	0.16	0.31	0.17
1984	0.31	0.18	0.29	0.1	0.34	0.06	0.15	0.15	0.19	0.15	0.04	-0.06
1985	0.22	-0.05	0.17	0.1	0.18	0.17	0.01	0.15	0.15	0.13	0.1	0.16
1986	0.3	0.38	0.29	0.26	0.26	0.14	0.13	0.12	0.02	0.14	0.11	0.15
1987	0.36	0.46	0.17	0.26	0.26	0.36	0.47	0.28	0.4	0.33	0.26	0.48
1988	0.57	0.42	0.49	0.44	0.44	0.42	0.35	0.44	0.4	0.37	0.12	0.34
1989	0.16	0.35	0.37	0.33	0.17	0.15	0.33	0.35	0.37	0.33	0.2	0.37
1990	0.4	0.41	0.76	0.54	0.46	0.38	0.43	0.3	0.29	0.42	0.45	0.41
1991	0.42	0.5	0.35	0.51	0.39	0.54	0.51	0.42	0.48	0.31	0.31	0.33
1992	0.45	0.43	0.47	0.23	0.32	0.24	0.13	0.1	0	0.1	0.05	0.22
1993	0.37	0.39	0.36	0.27	0.27	0.23	0.27	0.14	0.11	0.23	0.08	0.19
1994	0.31	0.04	0.26	0.4	0.29	0.41	0.31	0.22	0.34	0.43	0.46	0.37
1995	0.51	0.78	0.45	0.47	0.29	0.45	0.49	0.49	0.34	0.49	0.44	0.3
1996	0.27	0.49	0.34	0.36	0.29	0.26	0.36	0.5	0.26	0.21	0.41	0.4
1997	0.33	0.37	0.51	0.37	0.38	0.54	0.36	0.42	0.55	0.65	0.65	0.6
1998	0.61	0.89	0.62	0.64	0.71	0.77	0.71	0.69	0.46	0.46	0.49	0.58
1999	0.48	0.67	0.33	0.34	0.32	0.37	0.41	0.35	0.43	0.42	0.41	0.48
2000	0.26	0.59	0.59	0.59	0.4	0.43	0.42	0.43	0.43	0.29	0.33	0.3
2001	0.45	0.47	0.58	0.52	0.59	0.54	0.6	0.5	0.55	0.51	0.7	0.55
2002	0.74	0.76	0.9	0.58	0.65	0.55	0.61	0.55	0.64	0.56	0.59	0.42
2003	0.72	0.55	0.57	0.54	0.63	0.48	0.55	0.66	0.66	0.75	0.55	0.73
2004	0.58	0.7	0.65	0.62	0.41	0.42	0.27	0.45	0.53	0.66	0.72	0.52
2005	0.72	0.59	0.69	0.69	0.64	0.66	0.66	0.63	0.76	0.8	0.75	0.67
2006	0.56	0.71	0.63	0.49	0.47	0.64	0.55	0.71	0.64	0.7	0.73	0.78
2007	0.96	0.69	0.7	0.75	0.68	0.58	0.62	0.61	0.64	0.61	0.57	0.49
2008	0.26	0.35	0.74	0.53	0.51	0.47	0.6	0.45	0.64	0.67	0.66	0.55
2009	0.61	0.54	0.53	0.61	0.64	0.67	0.72	0.68	0.69	0.65	0.78	0.65
2010	0.73	0.79	0.92	0.87	0.75	0.65	0.62	0.65	0.62	0.71	0.79	0.49
2011	0.5	0.51	0.64	0.65	0.53	0.59	0.74	0.73	0.57	0.66	0.56	0.53
2012	0.45	0.49	0.57	0.68	0.76	0.62	0.56	0.63	0.74	0.78	0.74	0.52
2013	0.66	0.56	0.64	0.53	0.61	0.65	0.59	0.65	0.77	0.69	0.8	0.66
2014	0.73	0.5	0.77	0.78	0.85	0.65	0.58	0.81	0.89	0.85	0.68	0.78
2015	0.81	0.87	0.9	0.73	0.77	0.79	0.75
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>#KnightD3 wk6 linechart</title>

	<!-- <script type="text/javascript" src="d3.v3.js"></script> -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>


	<style type="text/css">

	html, body, * {
	font-family: Arial, sans-serif;
	text-align: center;
	font-size: 14px 65%;
	}

	div#title {
	width: 700px;
	margin: 10px auto 0;
	padding: 5px 20px;
	background-color: grey;
	border: 1px solid grey;
	color: white;
	box-shadow: 3px 0px 3px lightgrey;
	}

	h1 {
	font-family: Georgia, serif;
	font-size: 1.2em;
	letter-spacing: 1px;
	margin: 0 auto;
	}

	h2 {
	font-size: .9em;
	font-weight:100;
	margin: .3em auto;
	}

	p {
	font-size: .7em;
	margin: 5px auto;
	}

	div#chart {
	width:740px;
	height: 400px;
	margin: 0 auto 1em;
	border: 1px solid grey;
	box-shadow: 3px 3px 3px lightgrey;
	}

	svg {
	background-color: white;
	}

	path.line {
	/stroke: black;/
	stroke-width:.5px;
	fill:none;
	}

	path.x.axis {
	stroke: black;
	stroke-width:.4px;
	}

	.x.axis path,
	.x.axis line {
	fill: none;
	stroke: none;
	shape-rendering: crispEdges;
	}

	.y.axis path,
	.y.axis line {
	fill: none;
	stroke: none;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>

	</head>
	<body>

	<div id="title">
	<h1>
	Monthly mean Land & Ocean Temperature
	</h1>
	<p>deviation from the base period of 1951-1980</p>
	</div>
	<div id="chart"></div>

	<script type="text/javascript" src="linechart.js"></script>

	</body>
	</html>
	var margin = {
	top: 20,
	right: 0,
	bottom: 20,
	left: 30
	};
	var width = 680 - margin.left - margin.right;
	var height = 360 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width]);

	var y = d3.scale.linear()
	.rangeRound([height - 20, 0]);

	var xLabel = d3.time.scale()
	.domain([new Date(1960, 0, 1), new Date(2014, 11, 31)])
	.range([0, width]);

	var xAxis = d3.svg.axis()
	.scale(xLabel)
	.ticks(3)
	.tickFormat(d3.time.format("%Y"));

	var yAxis = d3.svg.axis()
	.scale(y)
	.ticks(4)
	.orient("left");

	var line = d3.svg.line()
	.defined(function(d) {
	if (!isNaN(d.value)) {
	return d.value;
	}
	})
	.interpolate("cardinal")
	.x(function(d) {
	return x(d.label) + x.rangeBand() / 2;
	})
	.y(function(d) {
	return y(d.value);
	});

	var colors = ["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000", "#cc4c02", "#993404", "#662506"];

	var color = d3.scale.ordinal().range(colors);




	var dateFormat = d3.time.format("%Y");

	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 + ")");

	d3.csv("Global-ocean-land-temperatures.csv", function(error, data) {

	// console.log(data);

	var years = Object.keys(data[0]);
	years.sort();

	var labelVar = 'year';
	var varNames = d3.keys(data[0]).filter(function(key) {
	return key !== labelVar;
	});
	color.domain(varNames);

	var seriesData = varNames.map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {
	name: name,
	label: d[labelVar],
	value: +d[name]
	};
	})
	};
	});

	// console.log(seriesData);

	data.forEach(function(d) {
	d.year = +d.year;
	});

	x.domain(data.map(function(d) {
	return d.year;
	}));
	y.domain([d3.min(seriesData, function(c) {
	return d3.min(c.values, function(d) {
	return d.value;
	});
	}),
	d3.max(seriesData, function(c) {
	return d3.max(c.values, function(d) {
	return d.value;
	});
	})
	]);

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

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("x", 0)
	.attr("y", 0)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("°C");

	var series = svg.selectAll(".series")
	.data(seriesData)
	.enter().append("g")
	.attr("class", "series")
	.attr("transform", "translate(-20,0)");

	series.append("path")
	.attr("class", "line")
	.attr("id", function(d) {
	return d.name
	})
	.attr("stroke", function(d, i){
	return colors[i];
	})
	.attr("opacity", 0)
	.transition()
	.delay(function(d, i) {
	return i * 550;
	})
	.duration(500)
	.attr("d", function(d, i) {
	return line(d.values);
	})
	.attr("opacity", 1);

	});