D3 Multiline Chart

by Sourabh Tewari

HTML

<h2>Line Chart</h2>
<div class="line-chart"></div>

CSS

svg {
  font: 10px sans-serif;
}

path {
  stroke: #000;
  stroke-width: 2;
  fill: none;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.dot {
  stroke: #000;
  stroke-width: 2;
  radius: 5;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 80px;
  height: 40px;
  padding: 2px;
  font: 12px sans-serif;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 8px;
  pointer-events: none;
}

JavaScript

var date1 = [{
	  'date': '20111001',
	  'New York': '63.4',
	  'San Francisco': '62.7',
	  'Austin': '72.2'
	}, {
	  'date': '20111002',
	  'New York': '58',
	  'San Francisco': '59.9',
	  'Austin': '67.7'
	}, {
	  'date': '20111003',
	  'New York': '53.3',
	  'San Francisco': '59.1',
	  'Austin': '69.4'
	}, {
	  'date': '20111004',
	  'New York': '35.7',
	  'San Francisco': '58.8',
	  'Austin': '68'
	}, {
	  'date': '20111005',
	  'New York': '34.2',
	  'San Francisco': '58.7',
	  'Austin': '72.4'
	}, ];


	var width = 500,
	  height = 400,
	  margin = 24;


	var parseDate = d3.time.format("%Y%m%d").parse;
	var max = d3.max(date1, function(data) {
	  return d3.max(data, function(d) {
	    d3.max(d['New York'], d['San Francisco'], d['Austin']);
	  });
	});
	console.log(max);
	var x = d3.time.scale().range([0, width - margin * 2]).domain([parseDate(date1[0].date), parseDate(date1[date1.length - 1].date)]);

	var y = d3.scale.linear().range([height, 0]);


	var xAxis = d3.svg.axis().scale(x).orient("bottom"),

	  yAxis = d3.svg.axis().scale(y).orient("left");


	var color = d3.scale.category10();




	var line = d3.svg.line().x(function(d) {
	    return x(d.date);
	  })
	  .y(function(d) {
	    return y(d.probability);
	  });



	// Chart Area
	var svg = d3.select('.line-chart')
	  .append('svg')
	  .attr('width', width)
	  .attr('height', height)
	  .append('g')
	  .attr('transform', 'translate(' + 3 * margin + ',' + margin + ')');



	var div = d3.select("body").append("div").attr("class", "tooltip")
	  .style("opacity", 0);

	// The Axes
	var yAxisg = svg.append('g').classed("yTick", true).attr("transform", "translate(0,0)").call(yAxis);
	var xAxisg = svg.append('g').attr("transform", "translate(0," + (height - 2 * margin) + ")").classed("xTick", true).call(xAxis);
	svg.selectAll('.yTick text')
	  .style('fill', '#555')
	  .style('font-size', '12px');
	svg.selectAll('.xTick text')
	  .style('fill', '#555')
	  .style('font-size', '12px');
	svg.selectAll('.xTick...