datafunk/Global-ocean-land-temperatures_jan-jul_decade.csv

## README.md

      
    Raw
  

              README.md
            
          
    This gist is the transformation of http://bl.ocks.org/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.

  
## Global-ocean-land-temperatures_jan-jul_decade.csv

          
            Year
            low
            hi

            
              1880
              -0.3
              -0.08

            
              1890
              -0.49
              -0.24

            
              1900
              -0.39
              0.09

            
              1910
              -0.69
              -0.32

            
              1920
              -0.46
              -0.06

            
              1930
              -0.28
              0.14

            
              1940
              -0.13
              0.2

            
              1950
              -0.34
              -0.08

            
              1960
              -0.36
              0.18

            
              1970
              -0.14
              0.23

            
              1980
              0.18
              0.42

            
              1990
              0.29
              0.76

            
              2000
              0.26
              0.59

            
              2010
              0.49
              0.92

            
              2015
              0.73
              0.9

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Scatterplot</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;
                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>

        <script type="text/javascript">


            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>
Year	low	hi
1880	-0.3	-0.08
1890	-0.49	-0.24
1900	-0.39	0.09
1910	-0.69	-0.32
1920	-0.46	-0.06
1930	-0.28	0.14
1940	-0.13	0.2
1950	-0.34	-0.08
1960	-0.36	0.18
1970	-0.14	0.23
1980	0.18	0.42
1990	0.29	0.76
2000	0.26	0.59
2010	0.49	0.92
2015	0.73	0.9
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Scatterplot</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;
	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 & Ocean Temperature deviation samples 1880 - 2015
	</h1>
	<h2>Base period: 1951-1980 \| One sample per decade (Jan & 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>

	<script type="text/javascript">


	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>