Simple Line Chart

A simple line chart of presidential popularity.

forked from emeeks's block: Simple Line Chart

<!DOCTYPE html>

<head>
  <title>Line Chart</title>
</head>
<meta charset="utf-8">
<style>

svg{
  background-color: #eee;
  margin-top: 20px;
}

path.domain {
  fill: none;
}

g.tick > line {
  stroke: white;
  stroke-width: 1px;
}

g.tick > text {
  text-anchor: middle;
  fill: #606060;
}

</style>
<body>
<div id="viz"></div>
<div>Data From: <a href="https://www.presidency.ucsb.edu/data/popularity.php">https://www.presidency.ucsb.edu/data/popularity.php</a></div>
</body>

var width = 500,
    height = 500;

xScale = d3.scale.linear().domain([0,10]).range([40,760]);
yScale = d3.scale.linear().domain([0,10]).range([60,830]);

svg = d3.select('#viz')
    .append('svg')
    .attr({width: 1500, height: height});

var chartPoints = 100;

queue()
    .defer(d3.csv, "bush_popularity.csv")
    .defer(d3.csv, "obama_popularity.csv")
    .await(function(error, file1, file2) { createChart(file1, file2,"undecided", d3.select("svg").append("g")); });

function createChart(bush, obama, type, linechart) {

bush.forEach(function (d) {
    d.datestamp = new Date(d.start);
  })

obama.forEach(function (d) {
    d.datestamp = new Date(d.start);
  })

var bushExtent = d3.extent(bush.map(function (d) {return d.datestamp}))

var obamaExtent = d3.extent(obama.map(function (d) {return d.datestamp}))

var fullExtent = [Math.min(bushExtent[0], obamaExtent[0]),Math.max(bushExtent[1], obamaExtent[1])]

var xScale = d3.time.scale().domain(fullExtent).range([0,500])

var chartExtent = [0,90];

var yScale = d3.scale.linear().domain(chartExtent).range([480,20]);

var axis = d3.svg.axis().scale(yScale)
    .orient("right")
    .ticks(8)
    .tickSize(-480)
    .tickSubdivide(true);

var line = d3.svg.line()
  .x(function(d) {return xScale(new Date(d.datestamp))})
  .y(function(d) {return yScale(d["approval"])})
  .interpolate("linear");

linechart.append("g").attr("transform", "translate(480,0)").call(axis);

linechart.append("path")
  .style("fill", "none")
  .style("stroke-width", "2px")
  .style("stroke", "darkred")
  .attr("class", "line")
  .attr("d", line(bush))

linechart.append("path")
  .style("fill", "none")
  .style("stroke-width", "2px")
  .style("stroke", "darkblue")
  .attr("class", "line")
  .attr("d", line(obama))
}

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

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

https://d3js.org/queue.v1.min.js