D3 Customize Area Chart

D3 Customize Area Chart with JSON data like as tooltips and legends etc...

by Khadeer Mohammed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="ChartBox"></div>

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: rgba(0,85,204,.3);
			    stroke-width: 0;
			}

			.CircleG circle {
				stroke: #05c;
				stroke-width: 1.5px;
				fill: #fff;
				transition: fill ease-in .2s;
				-webkit-transition: fill ease-in .2s;
				-ms-transition: fill ease-in .2s;
			}
			.CircleG circle:hover {
				stroke-width: 2px;
				fill: #05c;
			}
			div.Tooltip {	
			    position: absolute;			
			    text-align: center;			
			    padding: 10px 1em;			
			    background: rgba(0,0,0,.8);
			    color: #eee;
			    box-shadow: 0 0 3px rgba(0,0,0,.3);
			    border: 0px;		
			    border-radius: 3px;			
			    pointer-events: none;	
			}
			div.Tooltip:after {
				content: '';
			    position: absolute;
			    top: 100%;
			    left: 50%;
			    margin-left: -6px;
			    border: 6px solid transparent;
			    border-top-color: rgba(0,0,0,.8);
			}
			div.Tooltip.Top:after {
				top: auto;
				bottom: 100%;
				border-top-color: transparent;
				border-bottom-color: rgba(0,0,0,.8);
			}
			div.Tooltip.Right:after {
				left: auto;
				right: 10px;
			}
			div.Tooltip.Left:after {
				left: 20px;
			}
			div.Tooltip.Right:after {
				left: auto;
				right: 20px;
			}
			.ChartBox {
				display: inline-block;
				background: #fff;
				box-shadow: 0 2px 2px rgba(0,0,0,0.1);
				padding: 1em;
				border-radius: 3px;
			}
			.Cont {
				display: block;
				background: #fff;
				padding: 1em;
				font-size: 15px;
				text-align: left;
				margin: 1em;
			}
			.GridLines line {
				stroke:...

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: 50,
        left: 60
    },
    width = 650 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d-%b-%y").parse;
formatDate = d3.time.format('%d %b')
bisectDate = d3.bisector(function(d) {
        return d.date;
    }).left,
    formatValue = d3.format(",.1f"),
    formatCurrency = function(d) {
        return formatValue(d) + "%";
    };

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

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

var color = '#05C';

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(5)
    .tickFormat(formatDate);

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

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

var line = d3.svg.line()
    .interpolate('cardinal')
    .x(function(d) {
        return x(d.date);
    })
   ...