D3 Tutorial #7

by Johnny Lee

HTML

<div class="chart"></div>

CSS

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: black;
}
.chart svg {
  width: 516px;
  height: 516px;
}

JavaScript

var data1 = [ 
	{x:50,y:10}, {x:10,y:110}, {x:60,y:90}, {x:110,y:110}, {x:70,y:10} ];
var data2 = [ 
	{x:10,y:10}, {x:50,y:110}, {x:60,y:90}, {x:70,y:110}, {x:110,y:10} ];
var maxWidth = 
	document.getElementsByClassName('chart')[0].offsetWidth - 20;
var maxDomain = Math.max(
	d3.max(data1, function(d) { return Math.max(d.x, d.y); }), 
  d3.max(data2, function(d) { return Math.max(d.x, d.y); }));
var x = d3.scale.linear()
  .domain([0, maxDomain ])
  .range([10, maxWidth]);
var svg = d3.select('.chart').append('svg');
var line = d3.svg.line()
  .x(function(d) { return x(d.x); })
  .y(function(d) { return x(d.y); })
  .interpolate('basis-closed');
svg.append('path')
.attr({
  'd': line(data1),
  'y': 0,
  'stroke': '#e80',
  'stroke-width': '12px',
  'fill': '#fd5'
})
.transition()
.duration(800).delay(300)
.attr({
  'd': line(data2),
  'y': 0,
  'stroke': '#e80',
  'stroke-width': '12px',
  'fill': '#fd5'
});