Lyon's skyscrapers

- créer le 27/02/2015
- derniere modif le 02/03/2015

Exercice de recréation d'un graphique en bar avec des données tsv en entrées.

Attention: en svg Il faut 4 données pour dessiner un rectangle: X, Y, Width, Height

Premier essai de réalistion avec D3.js.

<!DOCTYPE html>
<meta charset="utf-8">

rect:hover{
  fill: brown;
}

</style>
<svg class="graphique"></svg>

//Définition de la largeur et hauteur de la fenêtre svg 
	var largeurSVG= 960;
	var hauteurSVG= 500;

// Attribution de ces proprietes au svg 
	var graphique = d3.select(".graphique")
					.attr("width",largeurSVG)
					.attr("height",hauteurSVG);

// Le reste des donnees est de type tsv
d3.tsv("data_immeubles.tsv",change_type, function (erreur,donnees) {

//Definition de lechelle en x p/r à la taille du svg 
	//var y= d3.scale.linear().domain([0,donnees.length]).range([largeurSVG,0]);
	var y= d3.scale.linear().domain([0,d3.max(donnees, function(d) { 
							return d.taille; })])
							.range([0,hauteurSVG -5]);

//Définition de la largeur d'un immeuble en fonction de la taille du SVG
	var largeurImmeuble= largeurSVG /(donnees.length);

//Définition de la liste d'imeuble avec mis en place de l'attribut transform en x
	var immeubles = graphique.selectAll("g")
					.data(donnees)
					.enter().append("g")
					.attr("transform", function function_name (d,i) {
						return "translate("+ i * largeurImmeuble +",0)";
					});
	
	//Attribution des propriétés de chaque rectangle qui correspond à la bar d'un immeuble
	immeubles.append('rect')
			.attr("y", function (d) {
				return hauteurSVG - y(d.taille);
			})
			.attr("height",function (d) {
				return y(d.taille)
			})
			.attr("width", largeurImmeuble -3);

//Attribution des noms à chaque immeuble 
	immeubles.append("text")
	.attr('y',hauteurSVG -5 )
	.attr('height', 100  )
	.attr('width', 100)
	.text(function  (d) {
		return " "+d.nom_immeuble.substr(5) +": "+ d.taille +" m";
	});

})

// Change le type de string en number
function change_type (donnees) {
	donnees.taille = Number(donnees.taille);
	return donnees;
}
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js