JS Bin // source https://jsbin.com/wecojo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  </head>
<body>

var w = 400;
var h = 350;

// line chart

var monthlySales = [{ month: 10, sales: 100 }, { month: 20, sales: 134 }, { month: 30, sales: 250 }, { month: 40, sales: 300 }, { month: 50, sales: 215 }, { month: 60, sales: 122 }, { month: 70, sales: 246 }, { month: 80, sales: 199 }, { month: 90, sales: 230 }, { month: 100, sales: 170 }];

var lineFun = d3.svg.line().x(function (d) {
	return d.month * 3;
}).y(function (d) {
	return h - d.sales;
}).interpolate('linear');

var svg = d3.select('body').append('svg').attr('width', w).attr('height', h);

var viz = svg.append('path').attr('d', lineFun(monthlySales)).attr('stroke', 'purple').attr('stroke-width', 2).attr('fill', 'none');

// add labels
var labels = svg.selectAll('text').data(monthlySales).enter().append('text').text(function (d) {
	return d.sales;
}).attr('x', function (d) {
	return d.month * 3 - 25;
}).attr('y', function (d) {
	return h - d.sales;
}).attr('font-family', 'sans-serif').attr('text-anchor', 'start').attr('font-size', '.35em').attr('font-weight', function (d, i) {
	if (i === 0 || i === monthlySales.length - 1) return 'bold';
	return 'normal';
});
</script>

// line chart

let monthlySales = [
	{month: 10, sales: 100},
	{month: 20, sales: 134},
	{month: 30, sales: 250},
	{month: 40, sales: 300},
	{month: 50, sales: 215},
	{month: 60, sales: 122},
	{month: 70, sales: 246},
	{month: 80, sales: 199},
	{month: 90, sales: 230},
	{month: 100, sales: 170},
];

var lineFun = d3.svg.line()
.x(d => d.month * 3)
.y(d => h - d.sales)
.interpolate('linear');

var svg = d3.select('body')
.append('svg')
.attr('width',  w)
.attr('height', h);

var viz = svg.append('path')
.attr('d', lineFun(monthlySales))
.attr('stroke', 'purple')
.attr('stroke-width', 2)
.attr('fill', 'none');

// add labels
var labels = svg.selectAll('text')
.data(monthlySales)
.enter()
.append('text')
.text(d => d.sales)
.attr('x', d => d.month * 3 - 25)
.attr('y', d => h - d.sales)
.attr('font-family', 'sans-serif')
.attr('text-anchor', 'start')
.attr('font-size', '.35em')
.attr('font-weight', (d, i) => {
	if (i === 0 || i === monthlySales.length - 1) return 'bold';
	return 'normal';
});

</script></body>
</html>

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