diff --git a/d3/Documentation des fonctions.html b/d3/Documentation des fonctions.html
index 5151a88..6e6f6e0 100644
--- a/d3/Documentation des fonctions.html
+++ b/d3/Documentation des fonctions.html
@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="author" content="Hugo Carton">
-<meta name="dcterms.date" content="2024-02-16">
+<meta name="dcterms.date" content="2024-02-26">
<title>Automatisation de graphiques contenant des requêtes SparQL de données RDF</title>
<style>
@@ -3006,7 +3006,7 @@ <h1 class="title">Automatisation de graphiques contenant des requêtes SparQL de
<div>
<div class="quarto-title-meta-heading">Published</div>
<div class="quarto-title-meta-contents">
- <p class="date">February 16, 2024</p>
+ <p class="date">February 26, 2024</p>
</div>
</div>
@@ -3033,7 +3033,39 @@ <h2 id="toc-title">Table of contents</h2>
<li><a href="#exemples-dappels-de-la-fonction" id="toc-exemples-dappels-de-la-fonction" class="nav-link" data-scroll-target="#exemples-dappels-de-la-fonction"><span class="header-section-number">3.1.5</span> Exemples d’appels de la fonction</a></li>
</ul></li>
</ul></li>
- <li><a href="#stacked-chart" id="toc-stacked-chart" class="nav-link" data-scroll-target="#stacked-chart"><span class="header-section-number">4</span> Stacked Chart</a></li>
+ <li><a href="#stacked-chart" id="toc-stacked-chart" class="nav-link" data-scroll-target="#stacked-chart"><span class="header-section-number">4</span> Stacked Chart</a>
+ <ul class="collapse">
+ <li><a href="#explications-1" id="toc-explications-1" class="nav-link" data-scroll-target="#explications-1"><span class="header-section-number">4.1</span> Explications</a>
+ <ul class="collapse">
+ <li><a href="#paramètre-obligatoire-1" id="toc-paramètre-obligatoire-1" class="nav-link" data-scroll-target="#paramètre-obligatoire-1"><span class="header-section-number">4.1.1</span> Paramètre obligatoire</a></li>
+ <li><a href="#exemple-de-dataset-obligatoire-1" id="toc-exemple-de-dataset-obligatoire-1" class="nav-link" data-scroll-target="#exemple-de-dataset-obligatoire-1"><span class="header-section-number">4.1.2</span> Exemple de dataset obligatoire</a></li>
+ <li><a href="#paramètres-optionnels-1" id="toc-paramètres-optionnels-1" class="nav-link" data-scroll-target="#paramètres-optionnels-1"><span class="header-section-number">4.1.3</span> Paramètres optionnels</a></li>
+ <li><a href="#exemple-de-dataset-optionnel-1" id="toc-exemple-de-dataset-optionnel-1" class="nav-link" data-scroll-target="#exemple-de-dataset-optionnel-1"><span class="header-section-number">4.1.4</span> Exemple de dataset optionnel</a></li>
+ <li><a href="#exemples-dappels-de-la-fonction-1" id="toc-exemples-dappels-de-la-fonction-1" class="nav-link" data-scroll-target="#exemples-dappels-de-la-fonction-1"><span class="header-section-number">4.1.5</span> Exemples d’appels de la fonction</a></li>
+ </ul></li>
+ </ul></li>
+ <li><a href="#pie-chart" id="toc-pie-chart" class="nav-link" data-scroll-target="#pie-chart"><span class="header-section-number">5</span> Pie chart</a>
+ <ul class="collapse">
+ <li><a href="#explications-2" id="toc-explications-2" class="nav-link" data-scroll-target="#explications-2"><span class="header-section-number">5.1</span> Explications</a>
+ <ul class="collapse">
+ <li><a href="#paramètre-obligatoire-2" id="toc-paramètre-obligatoire-2" class="nav-link" data-scroll-target="#paramètre-obligatoire-2"><span class="header-section-number">5.1.1</span> Paramètre obligatoire</a></li>
+ <li><a href="#exemple-de-dataset-obligatoire-2" id="toc-exemple-de-dataset-obligatoire-2" class="nav-link" data-scroll-target="#exemple-de-dataset-obligatoire-2"><span class="header-section-number">5.1.2</span> Exemple de dataset obligatoire</a></li>
+ <li><a href="#paramètres-optionnels-2" id="toc-paramètres-optionnels-2" class="nav-link" data-scroll-target="#paramètres-optionnels-2"><span class="header-section-number">5.1.3</span> Paramètres optionnels</a></li>
+ <li><a href="#exemple-de-dataset-optionnel-2" id="toc-exemple-de-dataset-optionnel-2" class="nav-link" data-scroll-target="#exemple-de-dataset-optionnel-2"><span class="header-section-number">5.1.4</span> Exemple de dataset optionnel</a></li>
+ <li><a href="#exemples-dappels-de-la-fonction-2" id="toc-exemples-dappels-de-la-fonction-2" class="nav-link" data-scroll-target="#exemples-dappels-de-la-fonction-2"><span class="header-section-number">5.1.5</span> Exemples d’appels de la fonction</a></li>
+ </ul></li>
+ </ul></li>
+ <li><a href="#nodelink" id="toc-nodelink" class="nav-link" data-scroll-target="#nodelink"><span class="header-section-number">6</span> Nodelink</a>
+ <ul class="collapse">
+ <li><a href="#explications-3" id="toc-explications-3" class="nav-link" data-scroll-target="#explications-3"><span class="header-section-number">6.1</span> Explications</a>
+ <ul class="collapse">
+ <li><a href="#paramètre-obligatoire-3" id="toc-paramètre-obligatoire-3" class="nav-link" data-scroll-target="#paramètre-obligatoire-3"><span class="header-section-number">6.1.1</span> Paramètre obligatoire</a></li>
+ <li><a href="#exemple-de-dataset-obligatoire-3" id="toc-exemple-de-dataset-obligatoire-3" class="nav-link" data-scroll-target="#exemple-de-dataset-obligatoire-3"><span class="header-section-number">6.1.2</span> Exemple de dataset obligatoire</a></li>
+ <li><a href="#paramètres-optionnels-3" id="toc-paramètres-optionnels-3" class="nav-link" data-scroll-target="#paramètres-optionnels-3"><span class="header-section-number">6.1.3</span> Paramètres optionnels</a></li>
+ <li><a href="#exemple-de-dataset-optionnel-3" id="toc-exemple-de-dataset-optionnel-3" class="nav-link" data-scroll-target="#exemple-de-dataset-optionnel-3"><span class="header-section-number">6.1.4</span> Exemple de dataset optionnel</a></li>
+ <li><a href="#exemples-dappels-de-la-fonction-3" id="toc-exemples-dappels-de-la-fonction-3" class="nav-link" data-scroll-target="#exemples-dappels-de-la-fonction-3"><span class="header-section-number">6.1.5</span> Exemples d’appels de la fonction</a></li>
+ </ul></li>
+ </ul></li>
</ul>
</nav>
</div>
@@ -3060,12 +3092,12 @@ <h1 data-number="2"><span class="header-section-number">2</span> Sommaire</h1>
<h1 data-number="3"><span class="header-section-number">3</span> Bar chart</h1>
<section id="explications" class="level2" data-number="3.1">
<h2 data-number="3.1" class="anchored" data-anchor-id="explications"><span class="header-section-number">3.1</span> Explications</h2>
-<p>La fonction bar chart appelle 1 paramètre obligatoire et 4 paramètres optionnels.</p>
+<p>La fonction barchart_creator appelle un paramètre obligatoire et 4 paramètres optionnels.</p>
<section id="paramètre-obligatoire" class="level3" data-number="3.1.1">
<h3 data-number="3.1.1" class="anchored" data-anchor-id="paramètre-obligatoire"><span class="header-section-number">3.1.1</span> Paramètre obligatoire</h3>
-<p>Le paramètre obligatoire est le dataset obtenu après la requête SparQL. Ce dataset doit être une liste de dictionnaire. Chaque dictionnaire est défini en premier lieu par sa catégorie, puis par des valeurs et potentiellement des couleurs.</p>
-<p>Il doit donc posséder une variable “category” qui contient simplement le nom de la catégorie, une variable “values qui est en réalité un sous dataset, donc une autre liste de dictionnaires. Ce sous-dataset doit contenir 2 éléments : une variable”label”, et une variable “value” qui correspond à la valeur de ce label et de cette catégorie.</p>
-<p>Enfin, la variable “fill” qui pourra être remplacée par l’un des paramètres optionnels, sert à déterminer la couleur de chaque catégorie. Elle peut contenir un code couleur ou un nom de couleur reconnu dans les SVG.</p>
+<p>Le paramètre obligatoire est le dataset obtenu après la requête SparQL. Ce dataset doit être une liste de dictionnaires. Chaque dictionnaire est défini en premier lieu par sa catégorie, puis par des valeurs et potentiellement des couleurs.</p>
+<p>Il doit donc posséder une variable “category” qui contient simplement le nom de la catégorie, une variable “values” qui est en réalité un sous dataset, donc une autre liste de dictionnaires. Ce sous-dataset doit contenir 2 éléments : une variable “label”, et une variable “value” qui correspond à la valeur de ce label et de cette catégorie.</p>
+<p>Enfin, la variable “fill”, qui pourra être remplacée par l’un des paramètres optionnels, sert à déterminer la couleur de chaque catégorie. Elle peut contenir un code couleur ou un nom de couleur reconnu dans les SVG.</p>
</section>
<section id="exemple-de-dataset-obligatoire" class="level3" data-number="3.1.2">
<h3 data-number="3.1.2" class="anchored" data-anchor-id="exemple-de-dataset-obligatoire"><span class="header-section-number">3.1.2</span> Exemple de dataset obligatoire</h3>
@@ -3090,12 +3122,144 @@ <h3 data-number="3.1.4" class="anchored" data-anchor-id="exemple-de-dataset-opti
</section>
<section id="exemples-dappels-de-la-fonction" class="level3" data-number="3.1.5">
<h3 data-number="3.1.5" class="anchored" data-anchor-id="exemples-dappels-de-la-fonction"><span class="header-section-number">3.1.5</span> Exemples d’appels de la fonction</h3>
-<p>barchart_creator(dataset_barchart) barchart_creator(dataset_barchart, couleurs, false, true, longueur = 300) barchart_creator(dataset_barchart, undefined, undefined, true)</p>
+<p>barchart_creator(dataset_barchart)</p>
+<p>barchart_creator(dataset_barchart, couleurs, false, true, 300)</p>
+<p>barchart_creator(dataset_barchart, undefined, undefined, true)</p>
</section>
</section>
</section>
<section id="stacked-chart" class="level1" data-number="4">
<h1 data-number="4"><span class="header-section-number">4</span> Stacked Chart</h1>
+<section id="explications-1" class="level2" data-number="4.1">
+<h2 data-number="4.1" class="anchored" data-anchor-id="explications-1"><span class="header-section-number">4.1</span> Explications</h2>
+<p>La fonction stackedchart_creator appelle un paramètre obligatoire et 3 paramètres optionnels.</p>
+<section id="paramètre-obligatoire-1" class="level3" data-number="4.1.1">
+<h3 data-number="4.1.1" class="anchored" data-anchor-id="paramètre-obligatoire-1"><span class="header-section-number">4.1.1</span> Paramètre obligatoire</h3>
+<p>Le paramètre obligatoire est le dataset obtenu après la requête SparQL. Ce dataset doit être une liste de dictionnaires. Chaque dictionnaire est défini en premier lieu par sa catégorie, puis par des valeurs et potentiellement des couleurs. C’est donc le même dataset que pour le barchart.</p>
+<p>Il doit donc posséder une variable “category” qui contient simplement le nom de la catégorie, une variable “values” qui est en réalité un sous dataset, donc une autre liste de dictionnaires. Ce sous-dataset doit contenir 2 éléments : une variable “label”, et une variable “value” qui correspond à la valeur de ce label et de cette catégorie.</p>
+<p>Enfin, la variable “fill”, qui pourra être remplacée par l’un des paramètres optionnels, sert à déterminer la couleur de chaque catégorie. Elle peut contenir un code couleur ou un nom de couleur reconnu dans les SVG.</p>
+</section>
+<section id="exemple-de-dataset-obligatoire-1" class="level3" data-number="4.1.2">
+<h3 data-number="4.1.2" class="anchored" data-anchor-id="exemple-de-dataset-obligatoire-1"><span class="header-section-number">4.1.2</span> Exemple de dataset obligatoire</h3>
+<p>dataset_stackedchart = [</p>
+<p>{<strong>category</strong> :“Clouds”, <strong>values</strong> : [{value : 5, label : “Wolf”}, {value : 8, label : “Eagle”}, {value : 12, label : “Deer”}, {value : 7, label : “Lion”}, {value : 9, label : “Dragon”}], <strong>fill</strong> : “black”},</p>
+<p>{<strong>category</strong> :“Flower”, <strong>values</strong> : [{value : 10, label : “Wolf”}, {value : 20, label : “Eagle”}, {value : 15, label : “Deer”}, {value : 25, label : “Lion”}, {value : 30, label : “Dragon”}], <strong>fill</strong> : “crimson”},</p>
+<p>{<strong>category</strong> :“Snow”, <strong>values</strong> : [{value : 6, label : “Wolf”}, {value : 8, label : “Eagle”}, {value : 2, label : “Deer”}, {value : 4, label : “Lion”}, {value : 5, label : “Dragon”}], <strong>fill</strong> : “silver”},</p>
+<p>{<strong>category</strong> :“Wind”, <strong>values</strong> : [{value : 20, label : “Wolf”}, {value : 30, label : “Eagle”}, {value : 10, label : “Deer”}, {value : 12, label : “Lion”}, {value : 18, label : “Dragon”}], <strong>fill</strong> : “gold”},</p>
+<p>{<strong>category</strong> :“Moon”, <strong>values</strong> : [{value : 14, label : “Wolf”}, {value : 16, label : “Eagle”}, {value : 24, label : “Deer”}, {value : 8, label : “Lion”}, {value : 17, label : “Dragon”}], <strong>fill</strong> : “lightblue”}</p>
+<p>]</p>
+</section>
+<section id="paramètres-optionnels-1" class="level3" data-number="4.1.3">
+<h3 data-number="4.1.3" class="anchored" data-anchor-id="paramètres-optionnels-1"><span class="header-section-number">4.1.3</span> Paramètres optionnels</h3>
+<p>Les paramètres optionnels sont également proches de ceux du barchart. La seule différence est l’absence de la possibilité d’utiliser une échelle logistique.</p>
+<p>Le premier paramètre optionnel est une liste de couleurs. Si ce paramètre n’est pas renseigné, la variable fill sera utilisée, mais s’il est renseigné, les couleurs de fill seront remplacées par celles de colors.</p>
+<p>Le deuxième paramètre optionnel est vertical bar. C’est un boolean, qui détermine si les barres seront verticales ou horizontales, et donc le sens du graphique. Si non renseigné, sa valeur de base est true.</p>
+<p>Enfin, le dernier paramètre est la longueur du SVG (qui sera toujours un carré). Cela influencera simplement la taille du graphique.</p>
+</section>
+<section id="exemple-de-dataset-optionnel-1" class="level3" data-number="4.1.4">
+<h3 data-number="4.1.4" class="anchored" data-anchor-id="exemple-de-dataset-optionnel-1"><span class="header-section-number">4.1.4</span> Exemple de dataset optionnel</h3>
+<p>couleurs = [“black”, “crimson”, “silver”, “gold”, “steelblue”]</p>
+</section>
+<section id="exemples-dappels-de-la-fonction-1" class="level3" data-number="4.1.5">
+<h3 data-number="4.1.5" class="anchored" data-anchor-id="exemples-dappels-de-la-fonction-1"><span class="header-section-number">4.1.5</span> Exemples d’appels de la fonction</h3>
+<p>stackedchart_creator(dataset_stackedchart)</p>
+<p>stackedchart_creator(dataset_stackedchart, couleurs, false, 300)</p>
+<p>stackedchart_creator(dataset_stackedchart, undefined, undefined, 300)</p>
+</section>
+</section>
+</section>
+<section id="pie-chart" class="level1" data-number="5">
+<h1 data-number="5"><span class="header-section-number">5</span> Pie chart</h1>
+<section id="explications-2" class="level2" data-number="5.1">
+<h2 data-number="5.1" class="anchored" data-anchor-id="explications-2"><span class="header-section-number">5.1</span> Explications</h2>
+<p>La fonction piechart_creator appelle un paramètre obligatoire et 2 paramètres optionnels.</p>
+<section id="paramètre-obligatoire-2" class="level3" data-number="5.1.1">
+<h3 data-number="5.1.1" class="anchored" data-anchor-id="paramètre-obligatoire-2"><span class="header-section-number">5.1.1</span> Paramètre obligatoire</h3>
+<p>Le paramètre obligatoire est le dataset obtenu après une requête SparQL. Ce dataset doit être une liste de dictionnaires. Chaque dictionnaire est défini en premier lieu par sa catégorie, puis par des valeurs et potentiellement des couleurs.</p>
+<p>Il doit donc posséder une variable “label” qui contient simplement le nom du label, une variable “value” qui donne la valeur de la catégorie, et enfin une variable “fill” qui pourra être remplacée par l’un des paramètres optionnels, servant à déterminer la couleur de chaque catégorie. Elle peut contenir un code couleur ou un nom de couleur reconnu dans les SVG.</p>
+</section>
+<section id="exemple-de-dataset-obligatoire-2" class="level3" data-number="5.1.2">
+<h3 data-number="5.1.2" class="anchored" data-anchor-id="exemple-de-dataset-obligatoire-2"><span class="header-section-number">5.1.2</span> Exemple de dataset obligatoire</h3>
+<p>const dataset_piechart = [</p>
+<p>{<strong>label</strong> : “Clouds”, <strong>value</strong> : 12, <strong>fill</strong> : “black”},</p>
+<p>{<strong>label</strong> : “Flower”, <strong>value</strong> : 19, <strong>fill</strong> : “crimson”},</p>
+<p>{<strong>label</strong> : “Snow”, <strong>value</strong> : 10, <strong>fill</strong> : “gray”},</p>
+<p>{<strong>label</strong> : “Wind”, <strong>value</strong> : 20, <strong>fill</strong> : “gold”},</p>
+<p>{<strong>label</strong> : “Moon”, <strong>value</strong> : 8, <strong>fill</strong> : “steelblue”}</p>
+<p>]</p>
+</section>
+<section id="paramètres-optionnels-2" class="level3" data-number="5.1.3">
+<h3 data-number="5.1.3" class="anchored" data-anchor-id="paramètres-optionnels-2"><span class="header-section-number">5.1.3</span> Paramètres optionnels</h3>
+<p>Le premier paramètre optionnel est une liste de couleurs. Si ce paramètre n’est pas renseigné, la variable fill sera utilisée, mais s’il est renseigné, les couleurs de fill seront remplacées par celles de colors.</p>
+<p>Le deuxième paramètre optionnel est la longueur du SVG (qui sera toujours un carré). Cela influencera simplement la taille du graphique.</p>
+</section>
+<section id="exemple-de-dataset-optionnel-2" class="level3" data-number="5.1.4">
+<h3 data-number="5.1.4" class="anchored" data-anchor-id="exemple-de-dataset-optionnel-2"><span class="header-section-number">5.1.4</span> Exemple de dataset optionnel</h3>
+<p>couleurs = [“black”, “crimson”, “silver”, “gold”, “steelblue”]</p>
+</section>
+<section id="exemples-dappels-de-la-fonction-2" class="level3" data-number="5.1.5">
+<h3 data-number="5.1.5" class="anchored" data-anchor-id="exemples-dappels-de-la-fonction-2"><span class="header-section-number">5.1.5</span> Exemples d’appels de la fonction</h3>
+<p>piechart_creator(dataset_piechart)</p>
+<p>piechart_creator(dataset_piechart, couleurs, 300)</p>
+<p>piechart_creator(dataset_piechart, undefined, 300)</p>
+</section>
+</section>
+</section>
+<section id="nodelink" class="level1" data-number="6">
+<h1 data-number="6"><span class="header-section-number">6</span> Nodelink</h1>
+<section id="explications-3" class="level2" data-number="6.1">
+<h2 data-number="6.1" class="anchored" data-anchor-id="explications-3"><span class="header-section-number">6.1</span> Explications</h2>
+<p>La fonction nodelink_creator appelle un paramètre obligatoire et 3 paramètres optionnels.</p>
+<section id="paramètre-obligatoire-3" class="level3" data-number="6.1.1">
+<h3 data-number="6.1.1" class="anchored" data-anchor-id="paramètre-obligatoire-3"><span class="header-section-number">6.1.1</span> Paramètre obligatoire</h3>
+<p>Le paramètre obligatoire est le dataset obtenu après une requête SparQL. Ce dataset doit être un dictionnaire contenant des listes de sous-dictionnaires.</p>
+<p>Il doit donc posséder une variable “nodes” qui est une liste de dictionnaires, contenant une variable “id” et une variable “nom” pour chaque noeud, aini qu’une variable “links” qui contient une variable “source” et une variable “target”, ce qui défini donc les liens entre chaque noeud.</p>
+</section>
+<section id="exemple-de-dataset-obligatoire-3" class="level3" data-number="6.1.2">
+<h3 data-number="6.1.2" class="anchored" data-anchor-id="exemple-de-dataset-obligatoire-3"><span class="header-section-number">6.1.2</span> Exemple de dataset obligatoire</h3>
+<p>const dataset_nodelink = {</p>
+<p><strong>nodes</strong> : [</p>
+<pre><code>{id: 1, name: "A"},
+{id: 2, name: "B"},
+{id: 3, name: "C"},
+{id: 4, name: "D"},
+{id: 5, name: "E"},
+{id: 6, name: "F"},
+{id: 7, name: "G"},
+{id: 8, name: "H"},
+{id: 9, name: "I"},
+{id: 10, name: "J"}</code></pre>
+<p>],</p>
+<p><strong>links</strong> : [</p>
+<pre><code>{source: 1, target: 2},
+{source: 1, target: 5},
+{source: 1, target: 6},
+{source: 2, target: 3},
+{source: 2, target: 7},
+{source: 3, target: 4},
+{source: 8, target: 3},
+{source: 4, target: 5},
+{source: 4, target: 9},
+{source: 5, target: 10}</code></pre>
+<p>] }</p>
+</section>
+<section id="paramètres-optionnels-3" class="level3" data-number="6.1.3">
+<h3 data-number="6.1.3" class="anchored" data-anchor-id="paramètres-optionnels-3"><span class="header-section-number">6.1.3</span> Paramètres optionnels</h3>
+<p>Le premier paramètre optionnel est une liste de 2 couleurs, une pour les noeuds et l’autre pour les liens. Si ce paramètre n’est pas renseigné ou possède un nombre différent de valeurs, les couleurs seront automatiquement rouge et bleu.</p>
+<p>Le deuxième paramètre optionnel est le coefficient de la force qui repousse les différents noeuds. Cela définit la répulsion entre les noeuds.</p>
+<p>Le dernier paramètre optionnel est la longueur du SVG (qui sera toujours un carré). Cela influencera simplement la taille du graphique.</p>
+</section>
+<section id="exemple-de-dataset-optionnel-3" class="level3" data-number="6.1.4">
+<h3 data-number="6.1.4" class="anchored" data-anchor-id="exemple-de-dataset-optionnel-3"><span class="header-section-number">6.1.4</span> Exemple de dataset optionnel</h3>
+<p>couleurs = [“black”, “gold”]</p>
+</section>
+<section id="exemples-dappels-de-la-fonction-3" class="level3" data-number="6.1.5">
+<h3 data-number="6.1.5" class="anchored" data-anchor-id="exemples-dappels-de-la-fonction-3"><span class="header-section-number">6.1.5</span> Exemples d’appels de la fonction</h3>
+<p>nodelink_creator(dataset_nodelink)</p>
+<p>nodelink_creator(dataset_nodelink, couleurs, -200, 300)</p>
+<p>nodelink_creator(dataset_nodelink, undefined, undefined, 300)</p>
+</section>
+</section>
</section>
</main>
diff --git a/d3/Documentation des fonctions.md b/d3/Documentation des fonctions.md
index dd4a8e8..24b3198 100644
--- a/d3/Documentation des fonctions.md
+++ b/d3/Documentation des fonctions.md
@@ -46,16 +46,16 @@ Je vais expliquer les fonctions réalisées dans l'ordre suivant :
## Explications
-La fonction bar chart appelle 1 paramètre obligatoire et 4 paramètres optionnels.
+La fonction barchart_creator appelle un paramètre obligatoire et 4 paramètres optionnels.
### Paramètre obligatoire
-Le paramètre obligatoire est le dataset obtenu après la requête SparQL. Ce dataset doit être une liste de dictionnaire. Chaque dictionnaire est défini en premier lieu par sa catégorie, puis par des valeurs et potentiellement des couleurs.
+Le paramètre obligatoire est le dataset obtenu après la requête SparQL. Ce dataset doit être une liste de dictionnaires. Chaque dictionnaire est défini en premier lieu par sa catégorie, puis par des valeurs et potentiellement des couleurs.
-Il doit donc posséder une variable "category" qui contient simplement le nom de la catégorie, une variable "values qui est en réalité un sous dataset, donc une autre liste de dictionnaires.
+Il doit donc posséder une variable "category" qui contient simplement le nom de la catégorie, une variable "values" qui est en réalité un sous dataset, donc une autre liste de dictionnaires.
Ce sous-dataset doit contenir 2 éléments : une variable "label", et une variable "value" qui correspond à la valeur de ce label et de cette catégorie.
-Enfin, la variable "fill" qui pourra être remplacée par l'un des paramètres optionnels, sert à déterminer la couleur de chaque catégorie. Elle peut contenir un code couleur ou un nom de couleur reconnu dans les SVG.
+Enfin, la variable "fill", qui pourra être remplacée par l'un des paramètres optionnels, sert à déterminer la couleur de chaque catégorie. Elle peut contenir un code couleur ou un nom de couleur reconnu dans les SVG.
### Exemple de dataset obligatoire
@@ -90,17 +90,178 @@ couleurs = ["black", "crimson", "silver", "gold", "steelblue"]
### Exemples d'appels de la fonction
barchart_creator(dataset_barchart)
-barchart_creator(dataset_barchart, couleurs, false, true, longueur = 300)
+
+barchart_creator(dataset_barchart, couleurs, false, true, 300)
+
barchart_creator(dataset_barchart, undefined, undefined, true)
# Stacked Chart
+## Explications
+
+La fonction stackedchart_creator appelle un paramètre obligatoire et 3 paramètres optionnels.
+
+### Paramètre obligatoire
+
+Le paramètre obligatoire est le dataset obtenu après la requête SparQL. Ce dataset doit être une liste de dictionnaires. Chaque dictionnaire est défini en premier lieu par sa catégorie, puis par des valeurs et potentiellement des couleurs. C'est donc le même dataset que pour le barchart.
+
+Il doit donc posséder une variable "category" qui contient simplement le nom de la catégorie, une variable "values" qui est en réalité un sous dataset, donc une autre liste de dictionnaires.
+Ce sous-dataset doit contenir 2 éléments : une variable "label", et une variable "value" qui correspond à la valeur de ce label et de cette catégorie.
+
+Enfin, la variable "fill", qui pourra être remplacée par l'un des paramètres optionnels, sert à déterminer la couleur de chaque catégorie. Elle peut contenir un code couleur ou un nom de couleur reconnu dans les SVG.
+
+### Exemple de dataset obligatoire
+
+dataset_stackedchart = [
+
+{**category** :"Clouds", **values** : [{value : 5, label : "Wolf"}, {value : 8, label : "Eagle"}, {value : 12, label : "Deer"}, {value : 7, label : "Lion"}, {value : 9, label : "Dragon"}], **fill** : "black"},
+
+{**category** :"Flower", **values** : [{value : 10, label : "Wolf"}, {value : 20, label : "Eagle"}, {value : 15, label : "Deer"}, {value : 25, label : "Lion"}, {value : 30, label : "Dragon"}], **fill** : "crimson"},
+
+{**category** :"Snow", **values** : [{value : 6, label : "Wolf"}, {value : 8, label : "Eagle"}, {value : 2, label : "Deer"}, {value : 4, label : "Lion"}, {value : 5, label : "Dragon"}], **fill** : "silver"},
+
+{**category** :"Wind", **values** : [{value : 20, label : "Wolf"}, {value : 30, label : "Eagle"}, {value : 10, label : "Deer"}, {value : 12, label : "Lion"}, {value : 18, label : "Dragon"}], **fill** : "gold"},
+
+{**category** :"Moon", **values** : [{value : 14, label : "Wolf"}, {value : 16, label : "Eagle"}, {value : 24, label : "Deer"}, {value : 8, label : "Lion"}, {value : 17, label : "Dragon"}], **fill** : "lightblue"}
+
+]
+
+### Paramètres optionnels
+
+Les paramètres optionnels sont également proches de ceux du barchart. La seule différence est l'absence de la possibilité d'utiliser une échelle logistique.
+
+Le premier paramètre optionnel est une liste de couleurs. Si ce paramètre n'est pas renseigné, la variable fill sera utilisée, mais s'il est renseigné, les couleurs de fill seront remplacées par celles de colors.
+
+Le deuxième paramètre optionnel est vertical bar. C'est un boolean, qui détermine si les barres seront verticales ou horizontales, et donc le sens du graphique. Si non renseigné, sa valeur de base est true.
+
+Enfin, le dernier paramètre est la longueur du SVG (qui sera toujours un carré). Cela influencera simplement la taille du graphique.
+
+### Exemple de dataset optionnel
+
+couleurs = ["black", "crimson", "silver", "gold", "steelblue"]
+
+### Exemples d'appels de la fonction
+
+stackedchart_creator(dataset_stackedchart)
+
+stackedchart_creator(dataset_stackedchart, couleurs, false, 300)
+
+stackedchart_creator(dataset_stackedchart, undefined, undefined, 300)
+
+
+# Pie chart
+
+## Explications
+
+La fonction piechart_creator appelle un paramètre obligatoire et 2 paramètres optionnels.
+
+### Paramètre obligatoire
+
+Le paramètre obligatoire est le dataset obtenu après une requête SparQL. Ce dataset doit être une liste de dictionnaires. Chaque dictionnaire est défini en premier lieu par sa catégorie, puis par des valeurs et potentiellement des couleurs.
+
+Il doit donc posséder une variable "label" qui contient simplement le nom du label, une variable "value" qui donne la valeur de la catégorie, et enfin une variable "fill" qui pourra être remplacée par l'un des paramètres optionnels, servant à déterminer la couleur de chaque catégorie. Elle peut contenir un code couleur ou un nom de couleur reconnu dans les SVG.
+
+### Exemple de dataset obligatoire
+
+const dataset_piechart = [
+
+{**label** : "Clouds", **value** : 12, **fill** : "black"},
+
+{**label** : "Flower", **value** : 19, **fill** : "crimson"},
+
+{**label** : "Snow", **value** : 10, **fill** : "gray"},
+
+{**label** : "Wind", **value** : 20, **fill** : "gold"},
+
+{**label** : "Moon", **value** : 8, **fill** : "steelblue"}
+
+]
+
+### Paramètres optionnels
+
+Le premier paramètre optionnel est une liste de couleurs. Si ce paramètre n'est pas renseigné, la variable fill sera utilisée, mais s'il est renseigné, les couleurs de fill seront remplacées par celles de colors.
+
+Le deuxième paramètre optionnel est la longueur du SVG (qui sera toujours un carré). Cela influencera simplement la taille du graphique.
+
+### Exemple de dataset optionnel
+
+couleurs = ["black", "crimson", "silver", "gold", "steelblue"]
+
+### Exemples d'appels de la fonction
+piechart_creator(dataset_piechart)
+piechart_creator(dataset_piechart, couleurs, 300)
+
+piechart_creator(dataset_piechart, undefined, 300)
+
+
+# Nodelink
+
+## Explications
+
+La fonction nodelink_creator appelle un paramètre obligatoire et 3 paramètres optionnels.
+
+### Paramètre obligatoire
+
+Le paramètre obligatoire est le dataset obtenu après une requête SparQL. Ce dataset doit être un dictionnaire contenant des listes de sous-dictionnaires.
+
+Il doit donc posséder une variable "nodes" qui est une liste de dictionnaires, contenant une variable "id" et une variable "nom" pour chaque noeud, aini qu'une variable "links" qui contient une variable "source" et une variable "target", ce qui défini donc les liens entre chaque noeud.
+
+### Exemple de dataset obligatoire
+
+const dataset_nodelink = {
+
+ **nodes** : [
+
+ {id: 1, name: "A"},
+ {id: 2, name: "B"},
+ {id: 3, name: "C"},
+ {id: 4, name: "D"},
+ {id: 5, name: "E"},
+ {id: 6, name: "F"},
+ {id: 7, name: "G"},
+ {id: 8, name: "H"},
+ {id: 9, name: "I"},
+ {id: 10, name: "J"}
+ ],
+
+ **links** : [
+
+ {source: 1, target: 2},
+ {source: 1, target: 5},
+ {source: 1, target: 6},
+ {source: 2, target: 3},
+ {source: 2, target: 7},
+ {source: 3, target: 4},
+ {source: 8, target: 3},
+ {source: 4, target: 5},
+ {source: 4, target: 9},
+ {source: 5, target: 10}
+
+ ]
+}
+
+### Paramètres optionnels
+
+Le premier paramètre optionnel est une liste de 2 couleurs, une pour les noeuds et l'autre pour les liens. Si ce paramètre n'est pas renseigné ou possède un nombre différent de valeurs, les couleurs seront automatiquement rouge et bleu.
+
+Le deuxième paramètre optionnel est le coefficient de la force qui repousse les différents noeuds. Cela définit la répulsion entre les noeuds.
+
+Le dernier paramètre optionnel est la longueur du SVG (qui sera toujours un carré). Cela influencera simplement la taille du graphique.
+
+### Exemple de dataset optionnel
+
+couleurs = ["black", "gold"]
+
+### Exemples d'appels de la fonction
+nodelink_creator(dataset_nodelink)
+nodelink_creator(dataset_nodelink, couleurs, -200, 300)
+nodelink_creator(dataset_nodelink, undefined, undefined, 300)
diff --git a/d3/d3_barchart_test.js b/d3/d3_barchart_test.js
index c5dbceb..0de9df9 100644
--- a/d3/d3_barchart_test.js
+++ b/d3/d3_barchart_test.js
@@ -1,6 +1,6 @@
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"
-const databis = [
+const dataset_barchart = [
{category :"Clouds", values : [{value : 5, label : "Wolf"}, {value : 8, label : "Eagle"}, {value : 12, label : "Deer"}, {value : 7, label : "Lion"}, {value : 9, label : "Dragon"}], fill : "black"},
{category :"Flower", values : [{value : 10, label : "Wolf"}, {value : 20, label : "Eagle"}, {value : 15, label : "Deer"}, {value : 25, label : "Lion"}, {value : 30, label : "Dragon"}], fill : "crimson"},
{category :"Snow", values : [{value : 6, label : "Wolf"}, {value : 8, label : "Eagle"}, {value : 2, label : "Deer"}, {value : 4, label : "Lion"}, {value : 5, label : "Dragon"}], fill : "silver"},
@@ -11,7 +11,7 @@ const databis = [
const colors = ["black", "crimson", "silver", "gold", "steelblue"]
-const svg_creator = (donnees, couleurs = [0], vertical_bar = true, longueur = 400) => {
+const barchart_creator = (donnees, couleurs = [0], vertical_bar = true, longueur = 400) => {
// Initialisation
@@ -182,4 +182,4 @@ const svg_creator = (donnees, couleurs = [0], vertical_bar = true, longueur = 40
}
-svg_creator(databis, colors, false)
\ No newline at end of file
+barchart_creator(dataset_barchart, colors, false)
\ No newline at end of file
diff --git a/d3/d3_nodelink3.js b/d3/d3_nodelink3.js
index 140e88f..74eac17 100644
--- a/d3/d3_nodelink3.js
+++ b/d3/d3_nodelink3.js
@@ -1,29 +1,29 @@
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"
-const dataset = {
- "nodes": [
- {"id": 1, "name": "A"},
- {"id": 2, "name": "B"},
- {"id": 3, "name": "C"},
- {"id": 4, "name": "D"},
- {"id": 5, "name": "E"},
- {"id": 6, "name": "F"},
- {"id": 7, "name": "G"},
- {"id": 8, "name": "H"},
- {"id": 9, "name": "I"},
- {"id": 10, "name": "J"}
+const dataset_nodelink = {
+ nodes: [
+ {id: 1, name: "A"},
+ {id: 2, name: "B"},
+ {id: 3, name: "C"},
+ {id: 4, name: "D"},
+ {id: 5, name: "E"},
+ {id: 6, name: "F"},
+ {id: 7, name: "G"},
+ {id: 8, name: "H"},
+ {id: 9, name: "I"},
+ {id: 10, name: "J"}
],
- "links": [
- {"source": 1, "target": 2},
- {"source": 1, "target": 5},
- {"source": 1, "target": 6},
- {"source": 2, "target": 3},
- {"source": 2,"target": 7},
- {"source": 3, "target": 4},
- {"source": 8, "target": 3},
- {"source": 4, "target": 5},
- {"source": 4, "target": 9},
- {"source": 5, "target": 10}
+ links: [
+ {source: 1, target: 2},
+ {source: 1, target: 5},
+ {source: 1, target: 6},
+ {source: 2, target: 3},
+ {source: 2,target: 7},
+ {source: 3, target: 4},
+ {source: 8, target: 3},
+ {source: 4, target: 5},
+ {source: 4, target: 9},
+ {source: 5, target: 10}
]
}
@@ -39,9 +39,9 @@ let recup_data = async() => {
let couleurs = ["gold", "green"]
-async function autonode(data, colors = [], strength = -400, width = 380, height = 380) {
+async function nodelink_creator(data, colors = [], strength = -400, longueur = 380) {
- const donnees = await data()
+ const donnees = data
const margin = {top: 5, right: 5, bottom: 5, left: 5}
let coloration
@@ -52,8 +52,8 @@ async function autonode(data, colors = [], strength = -400, width = 380, height
}
const svg = d3.select("#nodelink_auto")
- .attr("width", width + margin.left + margin.right)
- .attr("height", height + margin.top + margin.bottom)
+ .attr("width", longueur + margin.left + margin.right)
+ .attr("height", longueur + margin.top + margin.bottom)
.append("g")
const link = svg.selectAll("line")
@@ -85,14 +85,14 @@ async function autonode(data, colors = [], strength = -400, width = 380, height
.links(donnees.links)
)
.force("charge", d3.forceManyBody().strength(strength))
- .force("center", d3.forceCenter(width / 2, height / 2))
+ .force("center", d3.forceCenter(longueur / 2, longueur / 2))
.on("end", ticked)
}
-autonode(recup_data, couleurs, -200)
+nodelink_creator(dataset_nodelink, couleurs, -400)
diff --git a/d3/d3_piechart2.js b/d3/d3_piechart2.js
index c448190..88438e8 100644
--- a/d3/d3_piechart2.js
+++ b/d3/d3_piechart2.js
@@ -1,6 +1,6 @@
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"
-const databis = [
+const dataset_piechart = [
{label :"Clouds", value : 12, fill : "black"},
{label :"Flower", value : 19, fill : "crimson"},
{label :"Snow", value : 10, fill : "gray"},
@@ -8,7 +8,7 @@ const databis = [
{label :"Moon", value : 8, fill : "steelblue"}
]
-const svg_creator = (donnees, couleurs = [0], longueur = 350) => {
+const piechart_creator = (donnees, couleurs = [0], longueur = 350) => {
let pie = []
let data_pie = []
@@ -91,4 +91,4 @@ const svg_creator = (donnees, couleurs = [0], longueur = 350) => {
}
-svg_creator(databis, ["green", "steelblue", "gold", "gray", "crimson"])
\ No newline at end of file
+piechart_creator(dataset_piechart, ["green", "steelblue", "gold", "gray", "crimson"])
\ No newline at end of file
diff --git a/d3/d3_stackedchart.js b/d3/d3_stackedchart.js
index 59f8ce5..8dcab71 100644
--- a/d3/d3_stackedchart.js
+++ b/d3/d3_stackedchart.js
@@ -1,6 +1,6 @@
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"
-const databis = [
+const dataset_stackedchart = [
{category :"Clouds", values : [{value : 5, label : "Wolf"}, {value : 8, label : "Eagle"}, {value : 12, label : "Deer"}, {value : 7, label : "Lion"}, {value : 9, label : "Dragon"}], fill : "black"},
{category :"Flower", values : [{value : 10, label : "Wolf"}, {value : 20, label : "Eagle"}, {value : 15, label : "Deer"}, {value : 25, label : "Lion"}, {value : 30, label : "Dragon"}], fill : "crimson"},
{category :"Snow", values : [{value : 6, label : "Wolf"}, {value : 8, label : "Eagle"}, {value : 2, label : "Deer"}, {value : 4, label : "Lion"}, {value : 5, label : "Dragon"}], fill : "silver"},
@@ -11,7 +11,7 @@ const databis = [
const colors = ["black", "crimson", "silver", "gold", "steelblue"]
-const svg_creator = (donnees, couleurs = [0], vertical_bar = true, longueur = 400) => {
+const stackedchart_creator = (donnees, couleurs = [0], vertical_bar = true, longueur = 400) => {
// Initialisation
@@ -182,4 +182,4 @@ const svg_creator = (donnees, couleurs = [0], vertical_bar = true, longueur = 40
}
-svg_creator(databis, colors, false)
\ No newline at end of file
+stackedchart_creator(dataset_stackedchart, colors, false)
\ No newline at end of file