D3 Examples - Simple Line Chart

xxxxxxxxxx
 
​
<!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>
​
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js" type="text/JavaScript"></script>
<script>
​
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>
    