Example d3.js line chart - tutorial

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<meta name="author" content="@carlvlewis">

<title>Percent of workforce in Leisure and Hospitality industry, 1990-2016</title>

<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
	
<style>p { font-family: helvetica, arial, sans-serif;
		font-size: 12px;
	}  
	h1 {
		  font-family: helvetica,arial,sans-serif;
	  }
	  h2 {font-family: helvetica, arial, sans-serif;
		  font-size: smaller;
	  }
	  .line-chart {
  background-color: white;
}
.line-chart .line {
  fill: none;
}
.line-chart .line path {
  stroke: #135ACA;
  stroke-width: 2;
}
.line-chart rect {
  fill: #135ACA;
}
.line-chart circle {
  fill: white;
  stroke: #135ACA;
  stroke-width: 2px;
}
.line-chart .y-axis text {
  fill: grey;
  font-size: 12px;
  font-weight: 300;
}
.line-chart .x-axis .tick {
  fill: grey;
  font-size: 12px;
}
.line-chart .x-axis line {
  stroke: #eeeeee;
  stroke-width: 2;
  stroke-dasharray: 10,10;
}
.line-chart .x-axis text {
  opacity: 0;
  font-weight: 500;
}
.line-chart.tooltip {
  position: absolute;
  text-align: center;
  width: 80px;
  height: 45px;
  padding: 5px;
  font-size: 14px;
  background: white;
  border: solid;
  border-radius: 3px;
  border-color: #135ACA;
  border-width: 3px;
  pointer-events: none;
}
.line-chart.tooltip span {
  color: #135ACA;
  display: block;
  font-weight: 500;
}
.line-chart.tooltip span.number {
  font-weight: 300;
}
.line-chart.tooltip:before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -12px;
  width: 0;
  height: 0;
  border-right: 12px solid #135ACA;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.line-chart.tooltip:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -8px;
  width: 0;
  height: 0;
  border-right: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
	}</style> </head><body>
	
			<h1>Percentage of workforce in Leisure and Hospitality industry, Savannah, Ga. 1990-2016.</h1>

/*
* @param {Array} this.state.data - Arrar of arrays. ex. [["01/31/2016", 200], ["02/07/2016", 350]]
*/
var chart = function chart() {
    var chartWidth = 617;
    var chartHeight = 300;
    var margin = { top: 20, right: 30, bottom: 30, left: 60 };

// define axis ranges
    var xExtents = d3.extent(data, function (d) {
        return new Date(d[0]);
    });
    var yExtents = d3.extent(data, function (d) {
        return d[1];
    });

// scale for x axis. this will also be used to convert data.dates to their appropriate svg coordinate
    var x = d3.time.scale().domain([xExtents[0], xExtents[1]]).rangeRound([0, chartWidth - margin.left - margin.right]);

// scale for y axis. this will also be used to convert data.values to their appropriate svg coordinate
    var y = d3.scale.linear().domain([yExtents[0], Math.ceil(yExtents[0]) * 2]).range([chartHeight - margin.top - margin.bottom, 0]);

// define the x axis
    var xAxis = d3.svg.axis().scale(x).orient('bottom').innerTickSize(-chartHeight - margin.top - margin.bottom).outerTickSize(0).ticks(data.length).tickFormat(d3.time.format('%m/%y')).tickPadding(20);

// define the y axis
    var yAxis = d3.svg.axis().scale(y).orient('left').ticks(5).tickSize(0).tickFormat(round).tickPadding(10);

// graph line definition
    var line = d3.svg.line().x(function (d) {
        return x(new Date(d[0]));
    }).y(function (d) {
        return y(d[1]);
    });

// define the svg
    $('#chart').empty();
    var chart = d3.select('#chart').append('svg').attr('class', 'line-chart').attr('width', chartWidth).attr('height', chartHeight).append('g').attr('class', 'main').attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

// draw x axis
    chart.append('g').attr('class', 'x-axis').attr('transform', 'translate(0, ' + (chartHeight - margin.top - margin.bottom) + ')').call(xAxis);

// draw y axis
    chart.append('g').attr('class', 'y-axis').attr('transform', 'translate(0,0)').call(yAxis);

// add lines to the graph
    chart.append('g').attr('class', 'line').selectAll('path').data([data]).enter().append('path').attr('d', line);

// tooltip
    var tooltip = d3.select('#chart').append('div').attr('class', 'line-chart tooltip').style('opacity', 0);

// hover dot
    chart.selectAll('circle').data(data).enter().append('circle').attr('id', function (d, i) {
        return 'dot-' + i;
    }).attr('cx', function (d, i) {
        return x(new Date(d[0]));
    }).attr('cy', function (d, i) {
        return y(d[1]);
    }).attr('r', 4).style('opacity', 0);

var barWidth = chartWidth / data.length;

// rects for hover reference
    chart.selectAll('rect.hover-line').data(data).enter().append('rect').style('opacity', 0).attr('width', 2).attr('class', 'line-chart hover-line').attr('id', function (d, i) {
        return 'line-' + i;
    }).attr('height', function (d) {
        return chartHeight - y(d[1]) - margin.top - margin.bottom;
    }).attr('x', function (d, i) {
        return x(new Date(d[0])) - 2 / 2;
    }).attr('y', function (d, i) {
        return y(d[1]) + 3;
    }); // add height of dot to prevent overlap

chart.selectAll('rect.hover-box').data(data).enter().append('rect').style('opacity', 0).attr('class', 'line-chart hover-box').attr('width', barWidth).attr('height', function (d) {
        return chartHeight - y(d[1]) - margin.top - margin.bottom;
    }).attr('x', function (d, i) {
        return x(new Date(d[0])) - barWidth / 2;
    }).attr('y', function (d, i) {
        return y(d[1]);
    }).on('mouseover', function (d, i) {
        var offset = $('#chart').offset(); // { left: 0, top: 0 }
        var xtranslate = x(new Date(d[0]));

var chartFormat = d3.time.format("");
        tooltip.style('opacity', 1).style('left', function () {
            return x(new Date(d[0])) - 2 / 2 + margin.left + 25 + 'px';
        }).style('top', d3.event.pageY - offset.top + 20 + 'px').html(chartFormat + (d[1]) + '%' );

// hover line
        var currentLine = '#line-' + i;
        d3.select(currentLine).style('opacity', 1);

// hover dot
        var currentDot = '#dot-' + i;
        d3.select(currentDot).style('opacity', 1);

// hover date
        d3.selectAll('g[transform = "translate(' + xtranslate + ',0)"]').select('text').style('opacity', 1);
    }).on('mouseout', function (d, i) {
        var xtranslate = x(new Date(d[0]));

tooltip.style('opacity', 0);

// hover line
        var currentLine = '#line-' + i;
        d3.select(currentLine).style('opacity', 0);

// hover dot
        var currentDot = '#dot-' + i;
        d3.select(currentDot).style('opacity', 0);

// hover date
        d3.selectAll('g[transform = "translate(' + xtranslate + ',0)"]').select('text[style = "text-anchor: middle; opacity: 1;"]').style('opacity', '0');
    });
};

chart();</script>
	</body>
	  <div id="chart"></div>
	<footer>Data Source: <a href="https://fred.stlouisfed.org/series/SMU13423407000000001A">Federal Reserve Bank of St. Louis</a> - By Carl V. Lewis</footer>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js