D3.js (o D3 per Data-Driven Documents) è una popolare libreria JavaScript utilizzata per creare visualizzazioni di dati interattive sul web. Per utilizzarlo, dovrai avere una buona conoscenza di HTML, CSS e JavaScript.
Ecco una guida su come usarlo:
1. Include D3.js nella tua pagina HTML: D3 è disponibile tramite CDN. Aggiungi questa linea di script all’interno del tag `
` della tua pagina HTML. \`\`\`html \`\`\`1. Organizza i tuoi dati: D3 organizza i dati sotto forma di array. Puoi utilizzare dati numerici, stringhe o qualsiasi altro tipo di dato.
\`\`\`javascript let dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]; \`\`\`1. Crea un elemento SVG: D3 utilizza SVG per disegnare grafici. Crea un elemento SVG all’interno del tuo file HTML.
\`\`\`javascript let svgWidth = 500, svgHeight = 300; let svg = d3.select(‘body’) .append(‘svg’).attr(‘width’, svgWidth).attr(‘height’, svgHeight); \`\`\`1. Disegna sul tuo elemento SVG: Ora puoi utilizzare vari metodi d3 per disegnare sul tuo SVG. Ad esempio, qui creiamo un semplice diagramma a barre.
\`\`\`javascript let barPadding = 5; let barWidth = (svgWidth / dataset.length); let barChart = svg.selectAll(“rect”) .data(dataset) .enter() .append(“rect”) .attr(“y”, function(d) {return svgHeight – d;}) .attr(“height”, function(d) {return d;}) .attr(“width”, barWidth – barPadding) .attr(“transform”, function (d, i) {return `translate(${[i * barWidth, 0]})`;}); \`\`\`1. Aggiungi asse e etichette: Per rendere il grafico più leggibile, è possibile aggiungere assi e etichette.
\`\`\`javascript let xScale = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0, svgWidth]); let yScale = d3.scaleLinear().domain([0, d3.max(dataset)]).range([svgHeight, 0]); let xAxis = d3.axisBottom().scale(xScale); let yAxis = d3.axisLeft().scale(yScale); svg.append(“g”).attr(“transform”, `translate(0, ${svgHeight})`).call(xAxis); svg.append(“g”).call(yAxis); \`\`\`1. Carica dati dinamicamente: Puoi illustrare dati dinamici utilizzando metodi come `d3.csv(url)` per caricare dati da un file CSV, o `d3.json(url)` per caricare dati da un file JSON.
Questo è molto base. D3.js è estremamente potente e versatile e ci sono molte altre cose che potresti fare con esso. Consiglierei di prendere un tutorial dettagliato o leggere la documentazione ufficiale per comprenderlo meglio.
