JSFiddle - React, Tailwind, and code Playground

JavaScript

var w = window.innerWidth,
	h = window.innerHeight,
	margin = { top: 40, right: 20, bottom: 40, left: 40 };

svg = d3.select("body")
	.append("svg")
	.attr({
		width: w - 100,
		height: h
	});

var parse = d3.time.format("%Y").parse;

var data = [
	{ year: "2008", number : 3},
	{ year: "2009", number : 10},
	{ year: "2010", number : 17},
	{ year: "2011", number : 23},
	{ year: "2012", number : 34},
	{ year: "2013", number : 50}
];

for (var i = 0; i < data.length; i++) {
	var d = data[i];
	d.year = parse(d.year);
};


var yearScale = d3.time.scale()
	.domain(d3.extent(data, function (d) { return d.year;}))
	.range(50, window.innerWidth - 50);

var numberScale = d3.scale.linear()
	.domain([0, d3.max(data, function (d) { return d.number;})])
	.range([50, window.innerHeight - 50]);


svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr({
		cx: function (d) { return yearScale(d.year); },
		cy: function (d) { return window.innerHeight - numberScale(d.number)},
		r: 4,
		fill: "#fff",
		stroke: "#78B446",
		"stroke-width": 4
	})