block by jmuyskens e81ad8e9a3b700bde6c2c45e4421ec79

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)

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 = COPY YOUR CODE FROM MISTER NESTER
  
  // set the ranges
  var xScale = d3.scaleLinear().range([0, width]);
  var yScale = d3.scaleLinear().range([height, 0]);

  // define the line
  /*var line = d3.line()
   .x(function(d) { TK })
   .y(function(d) { TK });*/

  //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) { TK }));
  //yScale.domain(d3.extent(nestedData, function(d) { TK }));
  
  // 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));
 

  // Add the line path
  /*svg.selectAll("path.tweetline")
    .data(TK)
  	.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>