block by jmuyskens 37ce2282c4bf69a3e675344925fbc1f2

Scatterplot with real data (playing with axis formatting)

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: Scatterplot 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 = 800 - margin.left - margin.right,
      height = 600 - margin.top - margin.bottom;
  
  // set the ranges
  var x = d3.scaleTime().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

  //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
  x.domain(d3.extent(data, function(d) { return parseTime(d.created_at); }));
  y.domain(d3.extent(data, function(d) { return +d.favorite_count; }));
  
  // Add the X Axis
  svg.append("g")
  	.attr('class', 'x axis')
    .call(d3.axisBottom(x).tickSize(height).ticks(5));

  // Add the Y Axis
  svg.append("g")
	  .attr('class', 'y axis')
  	.attr('transform', 'translate(' + width + ', 0)')
    .call(d3.axisLeft(y).tickSize(width).ticks(7));
  
  // Add a container for the circles
  var circles = svg.append('g')
  	.attr('id', 'circles');
  
  // Add the line path
  circles.selectAll("circle")
    .data(data)
  	.enter().append('circle')
    .attr('class', function(d) { return 'circle ' + d.source; })
    .attr('r', 3)
    .attr('cx', function(d) { return x(parseTime(d.created_at)); })
    .attr('cy', function(d) { return y(+d.favorite_count); })
  
  // add annotations
  var annotation = svg.append('g')
  	.attr('transform', 
          'translate(' + x(parseFormattedTime("2017-01-20")) + ',0)')
  	
  annotation.append('line')
    .attr('class', 'annotation')
		.attr('y1', 0)
    .attr('y2', height)
  
  annotation.append('text')
  	.text('Inauguration day')
  	.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>
	path {
    fill: none;
    stroke: #aaa;
  }
  circle {
    opacity: 0.5;
  }
  
  .axis path {
    stroke: none;
  }
  
  .axis line {
    stroke: #ccc;
  }
  
  .axis.x line {
    stroke-dasharray: 3px 2px;
  }
  
  .circle.android {
    fill: red;
  }
  
  line.annotation {
    stroke: black;
  }

</style>

<body>

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