Skip to content

Instantly share code, notes, and snippets.

@smckissock

smckissock/index.html

Last active November 10, 2015 11:00
Show Gist options
  • Save smckissock/0ad01cf886ff08ff9f7c to your computer and use it in GitHub Desktop.
Save smckissock/0ad01cf886ff08ff9f7c to your computer and use it in GitHub Desktop.
Download ZIP
USG Revenue as % of GDP 1934-2020
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stacked Bar Chart</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 50px;
background-color: white;
box-shadow: 3px 3px 5px 6px #ccc;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
rect:hover {
fill: darkgreen;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 9px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
.tip {
background: #fff;
border: none;
box-shadow: 0 0 5px #888;
display: none;
left: 1em;
padding: 0.5em;
position: absolute;
top: 1em;
width: 200px;
}
.legend {
padding: 5px;
font: 10px sans-serif;
background: yellow;
box-shadow: 2px 2px 1px #888;
}
</style>
</head>
<body>
<div id="container">
<h1>Mix of Sources Vary, but USG Revenue as % of GDP Consistent Over Time</h1>
<p>Corporate Income Taxes as a percentage of US GDP: 1934-2020. Source: <a href="https://www.whitehouse.gov/omb/budget/Historicals">OMB</a> Table 2.3</p>
</div>
<script type="text/javascript">
var w = 700;
var h = 1100;
var margin = { top: 5, right: 70, bottom: 30, left: 0 };
var width = w - margin.left - margin.right,
height = h - margin.top - margin.bottom;
var widthScale = d3.scale.linear()
.range([ 0, width]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([0, height], 0.2)
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("#container")
.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 tip = d3.select('#container')
.append('div')
.attr('class', 'tip');
var tipTimer;
d3.csv("usg_receipts.csv", function(data) {
var receiptTypeNames = ["Individual Income Taxes", "Corporation Income Taxes", "Social Insurance and Retirement Receipts", "Excise Taxes", "Other"];
var receiptTypes = [];
receiptTypeNames.forEach(function (d) {
var type = { name: d, values: [] };
receiptTypes.push(type);
});
data.forEach(function (d, iYear) {
receiptTypes.forEach(function (type, iReceiptType) {
type.values.push({ fiscalYear: d["Fiscal Year"], receiptType: type.name, x: iYear, y: +d[receiptTypeNames[iReceiptType]] });
});
});
var stack = d3.layout.stack()
stack.values(function (d) { return d.values; });
stack(receiptTypes);
var years = [];
data.forEach(function (d) {
years.push(d["Fiscal Year"]);
});
widthScale.domain([0,
d3.max(receiptTypes, function (d) {
return d3.max(d.values, function (d) {
return d.y0 + d.y;
});
})
]);
heightScale.domain(data.map(function(d) { return d["Fiscal Year"]; } ));
var colors = ['#253494', '#2c7fb8', '#41b6c4', '#a1dab4', '#ffff80'];
var groups = svg.selectAll("g")
.data(receiptTypes)
.enter()
.append("g")
.style("fill", function (d, i) {
return colors[i];
})
var rects = groups.selectAll("rect")
.data(function (d) { return d.values; })
.enter()
.append("rect")
.attr("y", function (d, i) {
return heightScale(d.fiscalYear);
})
.attr("height", heightScale.rangeBand())
.attr("x", function (d) {
return margin.right;
})
.attr("width", function (d) {
return 0;
})
.on('mousemove', function (d) {
// Show and position the tool tip.
var where = d3.mouse(this);
// Left side of the chart: show tool tip to the right of curosr.
// Right side of the chart: show tool tip to the left of cursor.
var leftPad = (where[0] < (w + margin.left) / 2) ? 350 : 100;
console.log(where[0] + " " + (w + margin.left) / 2 + " " + leftPad);
tip.style({
'display': 'block',
'left': where[0] + leftPad + 'px',
'top': where[1] + 90 + 'px'
})
.html(
"In " + d.fiscalYear + ", " + d.receiptType + " was " + d.y + "% of GDP"
//'Airline: ' + d.airline + '<br>' +
//'Average Delay: ' + d.averageDelay + ' minutes<br>' +
//'Total flights: ' + d.count
);
})
.on('mouseout', function () {
// Add a short delay to hide the tool tip to prevent
// flickering when moving between bars.
tipTimer = setTimeout(function () {
tip.style('display', 'none');
}, 200)
})
.on('mouseenter', function () {
// Don't hide the tool tip if mouseenter fires quickly after
// mouseout.
clearTimeout(tipTimer);
});
rects.transition()
.delay(function(d, i) {
return i * 5;
})
.duration(300)
.attr("x", function (d) {
return margin.right + widthScale(d.y0);
return 0;
})
.attr("width", function (d) {
return widthScale(d.y);
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + margin.right + "," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin.right + ", 0)")
.call(yAxis);
var legend = svg.append("g")
.attr("class", "legend")
.attr("x", width - 300)
.attr("y", 400)
.attr("height", 100)
.attr("width", 300);
legend.selectAll("text")
.data(receiptTypeNames)
.enter()
.append("text")
.attr("x", 420)
.attr("y", function(d, i) {
return i * 14 + 20;
})
.text(function (d) { return d; });
legend.selectAll("rect")
.data(colors)
.enter()
.append("rect")
.attr("x", 404)
.attr("y", function (d, i) {
return i * 14 + 13;
})
.attr("height", 10)
.attr("width", 10)
.style("fill", function (d, i) {
return colors[i];
});
});
</script>
</body>
</html>
Raw
usg_receipts.csv
Fiscal Year Individual Income Taxes Corporation Income Taxes Social Insurance and Retirement Receipts Excise Taxes Other
1934 0.7 0.6 0.0 2.2 1.3
1935 0.7 0.8 0.0 2.0 1.5
1936 0.8 0.9 0.1 2.0 1.1
1937 1.2 1.2 0.7 2.1 0.9
1938 1.4 1.4 1.7 2.1 0.9
1939 1.1 1.2 1.8 2.1 0.7
1940 0.9 1.2 1.8 2.0 0.7
1941 1.1 1.8 1.7 2.2 0.7
1942 2.2 3.2 1.7 2.3 0.5
1943 3.5 5.2 1.6 2.2 0.4
1944 9.2 6.9 1.6 2.2 0.5
1945 8.1 7.1 1.5 2.8 0.5
1946 7.1 5.2 1.4 3.1 0.5
1947 7.5 3.6 1.4 3.0 0.6
1948 7.4 3.7 1.4 2.8 0.6
1949 5.6 4.0 1.4 2.7 0.5
1950 5.6 3.7 1.6 2.7 0.5
1951 6.6 4.3 1.7 2.6 0.5
1952 7.8 5.9 1.8 2.5 0.5
1953 7.8 5.6 1.8 2.6 0.5
1954 7.6 5.4 1.9 2.6 0.5
1955 7.1 4.4 1.9 2.2 0.5
1956 7.3 4.8 2.1 2.3 0.5
1957 7.7 4.6 2.2 2.3 0.6
1958 7.3 4.2 2.4 2.2 0.6
1959 7.3 3.4 2.3 2.1 0.6
1960 7.6 4.0 2.7 2.2 0.7
1961 7.5 3.8 3.0 2.2 0.7
1962 7.8 3.5 2.9 2.1 0.7
1963 7.7 3.5 3.2 2.1 0.7
1964 7.3 3.5 3.3 2.1 0.7
1965 6.9 3.6 3.1 2.1 0.8
1966 7.1 3.8 3.3 1.7 0.9
1967 7.3 4.1 3.9 1.6 0.8
1968 7.6 3.2 3.8 1.6 0.8
1969 8.9 3.7 4.0 1.5 0.9
1970 8.6 3.1 4.2 1.5 0.9
1971 7.7 2.4 4.2 1.5 0.9
1972 7.8 2.6 4.3 1.3 1.0
1973 7.6 2.7 4.7 1.2 0.9
1974 8.0 2.6 5.1 1.1 0.9
1975 7.6 2.5 5.2 1.0 0.9
1976 7.4 2.3 5.1 0.9 1.0
TQ 8.2 1.8 5.3 0.9 0.9
1977 7.8 2.7 5.2 0.9 0.9
1978 7.9 2.6 5.3 0.8 0.8
1979 8.5 2.6 5.4 0.7 0.9
1980 8.7 2.3 5.6 0.9 0.9
1981 9.1 1.9 5.8 1.3 0.9
1982 9.0 1.5 6.1 1.1 1.0
1983 8.2 1.0 5.9 1.0 0.9
1984 7.5 1.4 6.1 0.9 0.9
1985 7.8 1.4 6.2 0.8 0.9
1986 7.7 1.4 6.3 0.7 0.9
1987 8.2 1.8 6.3 0.7 0.9
1988 7.8 1.8 6.5 0.7 0.9
1989 8.0 1.9 6.5 0.6 0.9
1990 7.9 1.6 6.4 0.6 0.9
1991 7.7 1.6 6.5 0.7 0.8
1992 7.4 1.6 6.4 0.7 0.9
1993 7.5 1.7 6.3 0.7 0.7
1994 7.5 2.0 6.4 0.8 0.8
1995 7.8 2.1 6.4 0.8 0.8
1996 8.2 2.2 6.4 0.7 0.8
1997 8.7 2.1 6.4 0.7 0.7
1998 9.3 2.1 6.4 0.6 0.8
1999 9.2 1.9 6.4 0.7 0.9
2000 9.9 2.0 6.4 0.7 0.9
2001 9.4 1.4 6.6 0.6 0.8
2002 7.9 1.4 6.4 0.6 0.7
2003 7.0 1.2 6.3 0.6 0.7
2004 6.7 1.6 6.1 0.6 0.6
2005 7.2 2.2 6.2 0.6 0.6
2006 7.6 2.6 6.1 0.5 0.7
2007 8.1 2.6 6.1 0.5 0.7
2008 7.8 2.1 6.1 0.5 0.7
2009 6.3 1.0 6.2 0.4 0.7
2010 6.1 1.3 5.8 0.5 1.0
2011 7.1 1.2 5.3 0.5 0.9
2012 7.1 1.5 5.3 0.5 0.9
2013 7.9 1.6 5.7 0.5 0.9
2014 8.1 1.9 5.9 0.5 1.1
2015 estimate 8.2 1.9 5.9 0.5 1.1
2016 estimate 8.7 2.5 5.9 0.6 1.0
2017 estimate 9.0 2.5 6.0 0.6 1.0
2018 estimate 9.2 2.4 6.0 0.6 1.0
2019 estimate 9.3 2.4 5.9 0.6 1.0
2020 estimate 9.4 2.3 5.9 0.6 1.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment