D3 Tutorial #6

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 data = [ 
{x:50,y:10}, {x:10,y:110}, {x:60,y:90}, {x:110,y:110}, {x:70,y:10} ];
var maxWidth = 
	document.getElementsByClassName('chart')[0].offsetWidth - 20;
var x = d3.scale.linear()
  .domain([0, d3.max(data, function(d) { return Math.max(d.x, d.y); }) ])
  .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); });
svg.append('path').attr({
  'd': line(data),
  'y': 0,
  'stroke': '#e80',
  'stroke-width': '12px',
  'fill': '#fd5'
});