En aquest mòdul, explorarem diversos estudis de cas i exemples pràctics que il·lustren com utilitzar D3.js per crear visualitzacions de dades efectives i impactants. Aquests exemples estan dissenyats per mostrar com aplicar els conceptes apresos en els mòduls anteriors a situacions reals.

• Aplicar els coneixements de D3.js en projectes reals.
• Entendre com abordar problemes comuns en la visualització de dades.
• Aprendre tècniques avançades a través d'exemples pràctics.

En aquest estudi de cas, crearem una visualització interactiva de dades demogràfiques utilitzant D3.js. Utilitzarem dades de població per país i les representarem en un gràfic de barres interactiu.

1. Carregar les Dades

   d3.csv("path/to/demographic_data.csv").then(function(data) {
       // Processar les dades
       data.forEach(function(d) {
           d.population = +d.population;
       });
       // Cridar la funció per crear el gràfic
       createBarChart(data);
   });
   

2. Crear Escales

   var xScale = d3.scaleBand()
       .domain(data.map(function(d) { return d.country; }))
       .range([0, width])
       .padding(0.1);
   
   var yScale = d3.scaleLinear()
       .domain([0, d3.max(data, function(d) { return d.population; })])
       .range([height, 0]);
   

3. Dibuixar el Gràfic de Barres

   function createBarChart(data) {
       var svg = d3.select("svg")
           .attr("width", width + margin.left + margin.right)
           .attr("height", height + margin.top + margin.bottom)
         .append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
   
       svg.selectAll(".bar")
           .data(data)
         .enter().append("rect")
           .attr("class", "bar")
           .attr("x", function(d) { return xScale(d.country); })
           .attr("y", function(d) { return yScale(d.population); })
           .attr("width", xScale.bandwidth())
           .attr("height", function(d) { return height - yScale(d.population); });
   }
   

4. Afegir Interactivitat

   svg.selectAll(".bar")
       .on("mouseover", function(event, d) {
           d3.select(this).style("fill", "orange");
           // Mostrar informació addicional
       })
       .on("mouseout", function(event, d) {
           d3.select(this).style("fill", "steelblue");
           // Amagar informació addicional
       });
   

El resultat és un gràfic de barres interactiu que mostra la població de diferents països. Els usuaris poden passar el ratolí per sobre de les barres per veure informació addicional.

En aquest estudi de cas, crearem un gràfic de línies per visualitzar dades de sèries temporals. Utilitzarem dades de temperatures mensuals per mostrar com han canviat les temperatures al llarg del temps.

1. Carregar les Dades

   d3.csv("path/to/temperature_data.csv").then(function(data) {
       // Processar les dades
       var parseTime = d3.timeParse("%Y-%m");
       data.forEach(function(d) {
           d.date = parseTime(d.date);
           d.temperature = +d.temperature;
       });
       // Cridar la funció per crear el gràfic
       createLineChart(data);
   });
   

2. Crear Escales

   var xScale = d3.scaleTime()
       .domain(d3.extent(data, function(d) { return d.date; }))
       .range([0, width]);
   
   var yScale = d3.scaleLinear()
       .domain([d3.min(data, function(d) { return d.temperature; }), d3.max(data, function(d) { return d.temperature; })])
       .range([height, 0]);
   

3. Dibuixar el Gràfic de Línies

   function createLineChart(data) {
       var svg = d3.select("svg")
           .attr("width", width + margin.left + margin.right)
           .attr("height", height + margin.top + margin.bottom)
         .append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
   
       var line = d3.line()
           .x(function(d) { return xScale(d.date); })
           .y(function(d) { return yScale(d.temperature); });
   
       svg.append("path")
           .datum(data)
           .attr("class", "line")
           .attr("d", line);
   }
   

4. Afegir Interactivitat

   svg.selectAll(".dot")
       .data(data)
     .enter().append("circle")
       .attr("class", "dot")
       .attr("cx", function(d) { return xScale(d.date); })
       .attr("cy", function(d) { return yScale(d.temperature); })
       .attr("r", 5)
       .on("mouseover", function(event, d) {
           d3.select(this).attr("r", 8);
           // Mostrar informació addicional
       })
       .on("mouseout", function(event, d) {
           d3.select(this).attr("r", 5);
           // Amagar informació addicional
       });
   

El resultat és un gràfic de línies que mostra les temperatures mensuals al llarg del temps. Els usuaris poden passar el ratolí per sobre dels punts de dades per veure informació addicional.

En aquest estudi de cas, crearem un mapa coroplètic per visualitzar dades geogràfiques. Utilitzarem dades de densitat de població per mostrar com varia la densitat de població entre diferents regions.

1. Carregar les Dades

   d3.json("path/to/geo_data.json").then(function(geoData) {
       d3.csv("path/to/population_density.csv").then(function(data) {
           // Processar les dades
           var densityById = {};
           data.forEach(function(d) {
               densityById[d.id] = +d.density;
           });
           // Cridar la funció per crear el mapa
           createChoroplethMap(geoData, densityById);
       });
   });
   

2. Crear Escales

   var colorScale = d3.scaleSequential(d3.interpolateBlues)
       .domain([0, d3.max(data, function(d) { return d.density; })]);
   

3. Dibuixar el Mapa Coroplètic

   function createChoroplethMap(geoData, densityById) {
       var projection = d3.geoMercator()
           .scale(1000)
           .translate([width / 2, height / 2]);
   
       var path = d3.geoPath().projection(projection);
   
       var svg = d3.select("svg")
           .attr("width", width)
           .attr("height", height);
   
       svg.selectAll("path")
           .data(topojson.feature(geoData, geoData.objects.countries).features)
         .enter().append("path")
           .attr("d", path)
           .attr("fill", function(d) {
               return colorScale(densityById[d.id]);
           });
   }
   

4. Afegir Interactivitat

   svg.selectAll("path")
       .on("mouseover", function(event, d) {
           d3.select(this).style("stroke", "black");
           // Mostrar informació addicional
       })
       .on("mouseout", function(event, d) {
           d3.select(this).style("stroke", "none");
           // Amagar informació addicional
       });
   

El resultat és un mapa coroplètic que mostra la densitat de població per regions. Els usuaris poden passar el ratolí per sobre de les regions per veure informació addicional.

En aquest mòdul, hem explorat diversos estudis de cas que demostren com utilitzar D3.js per crear visualitzacions de dades efectives. Aquests exemples pràctics mostren com aplicar els conceptes apresos en situacions reals i ofereixen una base sòlida per a la creació de les teves pròpies visualitzacions. Amb aquests coneixements, estàs preparat per abordar projectes més complexos i personalitzats utilitzant D3.js.