Visualiser des données avec D3

Il manque à notre nuage de points des axes.

À faire vous même 8.1

script.js


var tab=[[5,3],[15,4],[3,10],[8,5],[20,8]]
var body=d3.select("body");
var echelleX=d3.scale.linear()
                .domain([3,20])
                .range([30,370]);
var echelleY=d3.scale.linear()
                .domain([3,10])
                .range([370,30]);
var xAxe = d3.svg.axis()
                  .scale(echelleX)
                  .orient("bottom");
var svg=body.append("svg");
svg.attr({"width":"400px","height":"400px"})
svg.style("border","1px solid black");
svg.selectAll("circle")
    .data(tab)
    .enter()
    .append("circle")
    .attr({"r":"3px","fill":"black","stroke":"black"})
    .attr("cx",function(d,i){
        return (echelleX(d[0]));
    })
    .attr("cy",function(d,i){
        return (echelleY(d[1]));
    });
svg.append("g")
    .call(xAxe);

Testez ce code.

Quelques explications sur ce code :

var xAxe = d3.svg.axis().scale(echelleX).orient("bottom"); nous définissons un axe à partir de l'échelle précédemment définie (echelleX) et nous le plaçons en "bas" (n'oubliez pas que l'origine de notre graphe se trouve en haut à gauche de la fenêtre)
svg.append("g").call(xAxe); permet d'afficher l'axe dans la fenêtre (nous créons un "groupe" svg (balise <g>) qui accueille notre axe).

Nous avons bien notre axe des abscisses qui est apparu, mais il y a quelques problèmes :

graphiquement il n'est pas très "beau"
l'axe se trouve en haut alors que nous le voudrions en bas

Commençons par régler le deuxième problème :

il suffit d'appliquer une transformation, plus précisément une translation au "groupe" que nous avons défini (revoir les activités sur le svg si nécessaire)

À faire vous même 8.2

script.js


var tab=[[5,3],[15,4],[3,10],[8,5],[20,8]]
var body=d3.select("body");
var echelleX=d3.scale.linear()
                .domain([3,20])
                .range([30,370]);
var echelleY=d3.scale.linear()
                .domain([3,10])
                .range([370,30]);
var xAxe = d3.svg.axis()
                  .scale(echelleX)
                  .orient("bottom");
var svg=body.append("svg");
svg.attr({"width":"400px","height":"400px"})
svg.style("border","1px solid black");
svg.selectAll("circle")
    .data(tab)
    .enter()
    .append("circle")
    .attr({"r":"3px","fill":"black","stroke":"black"})
    .attr("cx",function(d,i){
        return (echelleX(d[0]));
    })
    .attr("cy",function(d,i){
        return (echelleY(d[1]));
    });
svg.append("g")
    .attr("transform","translate(0,370)")
    .call(xAxe);

Testez ce code.

Afin d'améliorer l'esthétique de notre axe, nous utiliserons la méthode attr et style, toujours sur le "groupe".

À faire vous même 8.2

script.js


var tab=[[5,3],[15,4],[3,10],[8,5],[20,8]]
var body=d3.select("body");
var echelleX=d3.scale.linear()
                .domain([3,20])
                .range([30,370]);
var echelleY=d3.scale.linear()
                .domain([3,10])
                .range([370,30]);
var xAxe = d3.svg.axis()
                  .scale(echelleX)
                  .orient("bottom");
var svg=body.append("svg");
svg.attr({"width":"400px","height":"400px"})
svg.style("border","1px solid black");
svg.selectAll("circle")
    .data(tab)
    .enter()
    .append("circle")
    .attr({"r":"3px","fill":"black","stroke":"black"})
    .attr("cx",function(d,i){
        return (echelleX(d[0]));
    })
    .attr("cy",function(d,i){
        return (echelleY(d[1]));
    });
svg.append("g")
    .style("font-family","sans-serif")
    .style("font-size","11px")
    .attr({"fill": "none","stroke": "black"})
    .attr("transform","translate(0,370)")
    .call(xAxe);

Testez ce code.

Il nous reste à créer notre axe vertical exactement de la même façon.

À faire vous même 8.3

script.js


var tab=[[5,3],[15,4],[3,10],[8,5],[20,8]]
var body=d3.select("body");
var echelleX=d3.scale.linear()
                .domain([3,20])
                .range([30,370]);
var echelleY=d3.scale.linear()
                .domain([3,10])
                .range([370,30]);
var xAxe = d3.svg.axis()
                  .scale(echelleX)
                  .orient("bottom");
var yAxe = d3.svg.axis()
                  .scale(echelleY)
                  .orient("left");
var svg=body.append("svg");
svg.attr({"width":"400px","height":"400px"})
svg.style("border","1px solid black");
svg.selectAll("circle")
    .data(tab)
    .enter()
    .append("circle")
    .attr({"r":"3px","fill":"black","stroke":"black"})
    .attr("cx",function(d,i){
        return (echelleX(d[0]));
    })
    .attr("cy",function(d,i){
        return (echelleY(d[1]));
    });
svg.append("g")
    .style("font-family","sans-serif")
    .style("font-size","11px")
    .attr({"fill": "none","stroke": "black"})
    .attr("transform","translate(0,370)")
    .call(xAxe);
svg.append("g")
    .style("font-family","sans-serif")
    .style("font-size": "11px")
    .attr({"fill": "none","stroke": "black"})
    .attr("transform","translate(30,0)")
    .call(yAxe);

Testez ce code.

Remarque : nous avons dû effectuer une translation selon l'axe des x de 30 pixels afin de tenir compte de la "marge" que nous avons mise en place dans l'activité précédente.

Afin d'améliorer le rendu, nous allons modifier le domain afin de faire apparaitre l'origine de notre repère sur nos axes

À faire vous même 8.4

script.js


var tab=[[5,3],[15,4],[3,10],[8,5],[20,8]]
var body=d3.select("body");
var echelleX=d3.scale.linear()
                .domain([0,20])
                .range([30,370]);
var echelleY=d3.scale.linear()
                .domain([0,10])
                .range([370,30]);
var xAxe = d3.svg.axis()
                  .scale(echelleX)
                  .orient("bottom");
var yAxe = d3.svg.axis()
                  .scale(echelleY)
                  .orient("left");
var svg=body.append("svg");
svg.attr({"width":"400px","height":"400px"})
svg.style("border","1px solid black");
svg.selectAll("circle")
    .data(tab)
    .enter()
    .append("circle")
    .attr({"r":"3px","fill":"black","stroke":"black"})
    .attr("cx",function(d,i){
        return (echelleX(d[0]));
    })
    .attr("cy",function(d,i){
        return (echelleY(d[1]));
    });
svg.append("g")
    .style("font-family","sans-serif")
    .style("font-size","11px")
    .attr({"fill": "none","stroke": "black"})
    .attr("transform","translate(0,370)")
    .call(xAxe);
svg.append("g")
    .style("font-family","sans-serif")
    .style("font-size","11px")
    .attr({"fill": "none","stroke": "black"})
    .attr("transform","translate(30,0)")
    .call(yAxe);

Au niveau de nos échelles, au lieu d'avoir des plages de valeurs (par exemple, toutes les valeurs de 0 à 50), il est possible d'avoir des valeurs discrètes (par exemple : 10,20,30,40 et 50).

Pour ce faire, au moment de la définition de l'échelle, nous utiliserons un d3.scale.ordinal() à la place d'un d3.scale.linear(). De plus, au lieu de définir notre domaine comme ceci .domain([0,30]) (toutes les valeurs entre 0 et 30), nous définirons le domaine comme cela .domain([10,20,30,40,50]).

Tout ceci ne vous parle peut-être pas beaucoup, prenons donc un exemple :

Nous aurons en ordonnée le nombre de visiteurs et en abscisse les jours de la semaine. Il faudra donc utiliser utiliser une échelle "ordinal" avec un domaine .domain("lundi","mardi","mercredi","jeudi","vendredi","samedi","dimanche"])

Comme nous avons à gérer non pas des points, mais un diagramme en barre, il est nécessaire d'utiliser rangeBands à la place de range.

À faire vous même 8.5

Complétez le programme ci-dessous afin d'obtenir ceci :


var tab=[2,6,8,23,30,27,8];
var body=d3.select("body");
var echelleX=d3.scale.ordinal()
                .domain(["lundi","mardi","mercredi","jeudi","vendredi","samedi","dimanche"])
                .rangeBands([30, 370]);
var echelleY=d3.scale.linear()
                .domain([0,30])
                .range([370,30]);
var xAxe = d3.svg.axis()
                  .scale(echelleX)
                  .orient("bottom");
var yAxe = d3.svg.axis()
                  .scale(echelleY)
                  .orient("left");
.........
.........
.........