#KinghtD3 - scatterplot

This gist is the transformation of /datafunk/8a17b5f476a40a08ed17 example into a scatterplot for #KnightD3. I've taken January and July values for highs and lows and selected one year per decade to keep the chart clutter-free.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Scatterplot</title>
        
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

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;
                margin: 0 auto 1em;
                border: 1px solid grey;
                box-shadow: 3px 3px 3px lightgrey;
            }

svg {
                background-color: white;
            }

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>
                Land &amp; Ocean Temperature deviation samples 1880 - 2015
            </h1>
            <h2>Base period: 1951-1980 | One sample per decade (Jan &amp; Jul)</h2>
            <p>Please note, this data is random sampling for the purposes of creating a sample chart only!</p>
        </div>
        <div id="chart"></div>

var w = 700;
            var h = 400;
            var margin = {
                top: 20,
                right: 20,
                bottom: 50,
                left: 50
            }

var dataset;

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

var xScale = d3.time.scale()
                .range([0 + margin.left, w - margin.right]);

var yScale = d3.scale.linear()
                .range([ margin.top, h - margin.bottom ]);

var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom");

var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

var svg = d3.select("#chart")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

d3.csv("Global-ocean-land-temperatures_jan-jul_decade.csv", function(data) {

dataset = data;

data.forEach(function(d){
                    d.Year = parseDate(d.Year);
                    d.Year = +d.Year;
                    d.low = +d.low;
                    d.hi = +d.hi;
                })

xScale.domain(d3.extent(data, function(d) {
                    return d.Year;
                }));

yScale.domain([
                    d3.max(data, function(d) {
                        return +d.hi;
                    }),
                    d3.min(data, function(d) {
                        return +d.low;
                    })
                ]);

var circles1 = svg.selectAll("circle.lo")
                    .data(data)
                    .enter()
                    .append("circle").attr('class', "lo");

var circles2 = svg.selectAll("circle.hi")
                    .data(data)
                    .enter()
                    .append("circle").attr('class', "hi");

circles1.attr("cx", function(d) {
                        return xScale(d.Year);
                    })
                    .attr("cy", function(d) {
                        return yScale(d.low);
                    })
                    .attr("r", 6)
                    .attr("fill", "steelblue")
                    .attr("class", "circle")
                    .attr("opacity", .5)
                    .append("title")
                    .text(function(d) {
                        var y = new Date(d.Year).getFullYear();
                        return y + "'s low is " + d.low;
                    });

circles2.attr("cx", function(d) {
                        return xScale(d.Year);
                    })
                    .attr("cy", function(d) {
                        return yScale(d.hi);
                    })
                    .attr("r", 6)
                    .attr("fill", "red")
                    .attr("class", "circle")
                    .attr("opacity", .5)
                    .append("title")
                    .text(function(d) {
                        var y = new Date(d.Year).getFullYear();
                        return y + "'s high is " + d.hi;
                    });

// d3.selectAll(".circle")
                //     .on("click", function(d){
                //         console.log(d);
                //     });

d3.selectAll(".circle")
                    .on("mouseover", function(){
                        d3.select(this)
                        .transition()
                        .duration(300)
                        .attr("r", 12);
                    });

d3.selectAll(".circle")
                    .on("mouseout", function(){
                        d3.select(this)
                        .transition()
                        .duration(300)
                        .attr("r", 6);
                    });

svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + (h - margin.top - 20) + ")")
                    .call(xAxis);

svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (margin.bottom) + ",0)")
                    .call(yAxis);

svg.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(45, 52)")
                    .append("text")
                    .text("°C")

var path_string = "M" + margin.left +"," + yScale(0) + "H" + (w - margin.left - margin.right);

svg.append("path")
                    .attr("class", "x axis")
                    .attr("d", path_string);

});

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js