Skip to content

Commit

Permalink
Corrections des mêmes problèmes que dans le fichier unique #43
Browse files Browse the repository at this point in the history
  • Loading branch information
@HugoCarton
HugoCarton committed Mar 6, 2024
1 parent 36008e7 commit f50344a
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 104 deletions.
52 changes: 25 additions & 27 deletions d3/d3_barchart_final.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"

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"},
{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"}
{category :"Clouds", values : [{value : 5, label : "Wolf"}, {value : 8, label : "Eagle"}, {value : 12, label : "Deer"}, {value : 7, label : "Lion"}, {value : 9, label : "Dragon"}]},
{category :"Flower", values : [{value : 10, label : "Wolf"}, {value : 20, label : "Eagle"}, {value : 15, label : "Deer"}, {value : 25, label : "Lion"}, {value : 30, label : "Dragon"}]},
{category :"Snow", values : [{value : 6, label : "Wolf"}, {value : 8, label : "Eagle"}, {value : 2, label : "Deer"}, {value : 4, label : "Lion"}, {value : 5, label : "Dragon"}]},
{category :"Wind", values : [{value : 20, label : "Wolf"}, {value : 30, label : "Eagle"}, {value : 10, label : "Deer"}, {value : 12, label : "Lion"}, {value : 18, label : "Dragon"}]},
{category :"Moon", values : [{value : 14, label : "Wolf"}, {value : 16, label : "Eagle"}, {value : 24, label : "Deer"}, {value : 8, label : "Lion"}, {value : 17, label : "Dragon"}]}
]

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

const barchart_creator = (donnees, couleurs = [0], vertical_bar = true, scale = false, width = 400, height = 400) => {
const barchart_creator = (data, colors = 0, vertical_bar = true, scale = false, width = 400, height = 400) => {

const taille = Math.max(donnees.length, 5)
const taille = Math.max(data.length, 5)
const margin = {left : 5, top : 5, bottom : 5, right : 5}
const varPadding = 1
const domaine = d3.max(donnees, d => d3.max(d.values, e => e.value))
const domaine = d3.max(data, d => d3.max(d.values, e => e.value))

const svg = d3.select("#d3_barchart").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom)

Expand All @@ -32,14 +32,14 @@ const barchart_creator = (donnees, couleurs = [0], vertical_bar = true, scale =
let y_scale

if (vertical_bar = true) {
x_scale = d3.scaleBand().domain(donnees.map(d => d.category)).range([0, width2]).padding(0.1)
x_scale = d3.scaleBand().domain(data.map(d => d.category)).range([0, width2]).padding(0.1)
if (!scale) {
y_scale = d3.scaleLinear().domain([0, domaine]).range([0, height2*0.9])
} else {
y_scale = d3.scaleLog().domain([1, domaine]).range([0, height2*0.9])
}
} else {
x_scale = d3.scaleBand().domain(donnees.map(d => d.category)).range([0, height2]).padding(0.1)
x_scale = d3.scaleBand().domain(data.map(d => d.category)).range([0, height2]).padding(0.1)
if (!scale) {
y_scale = d3.scaleLinear().domain([0, domaine]).range([0, width2*0.9])
} else {
Expand All @@ -49,37 +49,35 @@ const barchart_creator = (donnees, couleurs = [0], vertical_bar = true, scale =

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

// Transformation des données

try {
donnees.forEach((d,i) => {
data.forEach((d,i) => {
let object = {"Category" : d.category}
object["Value"] = []

for (let j = 0; j < d.values.length ; j++) {
object.Value.push({"value" : d.values[j].value, "labels" : d.values[j].label, "parents" : d.category, "color" : d.fill, "incr" : i})
object.Value.push({"value" : d.values[j].value, "labels" : d.values[j].label, "parents" : d.category, "incr" : i})
}

exploitable.push(object)
keys.push(object.Category)

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 colorScale

if (colors === 0) {
colorScale = d3.scaleOrdinal(d3.schemeCategory10).domain(keys)
colors = d3.schemeCategory10
} else {
colorScale = d3.scaleOrdinal().domain(keys).range(colors)
}
let uniqueLabels = []
donnees.forEach(item => {
data.forEach(item => {
item.values.forEach(val => {
if (!uniqueLabels.includes(val.label)) {
uniqueLabels.push(val.label)
Expand Down Expand Up @@ -147,7 +145,7 @@ const barchart_creator = (donnees, couleurs = [0], vertical_bar = true, scale =
.attr("y", (d,i) => choix("y", d, i))
.attr("width", (d,i) => choix("width", d, i))
.attr("height", (d,i) => choix("height", d, i))
.style("fill", d => echelle_couleurs(d.parents))
.style("fill", d => colorScale(d.parents))

// Légende

Expand All @@ -157,14 +155,14 @@ const barchart_creator = (donnees, couleurs = [0], vertical_bar = true, scale =
.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 @@ -224,5 +222,5 @@ const barchart_creator = (donnees, couleurs = [0], vertical_bar = true, scale =

}

barchart_creator(dataset_barchart, couleurs)
barchart_creator(dataset_barchart)

19 changes: 8 additions & 11 deletions d3/d3_nodelink_final.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,33 +29,30 @@ const dataset_nodelink = {

let couleurs = ["gold", "green"]

function nodelink_creator(data, colors = [], strength = -400, longueur = 380) {
function nodelink_creator(data, colors = [], strength = -400, width = 400, height = 400) {

const donnees = data
const margin = {top: 5, right: 5, bottom: 5, left: 5}

let coloration
if (colors.length != 2) {
coloration = ["red", "steelblue"]
} else {
coloration = colors
colors = ["red", "steelblue"]
}

const svg = d3.select("#d3_nodelink")
.attr("width", longueur + margin.left + margin.right)
.attr("height", longueur + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")

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 All @@ -75,12 +72,12 @@ function nodelink_creator(data, colors = [], strength = -400, longueur = 380) {
.links(donnees.links)
)
.force("charge", d3.forceManyBody().strength(strength))
.force("center", d3.forceCenter(longueur / 2, longueur / 2))
.force("center", d3.forceCenter(width / 2, height / 2))
.on("end", ticked)

}

nodelink_creator(dataset_nodelink, couleurs, -400)
nodelink_creator(dataset_nodelink)



Expand Down
50 changes: 26 additions & 24 deletions d3/d3_piechart_final.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"

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"}
{label :"Clouds", value : 12},
{label :"Flower", value : 19},
{label :"Snow", value : 10},
{label :"Wind", value : 20},
{label :"Moon", value : 8}
]

const piechart_creator = (donnees, couleurs = [0], longueur = 350) => {
const couleurs = ["green", "steelblue", "gold", "gray", "crimson"]

const piechart_creator = (data, colors = 0, width = 400, height = 400) => {

const longueur = Math.min(width, height)

let pie = []
let data_pie = []

try{
pie = d3.pie().value(d => d.value)
data_pie = pie(donnees)
data_pie = pie(data)
} catch (error) {
console.log("Le dataset ne peut être pie : ", error)
}
Expand All @@ -28,36 +33,33 @@ const piechart_creator = (donnees, couleurs = [0], longueur = 350) => {

// Initialisation du svg

const svg = d3.select("#d3_piechart")
.attr("width", longueur)
.attr("height", longueur)
const svg = d3.select("#d3_piechart").attr("width", width).attr("height", height)

const group = svg.append("g")
.attr("transform", "translate(" + (longueur) / 2 + "," + (longueur) / 2 + ")")
.attr("transform", "translate(" + (width) / 2 + "," + (height) / 2 + ")")


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

let color = []
let keys = []

try {
donnees.forEach(d => {
data.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 colorScale

if (colors === 0) {
colorScale = d3.scaleOrdinal(d3.schemeCategory10).domain(keys)
colors = d3.schemeCategory10
} else {
colorScale = d3.scaleOrdinal().domain(keys).range(colors)
}

let label = d3.arc()
.outerRadius(radius)
Expand All @@ -71,7 +73,7 @@ const piechart_creator = (donnees, couleurs = [0], longueur = 350) => {

arcs.append("path")
.attr("fill", function(d, i) {
return echelle_couleurs(i)
return colorScale(i)
})
.attr("d", arc)

Expand All @@ -92,4 +94,4 @@ const piechart_creator = (donnees, couleurs = [0], longueur = 350) => {

}

piechart_creator(dataset_piechart, ["green", "steelblue", "gold", "gray", "crimson"])
piechart_creator(dataset_piechart)
Loading

0 comments on commit f50344a

Please sign in to comment.