D3JS - Lignes (Linear Chart)

Introduction

Cet exemple est le simple prolongement du précédent tutoriel Lignes (Linear Chart).

Dédoublement

Il nous a suffit de doubler les informations concernant l'axe Y.

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

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

De la même façon, deux fonctions de projection sont définies à partir de nos données.

const line0 = d3.line()
	.x(d => x(d.date))
	.y(d => y0(d.chomage));

const line1 = d3.line()
	.x(d => x(d.date))
	.y(d => y1(d.cac40));

Enfin on construit un axe à droite et l'autre à gauche.

svg.append("g")
	.attr("class", "axisSteelblue")
	.attr("transform", "translate(" + width + ", 0)")
	.call(d3.axisRight(y0))
	.append("text")
		.attr("transform", "rotate(-90)")
		.attr("y", 6)
		.attr("dy", "-0.71em")
		.style("text-anchor", "end")
		.text("%");
	
svg.append("g")
	.attr("class", "axisRed")
	.call(d3.axisLeft(y1))
	.append("text")
		.attr("transform", "rotate(-90)")
		.attr("y", 6)
		.attr("dy", ".71em")
		.style("text-anchor", "end")			
		.text("Pts");

CSS

Les class axisRed et axisSteelblue permettent de définir la couleur de la ligne, de l'axe gradué et du texte.

.axisRed line {
  stroke: red;
}

.axisRed path {
  stroke: red;
}

.axisRed text {
  fill: red;
}

.axisSteelblue line {
  stroke: steelblue;
}

.axisSteelblue path {
  stroke: steelblue;
}

.axisSteelblue text {
  fill: steelblue;
}

Le reste du traitement suit cette logique, un traitement pour la courbe du chomage et un autre pour celle du cours du CAC 40. Pour voir tout le code nécessaire à la construction de ce graphique, n'hésitez pas à regarder le code source.