block by jmuyskens 278992910f1668f670f5d32d63645cb1

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

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;
  
  console.log(data);
  // 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(data, function(d) { return parseTime(d.created_at); }));
  yScale.domain(d3.extent(nestedData, function(d) { return d.value; }));
  
  // Add the X Axis
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale));

  // Add the Y Axis
  svg.append("g")
    .call(d3.axisLeft(yScale));
 
  console.log(line(nestedData))
  
  // Add the line path
  svg.selectAll("path.tweetline")
    .data([nestedData])
  	.enter().append('path')
    .attr("class", "tweetline")
    .attr("d", line);
};

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;
  }
</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>