Public
Edited
Nov 25, 2024
viewof insicurezza = Inputs.range([0, 30], {label: "Insicurezza", value: 15, step: 1})
viewof panico = Inputs.range([0, 30], {label: "Panico", value: 15, step: 1})
viewof indignazione = Inputs.range([0, 20], {label: "Indignazione", value: 10, step: 1})
viewof sfiducia = Inputs.range([0, 10], {label: "Sfiducia", value: 5, step: 1})
viewof noia = Inputs.range([0, 10], {label: "Noia", value: 5, step: 1})
ht = {
// Somma dei valori degli slider
return insicurezza + panico + indignazione + sfiducia + noia;
}
svg = {
const totalWidth = window.innerWidth; // Usa la larghezza della finestra del browser
const height = 40; // Altezza della barra
const values = [insicurezza, panico, indignazione, sfiducia, noia]; // I valori degli slider
const maxValues = [30, 30, 20, 10, 10]; // I valori massimi per ogni slider
// Crea l'elemento SVG
const svg = d3.create("svg").attr("width", totalWidth).attr("height", height);
// Aggiungi la barra esterna (bianca)
svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", totalWidth)
.attr("height", height)
.attr("fill", "#ffffff") // Colore di sfondo bianco
.attr("stroke", "transparent"); // Bordo trasparente
// Calcola il totale dei valori
const totalValue = values.reduce((acc, val, i) => acc + (val / maxValues[i]), 0); // Calcola il totale proporzionale
// Colori per i vari parametri
const colors = [
"#004639", // Verde molto scuro (100%)
"#007c5f", // Verde scuro (80%)
"#009c7a", // Verde medio scuro (60%)
"#00b494", // Verde chiaro (40%)
"#00ccaa" // Verde molto chiaro (20%)
];
// Calcoliamo la somma totale dei valori per ridistribuire l'altezza
const totalMaxValue = maxValues.reduce((acc, val) => acc + val, 0);
// Calcoliamo la larghezza relativa di ogni parametro (in proporzione)
let xOffset = 0; // Partiamo da sinistra (x = 0)
// Se i rettangoli già esistono, li aggiorniamo, altrimenti li creiamo
const bars = svg.selectAll(".bar")
.data(values);
// Aggiungi i nuovi rettangoli, se non esistono
bars.enter().append("rect")
.attr("class", "bar")
.attr("x", 0) // Inizialmente partiamo dalla posizione più a sinistra
.attr("y", 0)
.attr("height", height) // Altezza fissa
.attr("width", 0) // Imposta inizialmente la larghezza a 0
.attr("fill", (d, i) => colors[i])
.style("opacity", 0) // Imposta inizialmente l'opacità a 0 per l'animazione di dissolvenza
.transition() // Inizia la transizione
.duration(1000) // Durata dell'animazione (1 secondo)
.style("opacity", 1) // Rende il rettangolo visibile (opacità a 1)
.attr("width", (d, i) => (d / totalMaxValue) * totalWidth) // Calcola la larghezza proporzionale
.attr("x", (d, i) => {
const width = (d / totalMaxValue) * totalWidth;
const offset = xOffset; // La posizione di partenza lungo l'asse x
xOffset += width; // Aumentiamo l'offset per il prossimo rettangolo
return offset; // Posiziona il rettangolo adiacente
});
// Aggiorna i rettangoli esistenti con la transizione
bars.transition()
.duration(1000) // Durata della transizione
.attr("width", (d, i) => (d / totalMaxValue) * totalWidth) // Calcola la nuova larghezza proporzionale
.attr("x", (d, i) => {
const width = (d / totalMaxValue) * totalWidth;
const offset = xOffset; // La posizione di partenza lungo l'asse x
xOffset += width; // Aumentiamo l'offset per il prossimo rettangolo
return offset; // Posiziona il rettangolo adiacente
});
// Rimuovi i rettangoli che non sono più necessari (se qualche valore è diminuito)
bars.exit()
.transition()
.duration(1000)
.style("opacity", 0) // Rende il rettangolo invisibile
.remove();
// Restituisce l'elemento SVG creato
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
