block by jmuyskens a67754e7b5e21e55abbf768fb1f6c5ed

Single time series chart with real data (Start here)

Full Screen

Demonstration of transforming CSV data using D3

For NICAR Beginning D3, 2017

Charts forked from d3indepth‘s block: DOM Manipulation

forked from darlacameron‘s block: 2. Transforming data

forked from darlacameron‘s block: 3. Drawing shapes

forked from anonymous‘s block: Time series chart with real data

forked from jmuyskens‘s block: Multiple time series chart with real data

forked from jmuyskens‘s block: Single time series chart with real data

forked from jmuyskens‘s block: Single time series chart with real data

forked from jmuyskens‘s block: Single time series chart with real data (Start here)

forked from jmuyskens‘s block: Single time series chart with real data (Start here)

forked from jmuyskens‘s block: Single time series chart with real data (Start here)

script.js

var parseTime = d3.timeParse('%a %b %d %H:%M:%S +0000 %Y');
var formatTime = d3.timeFormat('%Y-%m-%d');
var parseFormattedTime = d3.timeParse('%Y-%m-%d');

var lineChart = function(data){
  // set the dimensions and margins of the graph
  var margin = {top: 20, right: 20, bottom: 60, left: 50},
      width = 606 - margin.left - margin.right,
      height = 181 - margin.top - margin.bottom;
  
  // NEST
  var nestedData = d3.nest()
  .key(function(d) { return formatTime(parseTime(d.created_at)); })
  .sortKeys(d3.ascending)
  .rollup(function(values) { return values.length; })
  .entries(data);
  
  console.log(nestedData);
  
  // set the ranges
  var xScale = d3.scaleTime().range([0, width]);
  var yScale = d3.scaleLinear().range([height, 0]);

  // define the line
  var line = d3.line()
   .x(function(d) { return xScale(parseFormattedTime(d.key)); })
   .y(function(d) { return yScale(d.value); });

  //add a new svg to hold the chart
  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 + ")");

  // Scale the range of the data
  xScale.domain(d3.extent(nestedData, function(d) { return parseFormattedTime(d.key); }));
  yScale.domain(d3.extent(nestedData, function(d) { return d.value; }));
  
  // Add the X Axis
  svg.append("g")
  	.attr('class', 'axis x')
    .attr("transform", "translate(0," + 0 + ")")
    .call(d3.axisBottom(xScale).tickSize(height));

  // Add the Y Axis
  svg.append("g")
  	.attr('class', 'axis y')
    .attr("transform", "translate(" + width +",0)")
    .call(d3.axisLeft(yScale).ticks(3).tickSize(width));
 
  // Add the line path
  svg.selectAll("path.tweetline")
    .data([nestedData])
  	.enter().append('path')
    .attr("class", "tweetline")
    .attr("d", line);
  
  var annotation = svg.append('g')
  	.attr('class', 'annotation')
    .attr('transform', 'translate(' + xScale(parseFormattedTime('2017-01-20')) +', 0)');
  
  annotation.append('line')
    .attr('x1', 0)
    .attr('y1', 0)
    .attr('x2', 0)
    .attr('y2', height)
  
  annotation.append('text')
    .text('LABEL TEXT')
  	.attr('text-anchor', 'end')
    .attr('dx', -5)
    .attr('dy', 10)
};





















index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<title>Transforming data</title>
</head>

<style>
	body {
		font-family: "Helvetica Neue", Helvetica, sans-serif;
		font-size: 14px;
	}
	path {
    fill: none;
    stroke: #aaa;
  }
  .tweetline {
    stroke-width:2px;
  }
  
  .axis path {
    display: none;
  }
  
  .axis line {
    stroke: #ccc;
  }
  
  .axis.x line {
    stroke-dasharray: 2px 2px;
  }
  
  .annotation line {
    stroke: black;
  }
</style>

<body>
  
	<script src="//d3js.org/d3.v4.min.js"></script>
  
	<script src="script.js"></script>
  
  <script>
    d3.csv("realdonaldtrumpsinceelection.csv", function(error, data) {
      if (error) throw error;
      lineChart(data);
    });
  </script>
</body>
</html>