d3.js : création d'un graphique

<!DOCTYPE html>
<html>

  <head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <p>Graphique</p>
    <div id="graph"></div>
    <script src="script.js"></script>
  </body>

</html>

// Tableau de données obtenu sur les données AirBnB
donnees = [
  { type: "Entire home/apt", count: 35185, price: 106 },
  { type:    "Private room", count:  5827, price:  56 },
  { type:     "Shared room", count:   464, price:  40 }
];

// Liste des modalités de la variable type
var type_modalites = donnees.map(function(d) { return d.type; });
// Prix (moyen) maximum
var prix_max = d3.max(donnees, function(d) { return d.price; });

// Définition des marges et de la taille du graphique
var marges = {haut: 20, droit: 20, bas: 30, gauche: 40},
    largeurTotale = 400,
    hauteurTotale = 300,
    largeurInterne = largeurTotale - marges.gauche - marges.droit,
    hauteurInterne = hauteurTotale - marges.haut - marges.bas;

// Echelle pour les prix sur l'axe Y
var echelleY = d3.scaleLinear()
    .domain([0, prix_max])
    .range([hauteurInterne, 0]);
// Echelle pour le type sur l'axe X
var echelleX = d3.scaleBand()
    .domain(type_modalites)
    .range([0, largeurInterne])
	.padding(0.2);
// Echelle pour le type affectant une couleur automatique à chaque type
var echelleCouleur = d3.scaleOrdinal(d3["schemeSet1"])
    .domain(type_modalites);

// Création de l'axe X
var axeX = d3.axisBottom()
    .scale(echelleX);

// Création de l'axe Y
var axeY = d3.axisLeft()
    .scale(echelleY);

// Création du graphique
var graphique = d3.select("#graph").append("svg")
    .attr("width", largeurTotale)
    .attr("height", hauteurTotale)
  .append("g")
    .attr("transform", "translate(" + marges.gauche + "," + marges.haut + ")");

// Ajout de l'axe X au graphique
graphique.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + hauteurInterne + ")")
  .call(axeX);

// Ajout de l'axe Y au graphique
graphique.append("g")
    .attr("class", "y axis")
  .call(axeY);

graphique.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Prix moyen");
    
// Ajout d'une barre pour chaque type de logement, avec une taille fonction du prix moyen
graphique.selectAll(".bar")
  .data(donnees)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return echelleX(d.type); })
  .attr("width", echelleX.bandwidth())
  .attr("y", function(d) { return echelleY(d.price); })
  .attr("height", function(d) { return hauteurInterne - echelleY(d.price); })
  .style("fill", function(d) { return echelleCouleur(d.type); });

.bar {
  fill: orange;
}

.axis {
  font-size: 10px;
}

.axis line {
  stroke: black;
  fill: none;
}

.axis path, .x.axis line {
  display: none;
}

Cet exemple permet de montrer comment créer un diagramme en barres, 
à l'aide de la librairie **d3.js**, pour les données suivantes :

| Type            | Nombre | Prix moyen |
|:----------------|-------:|-----------:|
| Entire home/apt |  35185 |        106 |
| Private room    |   5827 |         56 |
| Shared room     |    464 |         40 |

Le code est commenté pour expliquer ce que chaque partie permet de 
réaliser dans le graphique.