GDP Growth and Presidential Party

Inspiration

Came from wanting to look at the underlying data behind this article explaining which presidential party is better for GDP.

Sparked interest in looking at the underlying data more closely.

Data

We're only showing 1961-2014 data which means the end of Obama's term isn't included.

GDP growth (annual %)

Downloaded from the worldbank data and then cleaned a bit and checked in.

Presidential

Came from the list of presidents on wikipedia.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin: 0; }
  </style>
</head>

<body>
  <script>
    let margin = { top: 10, right: 40, bottom: 40, left: 10 };
    let width = 900 - margin.left - margin.right;
    let height = 250 - margin.top - margin.bottom;
    let axisOffset = 5;

let parseTime = d3.timeParse('%B %d %Y');

let x = d3.scaleTime()
  	  .range([0, width]);

let y = d3.scaleLinear()
    	.range([height, 0]);

let line = d3.line()
    	.x(d => x(d.year))
    	.y(d => y(d.growth));

let 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})`);

d3.csv(
      'presidents.csv',
      row => {
        row.start = parseTime(row.start);
        row.until = parseTime(row.until);
        return row;
      },
      (error, presidentRows) => {
        if (error) throw error;
        x.domain([new Date(1961, 0, 1), new Date(2014, 0, 1)]);
        svg.selectAll('rect')
          .data(presidentRows)
          .enter()
          .append('rect')
          .attr('x', d => x(d.start))
          .attr('y', 0)
          .attr('width', d => x(d.until) - x(d.start))
          .attr('height', height)
          .style('stroke', '#888')
          .style('fill', d => d.party === 'Democrat' ? '#88f' : '#f88')
        svg.append('g')
          .attr('transform', `translate(0,${height + axisOffset})`)
          .call(d3.axisBottom(x));
        d3.csv('gdp.csv', (error, gdpRawRows) => {
	        if (error) throw error;
          let gdpRows = gdpRawRows.columns.map(year => {
            return {
              year: new Date(+year, 0, 1),
              growth: gdpRawRows[0][year] / 100
            };
          });
          y.domain(d3.extent(gdpRows.map(d => d.growth)));
          svg.append('g')
            .attr('transform', `translate(${width +axisOffset},0)`)
            .call(d3.axisRight(y).ticks(10, '%'));
          svg.append('path')
          	.datum(gdpRows)
          	.style('fill', 'none')
          	.style('stroke', '#444')
            .style('stroke-width', 2)
            .style('stroke-linecap', 'round')
            .style('stroke-linejoin', 'round')
          	.attr('d', line);
        })
      }
    );

</script>
</body>

https://d3js.org/d3.v4.min.js