D3 Area Chart with JSON Data

D3 Area Chart with JSON Data

by Khadeer Mohammed

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

CSS

text {
				fill: #555;
			}
			text.shadow {
			  stroke: #fff;
			  stroke-width: 3px;
			}
			path { 
			    stroke: #05c;
			    fill: none;
			}
			.axis path,
			.axis line {
			    fill: none;
			    stroke: rgba(0,0,0,.2);
			    shape-rendering: crispEdges;
			}
			.y.axis .tick:first-child line {
				stroke-opacity: 0;
			}
			.grid line {
			    stroke: #f2f2f2;
			    shape-rendering: crispEdges;
			}
			.grid path {
			    stroke-width: 0;
			}
			.line {
				stroke-width: 2.5px;
			}
			.area {
			    fill:#248;
          fill-opacity: .5;
			    stroke-width: 0;
			}

JavaScript

var data = [{"date":"1-May-12","close":580.13},{"date":"30-Apr-12","close":400.98},{"date":"27-Apr-12","close":267},{"date":"26-Apr-12","close":189.7},{"date":"25-Apr-12","close":199},{"date":"24-Apr-12","close":430.28},{"date":"23-Apr-12","close":266.7},{"date":"20-Apr-12","close":234.98},{"date":"19-Apr-12","close":345.44},{"date":"18-Apr-12","close":443.34},{"date":"17-Apr-12","close":543.7},{"date":"16-Apr-12","close":350.13},{"date":"13-Apr-12","close":165.23},{"date":"12-Apr-12","close":262.77},{"date":"11-Apr-12","close":366.2},{"date":"10-Apr-12","close":368.44},{"date":"9-Apr-12","close":266.23},{"date":"5-Apr-12","close":163.68},{"date":"4-Apr-12","close":64.31},{"date":"3-Apr-12","close":169.32},{"date":"2-Apr-12","close":168.63},{"date":"30-Mar-12","close":159.55},{"date":"29-Mar-12","close":269.86},{"date":"28-Mar-12","close":167.62},{"date":"27-Mar-12","close":101.48},{"date":"26-Mar-12","close":60.98}];

var margin = {top: 20, right: 20, bottom: 30, left: 50},
			    width = 960 - margin.left - margin.right,
			    height = 500 - margin.top - margin.bottom;

			var parseDate = d3.time.format("%d-%b-%y").parse;

			var x = d3.time.scale()
			    .range([0, width]);

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

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

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

			var area = d3.svg.area()
			    .x(function(d) { return x(d.date); })
			    .y0(height)
			    .y1(function(d) { return y(d.close); });

			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 + ")");

			//d3.tsv("data.tsv", function(error, data) {
			  //if (error) throw error;

			  data.forEach(function(d) {
			    d.date = parseDate(d.date);
			    d.close = +d.close;
			  });

			 ...