D3.js - Historique des versions

Solo3326 : /* Exemples */

2021-05-07T08:04:52Z

Exemples

← Version précédente		Version du 7 mai 2021 à 08:04
Ligne 92 :		Ligne 92 :
	====Ajout de données + propriété dynamique====		====Ajout de données + propriété dynamique====
	Dans cet exemple, on affecte les données du tableau (qui contient des couleurs) à chaque '''div''' du '''body'''. Et on affecte un style CSS (la couleur), en prenant comme valeur celle contenu dans le tableau.		Dans cet exemple, on affecte les données du tableau (qui contient des couleurs) à chaque '''div''' du '''body'''. Et on affecte un style CSS (la couleur), en prenant comme valeur celle contenu dans le tableau.

	<u>'''HTML'''</u>		<u>'''HTML'''</u>
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
Ligne 97 :		Ligne 98 :
	</poem>		</poem>
	<u>'''JS'''</u>		<u>'''JS'''</u>
	~~----~~
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
	var div = d3.selectAll("div");		var div = d3.selectAll("div");
Ligne 106 :		Ligne 106 :
	====fonction enter()====		====fonction enter()====
	Le tableau passé en paramètre de '''data()''' est ici plus long que la sélection. Pour les valeurs supplémentaires du tableau (sélectionnées avec le '''enter()'''), on ajoute des '''div''' (avec '''append()''').		Le tableau passé en paramètre de '''data()''' est ici plus long que la sélection. Pour les valeurs supplémentaires du tableau (sélectionnées avec le '''enter()'''), on ajoute des '''div''' (avec '''append()''').
	~~=====~~HTML~~=====~~		<u>'''HTML'''</u>
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
	<div>Pomme</div><div>Tomate</div><div>Fleur</div>		<div>Pomme</div><div>Tomate</div><div>Fleur</div>
	</poem>		</poem>
	~~=====~~JS~~=====~~		<u>'''JS'''</u>
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
	// div : liste des div présents dans le HTML		// div : liste des div présents dans le HTML
Ligne 132 :		Ligne 132 :
	====fonction exit()====		====fonction exit()====
	C’est ici le contraire, le tableau est plus petit que la sélection. Pour les éléments de la sélection en trop (sélectionnés avec le '''exit()'''), on les supprime (avec '''remove()''').		C’est ici le contraire, le tableau est plus petit que la sélection. Pour les éléments de la sélection en trop (sélectionnés avec le '''exit()'''), on les supprime (avec '''remove()''').
	~~=====~~HTML~~=====~~		<u>'''HTML'''</u>
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
	<div>Pomme</div><div>Tomate</div><div>Fleur</div>		<div>Pomme</div><div>Tomate</div><div>Fleur</div>
	</poem>		</poem>
	~~=====~~JS~~=====~~		<u>'''JS'''</u>
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
	// div : liste des div présents dans le HTML		// div : liste des div présents dans le HTML

Solo3326 : /* Ajout de données + propriété dynamique */

2021-05-07T08:03:26Z

Ajout de données + propriété dynamique

← Version précédente		Version du 7 mai 2021 à 08:03
Ligne 92 :		Ligne 92 :
	====Ajout de données + propriété dynamique====		====Ajout de données + propriété dynamique====
	Dans cet exemple, on affecte les données du tableau (qui contient des couleurs) à chaque '''div''' du '''body'''. Et on affecte un style CSS (la couleur), en prenant comme valeur celle contenu dans le tableau.		Dans cet exemple, on affecte les données du tableau (qui contient des couleurs) à chaque '''div''' du '''body'''. Et on affecte un style CSS (la couleur), en prenant comme valeur celle contenu dans le tableau.
	~~=====~~HTML~~=====~~		<u>'''HTML'''</u>
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
	<div>Pomme</div><div>Tomate</div><div>Fleur</div>		<div>Pomme</div><div>Tomate</div><div>Fleur</div>
	</poem>		</poem>
	~~=====~~JS~~=====~~		<u>'''JS'''</u>
			----
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
	var div = d3.selectAll("div");		var div = d3.selectAll("div");

Solo3326 : /* Création d’un graphique */

2021-05-07T08:02:23Z

Création d’un graphique

@@ Ligne 589 : / Ligne 589 : @@
    .attr("height", function(d) { return hauteurInterne - echelleY(d.price); })
    .style("fill", function(d) { return echelleCouleur(d.type); });
 </poem>

Solo3326 : /* Création d’un graphique */

2021-05-07T08:01:31Z

Création d’un graphique

← Version précédente		Version du 7 mai 2021 à 08:01
Ligne 472 :		Ligne 472 :
	Le code est commenté pour expliquer ce que chaque partie permet de réaliser dans le graphique.		Le code est commenté pour expliquer ce que chaque partie permet de réaliser dans le graphique.

	<u>'''~~Index~~.html'''</u>		<u>'''index.html'''</u>
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			<!DOCTYPE html>
			<<nowiki>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</nowiki>>
			</poem>

			<u>'''style.css'''</u>
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			.bar {
			fill: orange;
			}

			.axis {
			font-size: 10px;
			}

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

			.axis path, .x.axis line {
			display: none;
			}
			</poem>

			<u>'''script.js'''</u>
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			// 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); });
			</poem>

			<u>'''README.md'''</u>
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			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.
			</poem>

Solo3326 : /* Création d’un graphique */

2021-05-07T07:57:33Z

Création d’un graphique

← Version précédente		Version du 7 mai 2021 à 07:57
Ligne 471 :		Ligne 471 :
	\|}		\|}
	Le code est commenté pour expliquer ce que chaque partie permet de réaliser dans le graphique.		Le code est commenté pour expliquer ce que chaque partie permet de réaliser dans le graphique.

			<u>'''Index.html'''</u>

Solo3326 : /* Création d’un graphique */

2021-05-07T07:55:20Z

Création d’un graphique

← Version précédente		Version du 7 mai 2021 à 07:55
Ligne 453 :		Ligne 453 :
	==Création d’un graphique==		==Création d’un graphique==
	Dans l’exemple ci-dessous, nous utilisons l’ensemble des éléments vu ci-dessous pour créer un diagramme en barres, pour les données suivantes :		Dans l’exemple ci-dessous, nous utilisons l’ensemble des éléments vu ci-dessous pour créer un diagramme en barres, pour les données suivantes :
			{\| class="wikitable"
	Type Nombre Prix moyen		!Type
	Entire home/apt 35185 106		!Nombre
	Private room 5827 56		!Prix moyen
	Shared room 464 40		\|-
			\|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.		Le code est commenté pour expliquer ce que chaque partie permet de réaliser dans le graphique.

Solo3326 le 7 mai 2021 à 07:49

2021-05-07T07:49:35Z

← Version précédente		Version du 7 mai 2021 à 07:49
Ligne 378 :		Ligne 378 :
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
	<<nowiki>table>		<<nowiki>table>
	<theader>		<theader>
	<tr>		<tr>
	<th colspan=3>Type</th>		<th colspan=3>Type</th>
	<th></th>		<th></th>
	<th colspan=3>Price</th>		<th colspan=3>Price</th>
	</tr>		</tr>
	<tr>		<tr>
	<td colspan=3>(qualitative)</td>		<td colspan=3>(qualitative)</td>
	<td></td>		<td></td>
	<td colspan=3>(quantitative)</td>		<td colspan=3>(quantitative)</td>
	</tr>		</tr>
	<tr>		<tr>
	<th>original</th>		<th>original</th>
	<th>en numérique</th>		<th>en numérique</th>
	<th>en couleur</th>		<th>en couleur</th>
	<th width = 50></th>		<th width = 50></th>
	<th>original</th>		<th>original</th>
	<th>numérique</th>		<th>numérique</th>
	<th>couleur</th>		<th>couleur</th>
	</tr>		</tr>
	</theader>		</theader>
	<tbody id = "tab">		<tbody id = "tab">
	</tbody>		</tbody>
	</table</nowiki>>		</table</nowiki>>
	</poem>		</poem>
Ligne 407 :		Ligne 407 :
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
	td {		td {
	text-align: center;		text-align: center;
	}		}
	</poem>		</poem>
Ligne 414 :		Ligne 414 :
	<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">		<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
	don = [		don = [
	{ type: "Entire home/apt", count: 35185, price: 106 },		{ type: "Entire home/apt", count: 35185, price: 106 },
	{ type: "Private room", count: 5827, price: 56 },		{ type: "Private room", count: 5827, price: 56 },
	{ type: "Shared room", count: 464, price: 40 },		{ type: "Shared room", count: 464, price: 40 },
	{ type: "Other type", count: 10, price: 200}		{ type: "Other type", count: 10, price: 200}
	];		];

Ligne 450 :		Ligne 450 :
	});		});
	</poem>		</poem>

			==Création d’un graphique==
			Dans l’exemple ci-dessous, nous utilisons l’ensemble des éléments vu ci-dessous pour créer un diagramme en barres, 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.

Solo3326 : /* Exemple */

2021-05-07T07:44:29Z

Exemple

← Version précédente		Version du 7 mai 2021 à 07:44
Ligne 374 :		Ligne 374 :

	Nos données concernent la répartition des logements en location par '''AirBnB''' sur Paris le 2 septembre 2015 (voir [http://insideairbnb.com/get-the-data.html les données ici]), par type (logement complet, chambre privée, chambre partagée). Nous avons le décompte et le prix moyen comme information.		Nos données concernent la répartition des logements en location par '''AirBnB''' sur Paris le 2 septembre 2015 (voir [http://insideairbnb.com/get-the-data.html les données ici]), par type (logement complet, chambre privée, chambre partagée). Nous avons le décompte et le prix moyen comme information.

	<u>'''HTML'''</u>		<u>'''HTML'''</u>
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			<<nowiki>table>
			<theader>
			<tr>
			<th colspan=3>Type</th>
			<th></th>
			<th colspan=3>Price</th>
			</tr>
			<tr>
			<td colspan=3>(qualitative)</td>
			<td></td>
			<td colspan=3>(quantitative)</td>
			</tr>
			<tr>
			<th>original</th>
			<th>en numérique</th>
			<th>en couleur</th>
			<th width = 50></th>
			<th>original</th>
			<th>numérique</th>
			<th>couleur</th>
			</tr>
			</theader>
			<tbody id = "tab">
			</tbody>
			</table</nowiki>>
			</poem>

			<u>'''CSS'''</u>
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			td {
			text-align: center;
			}
			</poem>

			<u>'''JS'''</u>
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			don = [
			{ type: "Entire home/apt", count: 35185, price: 106 },
			{ type: "Private room", count: 5827, price: 56 },
			{ type: "Shared room", count: 464, price: 40 },
			{ type: "Other type", count: 10, price: 200}
			];

			var type_modalites = don.map(function(d) { return d.type; });
			var prices = don.map(function(d) { return d.price; });
			var price_min = d3.min(prices);
			var price_max = d3.max(prices);

			var qt2num = d3.scaleLinear()
			.domain([price_min, price_max])
			.range([0, 100]);
			var qt2col = d3.scaleLinear()
			.domain([price_min, price_max])
			.range(["lightgreen", "steelblue"]);
			var ql2num = d3.scaleBand()
			.domain(type_modalites)
			.range([0, 100]);
			var ql2col = d3.scaleOrdinal(d3["schemeSet1"])
			.domain(type_modalites);

			var tbody = d3.select("#tab").selectAll("tr")
			.data(don)
			.enter().append("tr")
			.html(function(d) {
			var chaine = "<td>" + d.type + "</td>" +
			"<td>" + ql2num(d.type) + "</td>" +
			"<td style='background-color:" + ql2col(d.type) + "'></td><td></td>" +
			"<td>" + d.price + "</td>" +
			"<td>" + qt2num(d.price) + "</td>" +
			"<td style='background-color:" + qt2col(d.price) + "'></td>";
			return chaine;
			});
			</poem>

Solo3326 : /* Exemple */

2021-05-07T07:41:59Z

Exemple

← Version précédente		Version du 7 mai 2021 à 07:41
Ligne 374 :		Ligne 374 :

	Nos données concernent la répartition des logements en location par '''AirBnB''' sur Paris le 2 septembre 2015 (voir [http://insideairbnb.com/get-the-data.html les données ici]), par type (logement complet, chambre privée, chambre partagée). Nous avons le décompte et le prix moyen comme information.		Nos données concernent la répartition des logements en location par '''AirBnB''' sur Paris le 2 septembre 2015 (voir [http://insideairbnb.com/get-the-data.html les données ici]), par type (logement complet, chambre privée, chambre partagée). Nous avons le décompte et le prix moyen comme information.
			<u>'''HTML'''</u>

Solo3326 le 7 mai 2021 à 07:41

2021-05-07T07:41:19Z

← Version précédente		Version du 7 mai 2021 à 07:41
Ligne 320 :		Ligne 320 :
	.style("font-size", ".75em");		.style("font-size", ".75em");
	</poem>		</poem>

			==Echelles==
			Dans un graphique, nous devons faire un passage d’échelle entre les données et la zone graphique. Par exemple, si l’on doit afficher des valeurs entre -1000 et 1000 sur l’axe x, il nous faut une fonction pour les transformer dans l’intervalle [0,largeur] (où largeur représente la largeur du graphique SVG produit).

			Les fonctions dans D3 pour réaliser cela ont toutes comme nom '''d3.scaleXxx()''', où '''Xxx''' est à remplacer par le type de changement d’échelle qu’on souhaite. Il faut notre que ces fonctions renvoient elle-même une fonction de changement d’échelle. Il faut de plus déterminer deux éléments importants :

			*Le '''domaine''' (ou domain) : la plage des données d’origine
			*L’'''étendu''' (ou range) : la plage de ce qu’on doit obtenir au fina
			===Quantitatif===
			====Vers du numérique====
			L’exemple proposé ci-dessus est typiquement un problème de changement d’échelle '''linéaire'''. Il existe pour cela la fonction '''d3.scaleLinear()'''.
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			var echelle = d3.scaleLinear()
			.domain([-1000, 1000])
			.range([0, 100]);
			console.log(echelle(-1000)) // renvoie 0
			console.log(echelle(0)) // renvoie 50
			console.log(echelle(1000)) // renvoie 100
			</poem>
			====Vers des couleurs====
			L’intérêt de ces échelles réside aussi dans la possibilité de passer de valeurs numériques à des couleurs par exemple. On doit juste définir dans l’étendu les couleurs de début et de fin (et éventuellement certaines intermédiaires).
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			var echelle = d3.scaleLinear()
			.domain([-1000, 1000])
			.range(["red", "green"]);
			console.log(echelle(-1000)) // renvoie "#ff0000"
			console.log(echelle(0)) // renvoie "#804000"
			console.log(echelle(1000)) // renvoie "#008000"
			</poem>
			===Qualitatif===
			====Vers du numérique====
			Un autre changement d’échelle classique est le passage d’un ensemble de modalités à une plage de valeurs. Pour cela, on utilise la fonction '''d3.scaleBand()'''. Ici, nous définissons l’étendu par bandes ("'''A'''" sera sur la bande ainsi [0, 33.33…])
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			var echelle = d3.scaleBand()
			.domain(["A", "B", "Z"])
			.range([0, 90]);
			console.log(echelle("A")) // renvoie 0
			console.log(echelle("B")) // renvoie 30
			console.log(echelle("Z")) // renvoie 60
			console.log(echelle.bandwidth()) // renvoie 30
			</poem>
			====Vers des couleurs====
			Dans ce cas aussi, on peut affecter une couleur à chaque modalité, toujours en définissant des couleurs dans l’étendu. Il existe de plus des fonctions spécifiques pour cela dans d3, comme '''d3.scaleOrdinal()''', dans lesquelles il n’y a pas d’étendu à définir.
			<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
			var echelle = d3.scaleOrdinal(d3["schemeSet1"])
			.domain(["A", "B", "Z"]);
			console.log(echelle("A")) // renvoie "#1f77b4"
			console.log(echelle("B")) // renvoie "#ff7f0e"
			console.log(echelle("Z")) // renvoie "#2ca02c"
			</poem>
			===Exemple===
			Dans l’exemple ci-dessous, nous allons utiliser les fonctions de D3 pour faire tous les changements d’échelle vu ci-dessus. Ceux-ci sont classiques dans la création d’un graphique avec cette librairie.

			Nos données concernent la répartition des logements en location par '''AirBnB''' sur Paris le 2 septembre 2015 (voir [http://insideairbnb.com/get-the-data.html les données ici]), par type (logement complet, chambre privée, chambre partagée). Nous avons le décompte et le prix moyen comme information.

D3.js - Historique des versions

Solo3326 : /* Exemples */

Solo3326 : /* Ajout de données + propriété dynamique */

Solo3326 : /* Création d’un graphique */

Solo3326 : /* Création d’un graphique */

Solo3326 : /* Création d’un graphique */

Solo3326 : /* Création d’un graphique */

Solo3326 le 7 mai 2021 à 07:49

Solo3326 : /* Exemple */

Solo3326 : /* Exemple */

Solo3326 le 7 mai 2021 à 07:41

Solo3326 : /* Exemples */

Solo3326 : /* Ajout de données + propriété dynamique */

Solo3326 : /* Création d’un graphique */

Solo3326 : /* Création d’un graphique */

Solo3326 : /* Création d’un graphique */

Solo3326 : /* Création d’un graphique */

Solo3326 : /* Exemple */

Solo3326 : /* Exemple */