D3 Examples - Module 5: Tree rings and climate change (southern hemisphere)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tree Rings and Temperature Variations in the Southern Hemisphere, 1850-1981</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: white;
                font-family: Helvetica, Arial, sans-serif;
            }
​
            h1 {
                font-size: 24px;
                margin: 0;
            }
​
            p {
                font-size: 14px;
                margin: 10px 0 0 0;
            }
​
            svg {
                background-color: white;
            }
​
            circle:hover {
                fill: black ;
            }
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
        </style>
    </head>
    <body>
​
        <h1>Tree Rings and Temperature Variations in the Southern Hemisphere, 1850-1981</h1>
​
        <p>Mapping tree ring data over time gives us a sense of patterns of growth and decline in the earth's forests. This chart plots the difference between each year's average temperature against the global mean from 1850 to 1981 in the Southern Hemisphere. The size of the circle shows the relative diameter of the tree ring for that year. Source: <a href="https://www.ncdc.noaa.gov/paleo/treering.html">National Centers for Environmental Information</a>, 2014</p>
​
        <script type="text/javascript">     
​
​
            var w = 1000;
            var h = 600;
            var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left
​
            var dateFormat = d3.time.format("%Y");
​
            var xScale = d3.time.scale()
                                .range([ padding[3], w - padding[1] - padding[3] ]);
            
            var yScale = d3.scale.linear()
                                .range([ padding[0], h - padding[2] ]);
​
​
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .ticks(12)
                            .tickFormat(function(d) {
                                return dateFormat(d);
                            });
            
​
            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            ;
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
​
​
            d3.csv("TreeRingWidthTemperature.csv", function(data) {
​
                xScale.domain([ 
                    d3.min(data, function(d) {
                        return dateFormat.parse(d.Year);
                    }),
                    d3.max(data, function(d) {
                        return dateFormat.parse(d.Year);
                    })
                ]);
                
​
                yScale.domain([
                    d3.max(data, function(d) {
                        return +d.Southern_Temperature;
                    }),
                    d3.min(data, function(d) {
                        return +d.Southern_Temperature;
                    })
                ]);
​
                var circles = svg.selectAll("circle")
                                .data(data)
                                .enter()
                                .append("circle");
                
              
                circles.attr("cx", function(d) {
                        return xScale(dateFormat.parse(d.Year));
                    })
                    .attr("cy", function(d) {
                        return yScale(+d.Southern_Temperature);
                    })
                    .attr("r", function(d) {
                        return (1200 - d.Southern_TreeRingWidth) * .07;
                    })
                    .attr("fill", "green")
                    .append("title")
                    .text(function(d) {
                        return "In " + d.Year + " the Southern Hemisphere's average temperature differed from the global average temperatures by " + d.Southern_Temperature + " degrees and the average tree ring width was " + d.Southern_TreeRingWidth ;
                    });
                
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + (h - padding[2] ) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (padding[3]) + ",0)")
                    .call(yAxis);
​
            });
​
​
        </script>
​
    </body>
</html>
    