D3JS - Lignes (Linear Chart)

Comparaison du cours du CAC 40 et du chomage entre 1988 et 2013

Dernière mise à jour le 13/06/2018

Cet exemple est le simple prolongement du précédent. 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.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y0(d.chomage); });

const line1 = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return 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");

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.

A suivre : Carte choroplèthe (non linéaire) Voir le tutoriel

comments powered by Disqus