Skip to content

Commit

Permalink
Automatisation en 1 fichier : vérification à réaliser #43
Browse files Browse the repository at this point in the history
  • Loading branch information
@HugoCarton
HugoCarton committed Mar 4, 2024
1 parent cb35ce2 commit e705578
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 47 deletions.
91 changes: 48 additions & 43 deletions d3/d3_visualisation_finale.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"

const couleurs = ["black", "crimson", "silver", "gold", "steelblue"]
const couleurs = ["green", "crimson", "silver", "gold", "steelblue"]

const barchart_creator = (config_barchart) => {

Expand All @@ -11,7 +11,6 @@ const barchart_creator = (config_barchart) => {
let vertical_bar = config_barchart.options.vertical_bar

let colors = config_barchart.options.hasOwnProperty("colors") ? config_barchart.options.colors : couleurs
console.log(colors)

const margin = {left : 5, top : 5, bottom : 5, right : 5}
const svg = d3.select("#d3_visualisation").attr("width", longueur + margin.left + margin.right).attr("height", longueur + margin.top + margin.bottom)
Expand Down Expand Up @@ -40,7 +39,6 @@ const barchart_creator = (config_barchart) => {

let exploitable = []
let keys = []
let color = []

// Transformation des données

Expand All @@ -56,18 +54,12 @@ const barchart_creator = (config_barchart) => {
exploitable.push(object)
keys.push(object.Category)

if (colors[0] === 0) {
let couleurs = {"color" : d.fill}
color.push(couleurs.color)
} else {
color = colors
}
})
} catch (error) {
console.error("Le dataset n'est pas au bon format : ", error)
}
// ZENERHTBGQRQEGSNTEGHZTNBRGSEDFH ETBZGAZGSR4REBS 4GBDSZF4AEZBF4AZDS Question de la couleur
let echelle_couleurs = d3.scaleOrdinal().domain(keys).range(color)
let echelle_couleurs = d3.scaleOrdinal().domain(keys).range(colors)

let uniqueLabels = []
donnees.forEach(item => {
Expand Down Expand Up @@ -100,11 +92,11 @@ const barchart_creator = (config_barchart) => {

} else {
if (choice === "x") {
val_choisie = 10 // Longueur de la barre
val_choisie = 10
} else if (choice === "y") {
val_choisie = origin + i*ecart + d.incr*(x_scale.bandwidth() / taille)
} else if (choice === "width") {
val_choisie = y_scale(d.value) //Décalage par rapport à la gauche !! => Point le plus à droite de chaque barre.
val_choisie = y_scale(d.value)
} else if (choice === "height") {
val_choisie = (x_scale.bandwidth() / taille) - varPadding
} else {
Expand Down Expand Up @@ -148,14 +140,14 @@ const barchart_creator = (config_barchart) => {
.attr("cx", function(d,i){ return 20 + i*75})
.attr("cy", 15)
.attr("r", 7)
.style("fill", (d, i) => color[i])
.style("fill", (d, i) => colors[i])

svg.selectAll("categories")
.data(keys).enter()
.append("text")
.attr("x", function(d,i){ return 30 + i*75})
.attr("y", 15)
.style("fill", (d, i) => color[i])
.style("fill", (d, i) => colors[i])
.text(function(d){ return d})
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
Expand Down Expand Up @@ -217,22 +209,33 @@ const barchart_creator = (config_barchart) => {

const stackedchart_creator = (config_stackedchart) => {

console.log(config_stackedchart)
let longueur = config_stackedchart.options.longueur
let donnees = config_stackedchart.data
let vertical_bar = config_stackedchart.options.vertical_bar

let colors = config_stackedchart.options.hasOwnProperty("colors") ? config_stackedchart.options.colors : couleurs

const margin = {left : 5, top : 5, bottom : 5, right : 5}
const svg = d3.select("#d3_visualisation").attr("width", longueur + margin.left + margin.right).attr("height", longueur + margin.top + margin.bottom)

const long2 = longueur*0.8

let svg2 = svg.append("svg")
.attr("x", longueur*0.1)
.attr("y", longueur*0.1)
.attr("width", long2)
.attr("height", long2)

// Initialisation

let color = []
let keys = []

donnees.forEach(d => {

let object = {"Category" : d.category}
keys.push(object.Category)

if (couleurs[0] === 0) {
let couleurs = {"color" : d.fill}
color.push(couleurs.color)
} else {
color = couleurs
}
})

const dataset = donnees[0].values.map((_, i) => {
Expand Down Expand Up @@ -309,7 +312,7 @@ const stackedchart_creator = (config_stackedchart) => {
.data(item)
.join(
enter => enter.append("g")
.attr("fill", (d,i) => color[i]),
.attr("fill", (d,i) => colors[i]),
update => update,
exit => exit.remove()
)
Expand All @@ -333,14 +336,14 @@ const stackedchart_creator = (config_stackedchart) => {
.attr("cx", function(d,i){ return 20 + i*75})
.attr("cy", 15)
.attr("r", 7)
.style("fill", (d, i) => color[i])
.style("fill", (d, i) => colors[i])

svg.selectAll("categories")
.data(keys).enter()
.append("text")
.attr("x", function(d,i){ return 30 + i*75})
.attr("y", 15)
.style("fill", (d, i) => color[i])
.style("fill", (d, i) => colors[i])
.text(function(d){ return d})
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
Expand All @@ -357,7 +360,7 @@ const stackedchart_creator = (config_stackedchart) => {
.append("text")
.attr("x", (d,i) => longueur*0.15 + origin + i*ecart)
.attr("y", longueur*0.95)
.text(function(d){ return d})
.text(d => d)
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")

Expand All @@ -377,6 +380,15 @@ const stackedchart_creator = (config_stackedchart) => {

const piechart_creator = (config_piechart) => {

console.log(config_piechart)
let longueur = config_piechart.options.longueur
let donnees = config_piechart.data
let colors = config_piechart.options.hasOwnProperty("colors") ? config_piechart.options.colors : couleurs
let color_text = config_piechart.options.hasOwnProperty("color_text") ? config_piechart.options.color_text : couleurs[0]

const margin = {left : 5, top : 5, bottom : 5, right : 5}
const svg = d3.select("#d3_visualisation").attr("width", longueur + margin.left + margin.right).attr("height", longueur + margin.top + margin.bottom)

let pie = []
let data_pie = []
try{
Expand All @@ -400,26 +412,18 @@ const piechart_creator = (config_piechart) => {

// Récupération des labels et des couleurs

let color = []
let keys = []

try {
donnees.forEach(d => {
let object = {"Label" : d.label}
keys.push(object.Label)

if (couleurs[0] === 0) {
let couleurs = {"color" : d.fill}
color.push(couleurs.color)
} else {
color = couleurs
}
})
} catch (error) {
console.error("Le dataset n'est pas au bon format : ", error)
}

let echelle_couleurs = d3.scaleOrdinal().domain(keys).range(color)
let echelle_couleurs = d3.scaleOrdinal().domain(keys).range(colors)

let label = d3.arc()
.outerRadius(radius)
Expand All @@ -445,7 +449,7 @@ const piechart_creator = (config_piechart) => {
update => update,
exit => exit.remove()
)
.attr("fill", "white")
.attr("fill", color_text)
.attr("text-anchor", "middle")
.style("font", "16px times")
.attr("transform", function(d) {
Expand All @@ -456,23 +460,24 @@ const piechart_creator = (config_piechart) => {

function nodelink_creator(config_nodelink) {

let coloration
if (couleurs.length != 2) {
coloration = ["red", "steelblue"]
} else {
coloration = couleurs
}
let longueur = config_nodelink.options.longueur
let donnees = config_nodelink.data
let colors = config_nodelink.options.hasOwnProperty("colors") ? config_nodelink.options.colors : couleurs
let strength = config_nodelink.options.hasOwnProperty("strength") ? config_nodelink.options.strength : -400

const margin = {left : 5, top : 5, bottom : 5, right : 5}
const svg = d3.select("#d3_visualisation").attr("width", longueur + margin.left + margin.right).attr("height", longueur + margin.top + margin.bottom)

const link = svg.selectAll("line")
.data(donnees.links)
.join("line")
.style("stroke", coloration[0])
.style("stroke", colors[0])

const node = svg.selectAll("circle")
.data(donnees.nodes)
.join("circle")
.attr("r", 20)
.style("fill", coloration[1])
.style("fill", colors[1])

function ticked() {
link
Expand Down
10 changes: 6 additions & 4 deletions d3/index-d3_all.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,16 +60,18 @@
]
}

const couleurs = ["black", "crimson", "silver", "gold", "steelblue"]
const couleurs = ["green", "crimson", "silver", "gold", "steelblue"]
const couleur_texte = ["black"]
const couleurs_nodelink = ["crimson", "steelblue"]


//let configuration = {data : donnees, type : visu, options : {couleurs}}
let config_barchart = {data : dataset_barchart, type : "barchart", options : {longueur : 400, vertical_bar : true, is_log : false}}
let config_stackedchart = {data : dataset_stackedchart, type : "stackedchart", options : {colors : couleurs, longueur : 400, vertical_bar : true}}
let config_piechart = {data : dataset_piechart, type : "piechart", options : {colors : couleurs, longueur : 400}}
let config_nodelink = {data : dataset_nodelink, type : "nodelink", options : {colors : couleurs, longueur : 400, strength : -400}}
let config_piechart = {data : dataset_piechart, type : "piechart", options : {colors : couleurs, longueur : 400, color_text : couleur_texte}}
let config_nodelink = {data : dataset_nodelink, type : "nodelink", options : {colors : couleurs_nodelink, longueur : 400, strength : -400}}

visualisation(config_barchart)
visualisation(config_nodelink)

</script>
<div id="svg_wrapper" style="white-space: nowrap;">
Expand Down

0 comments on commit e705578

Please sign in to comment.