Skip to content

Instantly share code, notes, and snippets.

@datafunk

datafunk/Land-Ocean-TempIndex-YR.csv

Last active September 9, 2015 08:34
Download ZIP

Revisions

  1. datafunk revised this gist Sep 9, 2015. No changes.
  2. datafunk revised this gist Sep 9, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -80,9 +80,9 @@

    <div id="title">
    <h1>
    Land &amp; Ocean Temperature Annual Means Index, 1880 - 2015
    Land &amp; Ocean Temperature Annual Index, 1880 - 2015
    </h1>
    <h2>Hover your cursor over bar to get exact figures</h2>
    <h2>Base period: 1951-1980 | Hover your cursor over bar to get exact figures</h2>
    </div>
    <div id="chart"></div>

  3. datafunk revised this gist Sep 3, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Created for #KnightD3, a vertical bar chart with negative values. Based on (and slightly bastardised) Mike Bostock's "Bar chart with negative values" http://bl.ocks.org/mbostock/2368837 There are some aspects that could be done more elegantly / D3-ish ways. (E.g. x axis values should be formatted as proper dates, not numbers).
    Created for #KnightD3, a vertical bar chart with negative values. Based on (and slightly bastardised) Mike Bostock's "Bar chart with negative values" http://bl.ocks.org/mbostock/2368837 ~~There are some aspects that could be done more elegantly / D3-ish ways. (E.g. x axis values should be formatted as proper dates, not numbers).~~ < thanks to [~jalapic] for the tip, nicely fixed!
  4. datafunk revised this gist Sep 3, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion horizontal-bar-temperatures.js
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,8 @@ var xAxisScale = d3.scale.linear()

    var xAxis = d3.svg.axis()
    .scale(xAxisScale)
    .orient("bottom");
    .orient("bottom")
    .tickFormat(d3.format("d"));

    var yAxis = d3.svg.axis()
    .scale(y)
  5. datafunk revised this gist Sep 2, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Created for #KnightD3, a vertical bar chart with negative values. Based on (and slightly bastardised) Mike Bostock's "Bar chart with negative values" http://bl.ocks.org/mbostock/2368837 There are some aspects that could be done more elegantly / D3-ish ways.
    Created for #KnightD3, a vertical bar chart with negative values. Based on (and slightly bastardised) Mike Bostock's "Bar chart with negative values" http://bl.ocks.org/mbostock/2368837 There are some aspects that could be done more elegantly / D3-ish ways. (E.g. x axis values should be formatted as proper dates, not numbers).
  6. datafunk revised this gist Sep 2, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Created for #KnightD3, a vertical bar chart with negative values. Based on (and slightly bastardised) Mike Bostock's "Bar chart with negative values" http://bl.ocks.org/mbostock/2368837 There are some aspects that could be done more elegantly / D3-ish ways.
  7. datafunk revised this gist Sep 2, 2015. No changes.
  8. datafunk revised this gist Sep 2, 2015. 2 changed files with 13 additions and 14 deletions.
    2 changes: 1 addition & 1 deletion horizontal-bar-temperatures.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ var margin = {
    bottom: 20,
    left: 30
    },
    width = 900 - margin.left - margin.right,
    width = 920 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

    var y = d3.scale.linear()
    25 changes: 12 additions & 13 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,20 +14,20 @@
    }

    div#title {
    width:960px;
    margin: 1em auto 0;
    padding: 5px 20px;
    background-color: grey;
    border: 1px solid grey;
    color:white;
    box-shadow: 3px 0px 3px lightgrey;
    width: 880px;
    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.4em;
    letter-spacing: 1px;
    margin: 0 auto;
    font-family: Georgia, serif;
    font-size: 1.4em;
    letter-spacing: 1px;
    margin: 0 auto;
    }

    h2 {
    @@ -37,9 +37,8 @@
    }

    div#chart {
    width:960px;
    width:920px;
    margin: 0 auto 1em;
    padding: 20px;
    border: 1px solid grey;
    box-shadow: 3px 3px 3px lightgrey;
    }
  9. datafunk renamed this gist Sep 2, 2015. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → Land-Ocean-TempIndex-YR.csv
    View file
    File renamed without changes.
  10. datafunk created this gist Sep 2, 2015.
    137 changes: 137 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,137 @@
    Year,Celsius
    1880,-0.185
    1881,-0.08
    1882,-0.13
    1883,-0.175
    1884,-0.29
    1885,-0.275
    1886,-0.275
    1887,-0.315
    1888,-0.155
    1889,-0.145
    1890,-0.365
    1891,-0.21
    1892,-0.24
    1893,-0.225
    1894,-0.275
    1895,-0.19
    1896,-0.14
    1897,-0.11
    1898,-0.28
    1899,-0.185
    1900,-0.06
    1901,-0.13
    1902,-0.265
    1903,-0.4
    1904,-0.465
    1905,-0.24
    1906,-0.2
    1907,-0.41
    1908,-0.43
    1909,-0.485
    1910,-0.38
    1911,-0.445
    1912,-0.37
    1913,-0.345
    1914,-0.16
    1915,-0.115
    1916,-0.275
    1917,-0.385
    1918,-0.255
    1919,-0.185
    1920,-0.26
    1921,-0.185
    1922,-0.28
    1923,-0.265
    1924,-0.255
    1925,-0.225
    1926,-0.1
    1927,-0.215
    1928,-0.19
    1929,-0.36
    1930,-0.12
    1931,-0.075
    1932,-0.205
    1933,-0.265
    1934,-0.1
    1935,-0.19
    1936,-0.13
    1937,-0.045
    1938,0.005
    1939,-0.06
    1940,0.095
    1941,0.13
    1942,0.12
    1943,0.135
    1944,0.265
    1945,0.11
    1946,-0.02
    1947,-0.035
    1948,-0.09
    1949,-0.09
    1950,-0.18
    1951,-0.015
    1952,0
    1953,0.085
    1954,-0.135
    1955,-0.17
    1956,-0.205
    1957,0.03
    1958,0.025
    1959,0.04
    1960,-0.01
    1961,0.06
    1962,0.02
    1963,0.06
    1964,-0.23
    1965,-0.1
    1966,-0.04
    1967,-0.03
    1968,-0.1
    1969,0.065
    1970,0.025
    1971,-0.075
    1972,0.025
    1973,0.14
    1974,-0.07
    1975,-0.01
    1976,-0.095
    1977,0.205
    1978,0.075
    1979,0.145
    1980,0.285
    1981,0.325
    1982,0.135
    1983,0.31
    1984,0.15
    1985,0.15
    1986,0.15
    1987,0.345
    1988,0.42
    1989,0.33
    1990,0.415
    1991,0.42
    1992,0.225
    1993,0.25
    1994,0.325
    1995,0.46
    1996,0.345
    1997,0.465
    1998,0.63
    1999,0.41
    2000,0.425
    2001,0.545
    2002,0.6
    2003,0.6
    2004,0.555
    2005,0.685
    2006,0.64
    2007,0.635
    2008,0.54
    2009,0.65
    2010,0.72
    2011,0.575
    2012,0.63
    2013,0.655
    2014,0.775
    2015,0.37
    129 changes: 129 additions & 0 deletions horizontal-bar-temperatures.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,129 @@
    var margin = {
    top: 10,
    right: 10,
    bottom: 20,
    left: 30
    },
    width = 900 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

    var y = d3.scale.linear()
    .range([height, 0]);

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


    var xAxisScale = d3.scale.linear()
    .domain([1880, 2015])
    .range([ 0, width]);

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

    var yAxis = d3.svg.axis()
    .scale(y)
    .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 + ")");

    d3.csv("Land-Ocean-TempIndex-YR.csv", type, function(error, data) {
    x.domain(data.map(function(d) {
    return d.Year;
    }));
    y.domain(d3.extent(data, function(d) {
    return d.Celsius;
    })).nice();


    svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", function(d) {

    if (d.Celsius < 0){
    return "bar negative";
    } else {
    return "bar positive";
    }

    })
    .attr("data-yr", function(d){
    return d.Year;
    })
    .attr("data-c", function(d){
    return d.Celsius;
    })
    .attr("title", function(d){
    return (d.Year + ": " + d.Celsius + " °C")
    })
    .attr("y", function(d) {

    if (d.Celsius > 0){
    return y(d.Celsius);
    } else {
    return y(0);
    }

    })
    .attr("x", function(d) {
    return x(d.Year);
    })
    .attr("width", x.rangeBand())
    .attr("height", function(d) {
    return Math.abs(y(d.Celsius) - y(0));
    })
    .on("mouseover", function(d){
    // alert("Year: " + d.Year + ": " + d.Celsius + " Celsius");
    d3.select("#_yr")
    .text("Year: " + d.Year);
    d3.select("#degrree")
    .text(d.Celsius + "°C");
    });

    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

    svg.append("g")
    .attr("class", "y axis")
    .append("text")
    .text("°Celsius")
    .attr("transform", "translate(15, 40), rotate(-90)")

    svg.append("g")
    .attr("class", "X axis")
    .attr("transform", "translate(" + (margin.left - 6.5) + "," + height + ")")
    .call(xAxis);

    svg.append("g")
    .attr("class", "x axis")
    .append("line")
    .attr("y1", y(0))
    .attr("y2", y(0))
    .attr("x2", width);

    svg.append("g")
    .attr("class", "infowin")
    .attr("transform", "translate(50, 5)")
    .append("text")
    .attr("id", "_yr");

    svg.append("g")
    .attr("class", "infowin")
    .attr("transform", "translate(110, 5)")
    .append("text")
    .attr("id","degrree");

    });


    function type(d) {
    d.Celsius = +d.Celsius;
    return d;
    }
    93 changes: 93 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Land Ocean Temperature Index</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:960px;
    margin: 1em 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.4em;
    letter-spacing: 1px;
    margin: 0 auto;
    }

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

    div#chart {
    width:960px;
    margin: 0 auto 1em;
    padding: 20px;
    border: 1px solid grey;
    box-shadow: 3px 3px 3px lightgrey;
    }

    .bar.positive {
    fill: darkred;
    }

    .bar.negative {
    fill: steelblue;
    }

    g.infowin {
    fill: grey;
    }

    g.infowin text,
    .axis text {
    font: 11px sans-serif;
    fill:grey;
    }

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

    path.domain {
    stroke:none;
    }

    </style>
    </head>
    <body>



    <div id="title">
    <h1>
    Land &amp; Ocean Temperature Annual Means Index, 1880 - 2015
    </h1>
    <h2>Hover your cursor over bar to get exact figures</h2>
    </div>
    <div id="chart"></div>

    <script type="text/javascript" src="./horizontal-bar-temperatures.js"></script>

    </body>
    </html>