D3 Customize Line Chart

D3 cutomize line chart with JSON data like as animations, tooltips and legends etc...

by Khadeer Mohammed

HTML

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

CSS

body {
		  font: 12px/1.4 arial;
		  background: rgba(0,0,0,.1);
		  text-align: center;
		  color: #333;
		}
		text {
			fill: #555;
		}
		.axis path,
		.axis line {
		  fill: none;
		  stroke: rgba(0,0,0,.2);
		  shape-rendering: crispEdges;
		}
		.y.axis .tick:first-child line {
			stroke-opacity: 0;
		}
		.line {
		  fill: none;
		  stroke: #05c;
		  stroke-width: 2.5px;
		}
		.CircleG circle {
			fill: #fff;
			stroke: #05c;
			stroke-width: 1.5px;
			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 1px 5px rgba(0,0,0,.3);
		    border: 0px;		
		    border-radius: 3px;			
		    pointer-events: none;
		    white-space: nowrap;	
		}
		div.tooltip:after {
			content: '';
		    position: absolute;
		    bottom: -12px;
		    left: 50%;
		    margin-left: -5px;
		    border: 6px solid transparent;
		    border-top-color: rgba(0,0,0,.8);
		}
		div.tooltip.top:after {
			bottom: 100%;
			border-top-color: transparent;
			border-bottom-color: rgba(0,0,0,.8);
		}
		div.tooltip.left:after {
			left: 20px;
		}
		div.tooltip.right:after {
			left: auto;
			right: 20px;
		}
		.ChartBox {
			background: #fff;
			box-shadow: 0 2px 3px rgba(0,0,0,.1);
			padding: 1em;
			border-radius: 3px;
			display: inline-block;
		}
		.Cont {
			display: block;
			background: #fff;
			padding: 1em;
			font-size: 15px;
			text-align: left;
			margin: 1em;
		}
		.GridLines line {
			stroke: rgba(0,0,0,.05);
		}
		.GridLines line:first-child {
			stroke-opacity: 0;
		}
		.Legends ul {
		  margin: 0;
		  padding: 0;
		  list-style-type: none;
		}
		.Legends ul li {
		  padding: 1em 1em .2em;
		  line-height: 1.2;
		  display: inline-block;
		}
		.Legends li > :first-child, .Legends li >...

JavaScript

var data = [{"date":"Feb 2005","rate":4},{"date":"Jul 2005","rate":5},{"date":"Feb 2006","rate":4.6},{"date":"Jul 2006","rate":4.7},{"date":"Feb 2007","rate":4.6},{"date":"Jul 2007","rate":4.7},{"date":"Feb 2008","rate":5.6},{"date":"Jul 2008","rate":5.8},{"date":"Feb 2009","rate":7.5},{"date":"Jul 2009","rate":8.5},{"date":"Feb 2010","rate":7.4},{"date":"Jul 2010","rate":8.4},{"date":"Feb 2011","rate":7.1},{"date":"Jul 2011","rate":6},{"date":"Feb 2012","rate":5.2},{"date":"Jul 2012","rate":4.2},{"date":"Feb 2013","rate":4.5},{"date":"Jul 2013","rate":5.3},{"date":"Feb 2014","rate":6.1},{"date":"Jul 2014","rate":7.2},{"date":"Feb 2015","rate":8.5},{"date":"Jul 2015","rate":10.3}];

var margin = {
        top: 20,
        right: 20,
        bottom: 50,
        left: 60
    },
    width = 700 - margin.left - margin.right,
    height = 365 - margin.top - margin.bottom;

// Adjust parsing of data to properly show tooltip
var parseDate = d3.time.format("%b %Y").parse,
    bisectDate = d3.bisector(function(d) {
        return d.date;
    }).left,
    formatValue = d3.format(",.1f"),
    formatCurrency = function(d) {
        return formatValue(d) + "%";
    };

var color = '#05c';

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")
    .ticks(5);

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

var svg = d3.select(".ChartBox").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.csv("data3.csv", function(error, data) {
//if (error) throw error;

data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.rate...