| license: mit |
An example of a surplus/deficit filled line chart. It uses a mask to fill the colour of the area above and below the line.
This is part of a series of visualisations called My Visual Vocabulary which aims to recreate every visualisation in the FT's Visual Vocabulary from scratch using D3.
| year | deficit_percent | |
|---|---|---|
| 1947 | 3.16 | |
| 1948 | -1.55 | |
| 1949 | -5.43 | |
| 1950 | -6.33 | |
| 1951 | -5.62 | |
| 1952 | -4.5 | |
| 1953 | -3.23 | |
| 1954 | -2.59 | |
| 1955 | -2.48 | |
| 1956 | -3.53 | |
| 1957 | -2.99 | |
| 1958 | -3.16 | |
| 1959 | -2.94 | |
| 1960 | -1.1 | |
| 1961 | -0.92 | |
| 1962 | -1.87 | |
| 1963 | -2 | |
| 1964 | -2.14 | |
| 1965 | -3.47 | |
| 1966 | -3.88 | |
| 1967 | -3.87 | |
| 1968 | -3.53 | |
| 1969 | -5.98 | |
| 1970 | -7.6 | |
| 1971 | -6.68 | |
| 1972 | -4.25 | |
| 1973 | -2.19 | |
| 1974 | -1.04 | |
| 1975 | 0.13 | |
| 1976 | 0.71 | |
| 1977 | 0.39 | |
| 1978 | 0.69 | |
| 1979 | 1.75 | |
| 1980 | 1.19 | |
| 1981 | 2.24 | |
| 1982 | 0.66 | |
| 1983 | 0.79 | |
| 1984 | 1.28 | |
| 1985 | 1.44 | |
| 1986 | 0.69 | |
| 1987 | 0.83 | |
| 1988 | 0 | |
| 1989 | -1.87 | |
| 1990 | -1.68 | |
| 1991 | -0.67 | |
| 1992 | 1.54 | |
| 1993 | 5.06 | |
| 1994 | 5.72 | |
| 1995 | 4.3 | |
| 1996 | 2.91 | |
| 1997 | 2.33 | |
| 1998 | 0.18 | |
| 1999 | -1.08 | |
| 2000 | -2.14 | |
| 2001 | -2.55 | |
| 2002 | -1.19 | |
| 2003 | 0.98 | |
| 2004 | 1.22 | |
| 2005 | 1.39 | |
| 2006 | 0.89 | |
| 2007 | 0.54 | |
| 2008 | 0.67 | |
| 2009 | 3.84 | |
| 2010 | 6.53 | |
| 2011 | 5.79 | |
| 2012 | 4.97 | |
| 2013 | 4.91 | |
| 2014 | 4.01 | |
| 2015 | 3.15 | |
| 2016 | 2.14 | |
| 2017 | 0.72 |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0; position:fixed; top:0; right:0; bottom:0; left:0; } | |
| .surplus-deficit-area { | |
| fill: black; | |
| opacity: 0.1; | |
| } | |
| .surplus-deficit-line { | |
| fill: none; | |
| stroke: black; | |
| } | |
| .title { | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var margin = {top: 100, right: 100, bottom: 100, left: 100}; | |
| var width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var svg = d3.select("body").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 + ")"); | |
| var defs = svg.append("defs"); | |
| var parseYear = d3.timeParse("%Y"); | |
| var x = d3.scaleTime() | |
| .range([0, width]); | |
| var y = d3.scaleLinear() | |
| .range([height, 0]); | |
| var xAxis = d3.axisBottom() | |
| .scale(x); | |
| var yAxis = d3.axisLeft() | |
| .scale(y); | |
| function parse(d) { | |
| return { | |
| date: parseYear(d.year), | |
| deficit: +d.deficit_percent | |
| }; | |
| } | |
| var area = d3.area() | |
| .x(function(d) { return x(d.date); }) | |
| .y1(function(d) { return y(d.deficit); }); | |
| var line = d3.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.deficit); }); | |
| d3.queue() | |
| .defer(d3.csv, "budget-deficit-gdp.csv", parse) | |
| .await(ready); | |
| function ready(error, data) { | |
| if (error) throw error; | |
| x.domain(d3.extent(data, function(d) { return d.date; })); | |
| y.domain([Math.floor(d3.min(data, function(d) { return d.deficit; })), | |
| Math.ceil(d3.max(data, function(d) { return d.deficit; }))]); | |
| area.y0(y(0)); | |
| defs.append("mask") | |
| .attr("id", "mask1") | |
| .append("path") | |
| .attr("d", function() { | |
| return area(data); | |
| }) | |
| .attr("fill", "white") | |
| .attr("opacity", 0.5) | |
| svg.append("rect") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("width", width) | |
| .attr("height", y(0)) | |
| .attr("fill", "green") | |
| .attr("mask", "url(#mask1)"); | |
| svg.append("rect") | |
| .attr("x", 0) | |
| .attr("y", y(0)) | |
| .attr("width", width) | |
| .attr("height", y.range()[0] - y(0)) | |
| .attr("fill", "red") | |
| .attr("mask", "url(#mask1)"); | |
| svg.append("path") | |
| .datum(data) | |
| .attr("class", "surplus-deficit-line") | |
| .attr("d", line) | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("text") | |
| .attr("class", "title") | |
| .attr("transform", "translate(" + width / 2 + ",0)") | |
| .attr("dy", "-2em") | |
| .attr("text-anchor", "middle") | |
| .text("UK government deficit / surplus as percentage of GDP"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| } | |
| </script> | |
| </body> |
