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!
Last active
September 9, 2015 08:34
-
-
Save datafunk/8a17b5f476a40a08ed17 to your computer and use it in GitHub Desktop.
Vertical bar chart with negative values
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var margin = { | |
| top: 10, | |
| right: 10, | |
| bottom: 20, | |
| left: 30 | |
| }, | |
| width = 920 - 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") | |
| .tickFormat(d3.format("d")); | |
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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: 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; | |
| } | |
| h2 { | |
| font-size: .8em; | |
| font-weight:100; | |
| margin: .3em auto; | |
| } | |
| div#chart { | |
| width:920px; | |
| margin: 0 auto 1em; | |
| 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 & Ocean Temperature Annual Index, 1880 - 2015 | |
| </h1> | |
| <h2>Base period: 1951-1980 | 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment