Aleksey-Danchin · March 21, 2017 12:24
diff --git a/dollar.tsv b/dollar.tsv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>d3</title>
 </head>
 <body>

 	<svg width="960" height="500"></svg>


 	<script src="https://d3js.org/d3.v4.min.js"></script>
 	<script src="/script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
 const svg = d3.select("svg")
 	, margin = {top: 20, right: 0, bottom: 20, left: 0}
 	, width = +svg.attr("width") - margin.left - margin.right
 	, height = +svg.attr("height") - margin.top - margin.bottom
 	, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 const scaleX = d3.scaleTime()
 	.range([0, width]);

 const scaleY = d3.scaleLinear()
 	.range([height, 0]);

 const xAxis = d3.axisBottom(scaleX)
 	.ticks(d3.timeYear);

 const yAxis = d3.axisRight(scaleY)
 	.tickSize(width)
 	.tickFormat(function (d) {
 		// const s = d3.format(".1f")(d);
 		// return this.parentNode.nextSibling
 		// 	? "\xa0" + s
 		// 	: "$" + s + " million";

 		return this.parentNode.nextSibling
 			? "\xa0" + d
 			: "$ " + d;
 	});

 function customXAxis(g) {
 	g.call(xAxis);
 }

 function customYAxis(g) {
 	g.call(yAxis);
 	g.select(".domain").remove();

 	g.selectAll(".tick line")
 		.attr("stroke", "#777")
 		.attr("stroke-dasharray", "2,2");

 	g.selectAll(".tick text")
 		.attr("x", 4)
 		.attr("dy", -4);
 }

 d3.tsv('dollar.tsv', parseDollar, (err, data) => {
 	scaleX.domain([
 		d3.min(data, d => d.date),
 		d3.max(data, d => d.date)
 	]);

 	scaleY.domain([
 		d3.min(data, d => d.course) * 0.9,
 		d3.max(data, d => d.course)
 	]);

 	g.append("g")
 		.attr("transform", `translate(0, ${height})`)
 		.call(customXAxis);

 	g.append("g")
 		.call(customYAxis);

 	let dAttrString = `M ${scaleX(data[0].date)} ${scaleY(data[0].course)} L`;
 	for (let i = 1; i < data.length; i++)
 		dAttrString += ` ${scaleX(data[i].date)} ${scaleY(data[i].course)}`;

 	g.append('path')
 		.attr('d', dAttrString)
 		.attr('stroke-width', 1)
 		.attr('stroke', 'black')
 		.attr('fill-opacity', 0)
 		.transition().duration(1000)
 			.attrTween('stroke-dasharray', dAttrTween);
 });

 function parseDollar(d) {
 	return {
 		date: new Date(d.date),
 		course: +d.course.replace(',', '.')
 	}
 }

 function dAttrTween() {
 	let commonLength = this.getTotalLength(),
 		interpolater = d3.interpolateString("0," + commonLength, commonLength + "," + commonLength); // interpolation of stroke-dasharray attr

 	return t => interpolater(t);
 }
	<!DOCTYPE html>
	<html>
	<head>
	<title>d3</title>
	</head>
	<body>

	<svg width="960" height="500"></svg>


	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="/script.js"></script>
	</body>
	</html>
	const svg = d3.select("svg")
	, margin = {top: 20, right: 0, bottom: 20, left: 0}
	, width = +svg.attr("width") - margin.left - margin.right
	, height = +svg.attr("height") - margin.top - margin.bottom
	, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	const scaleX = d3.scaleTime()
	.range([0, width]);

	const scaleY = d3.scaleLinear()
	.range([height, 0]);

	const xAxis = d3.axisBottom(scaleX)
	.ticks(d3.timeYear);

	const yAxis = d3.axisRight(scaleY)
	.tickSize(width)
	.tickFormat(function (d) {
	// const s = d3.format(".1f")(d);
	// return this.parentNode.nextSibling
	// ? "\xa0" + s
	// : "$" + s + " million";

	return this.parentNode.nextSibling
	? "\xa0" + d
	: "$ " + d;
	});

	function customXAxis(g) {
	g.call(xAxis);
	}

	function customYAxis(g) {
	g.call(yAxis);
	g.select(".domain").remove();

	g.selectAll(".tick line")
	.attr("stroke", "#777")
	.attr("stroke-dasharray", "2,2");

	g.selectAll(".tick text")
	.attr("x", 4)
	.attr("dy", -4);
	}

	d3.tsv('dollar.tsv', parseDollar, (err, data) => {
	scaleX.domain([
	d3.min(data, d => d.date),
	d3.max(data, d => d.date)
	]);

	scaleY.domain([
	d3.min(data, d => d.course) * 0.9,
	d3.max(data, d => d.course)
	]);

	g.append("g")
	.attr("transform", `translate(0, ${height})`)
	.call(customXAxis);

	g.append("g")
	.call(customYAxis);

	let dAttrString = `M ${scaleX(data[0].date)} ${scaleY(data[0].course)} L`;
	for (let i = 1; i < data.length; i++)
	dAttrString += ` ${scaleX(data[i].date)} ${scaleY(data[i].course)}`;

	g.append('path')
	.attr('d', dAttrString)
	.attr('stroke-width', 1)
	.attr('stroke', 'black')
	.attr('fill-opacity', 0)
	.transition().duration(1000)
	.attrTween('stroke-dasharray', dAttrTween);
	});

	function parseDollar(d) {
	return {
	date: new Date(d.date),
	course: +d.course.replace(',', '.')
	}
	}

	function dAttrTween() {
	let commonLength = this.getTotalLength(),
	interpolater = d3.interpolateString("0," + commonLength, commonLength + "," + commonLength); // interpolation of stroke-dasharray attr

	return t => interpolater(t);
	}