| nom_immeuble | taille | |
|---|---|---|
| tour_duch | 80 | |
| tour_circ | 72 | |
| tour_edf | 80 | |
| tour_swiss | 82 | |
| tour_oxygen | 117 | |
| tour_silex2 | 120 | |
| tour_Crayon | 165 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| rect { | |
| fill: steelblue; | |
| } | |
| rect:hover{ | |
| fill: brown; | |
| } | |
| </style> | |
| <svg class="graphique"></svg> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| //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> |