Data Visualization Projects - Visualize Data with a Heat Map

emibonezzi · March 30, 2023, 7:49am

I’m still failing these test:

8. The “data-month”, “data-year” of each cell should be within the range of the data.

9. My heat map should have cells that align with the corresponding month on the y-axis.

I really cannot understand why…
Everything seems to line up.

import * as d3 from "https://cdn.skypack.dev/d3@7.8.2";

function calculateHex(v) {
  if (v >= 2.8 && v <= 5.0) {
    return "#008080";
  } else if (v > 5.0 && v <= 7.2) {
    return "#FFFF00";
  } else if (v > 7.2 && v <= 9.5) {
    return "#FFA500";
  } else if (v > 9.5 && v <= 12.8) {
    return "#FF0000";
  } else {
    return "lightblue";
  }
}

const w = 1603;
const h = 540;
const padding = 150;

const title = d3
  .select("main")
  .append("h1")
  .attr("id", "title")
  .text("Monthly Global Land-Surface Temperature");

const subtitle = d3
  .select("main")
  .append("h4")
  .attr("id", "description")
  .text("1753 - 2015: base temperature 8.66℃");

const svg = d3.select("main").append("svg").attr("width", w).attr("height", h);

const url =
  "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json";

document.addEventListener("DOMContentLoaded", function () {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      const dataset = data.monthlyVariance.map(function (item) {
        return {
          year: item.year,
          month: item.month,
          variance: item.variance,
          actualTemp: 8.66 + item.variance,
          colorHex: calculateHex(8.66 + item.variance)
        };
      });

      console.log(dataset);

      const minYears = d3.min(dataset, (d) => d.year);

      const maxYears = d3.max(dataset, (d) => d.year);

      const minMonth = d3.min(dataset, (d) => d.month);

      const maxMonth = d3.max(dataset, (d) => d.month);

      console.log(minYears, maxYears, minMonth, maxMonth);

      const yScale = d3
        .scaleBand()
        .domain([12,11,10,9,8,7,6,5,4,3,2,1])
        .range([h - padding, padding]);

      const xScale = d3
        .scaleLinear()
        .domain([1752, maxYears])
        .range([padding, w - padding]);

      const yAxis = d3.axisLeft(yScale);

      const xAxis = d3.axisBottom(xScale);

      svg
        .append("g")
        .attr("id", "x-axis")
        .attr("transform", `translate(0,${h - padding})`)
        .call(xAxis);

      svg
        .append("g")
        .attr("id", "y-axis")
        .attr("transform", `translate(${padding},0)`)
        .call(yAxis);

      svg
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", (d, i) => xScale(d.year))
        .attr("y", (d, i) => yScale(d.month))
        .attr("width", 5)
        .attr("height",20)
        .attr("data-month", (d) => d.month)
        .attr("data-year", (d) => d.year)
        .attr("data-temp", (d) => d.actualTemp)
        .attr("class", "cell")
        .style("fill", (d) => d.colorHex);
    });
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Data Visualization Projects - Visualize Data with a Heat Map

Link to the challenge:

Link to the codepen

r5.m5.g5.55 · March 30, 2023, 8:45pm

Hola

@ emibonezzi

8. The “data-month”, “data-year” of each cell should be within the range of the data.

Par este restale uno al valor del attr data-month

.attr("data-month", (d) => d.month - 1)

9. My heat map should have cells that align with the corresponding month on the y-axis.

En este caso necesitas que los meses del año se representen en el formato:

January, February, March… actualmente tienes 1, 2, 3…

lanceamd · March 30, 2023, 9:37pm

Hi there, i think you need to use xScale methods on d.year and yScale on d.months-1 in your attribute definitions. I hope that helps

jeremy.a.gray · March 30, 2023, 11:37pm

The alignment tests implicitly check the labels and values of the objects that are being checked for alignment so that the test fails if they are mislabeled or out of alignment. As others have pointed out, you need the JavaScript conventional month numbers for the month attributes (0-11) and the actual month names for labels on the axis. D3’s time parsing functions are useful in these cases.

You may also encounter trouble with the x-axis using a linear scale instead of a time scale.

If you have trouble with other attributes or properties, simply log from the callback setting the value like

         .attr("data-month", (d) => {
           console.log(d.month);
           return d.month;
         })

instead of

         .attr("data-month", (d) => d.month)

Additionally, there is no need to import D3 like you did on codepen. Simply search for it and add it via the JS configuration tab as you did the fCC testing bundle.

emibonezzi · March 31, 2023, 7:58am

Thanks for the help.
I have implemented your suggestions in my code:

import * as d3 from "https://cdn.skypack.dev/d3@7.8.2";

function calculateHex(v) {
  if (v >= 2.8 && v <= 5.0) {
    return "#008080";
  } else if (v > 5.0 && v <= 7.2) {
    return "#FFFF00";
  } else if (v > 7.2 && v <= 9.5) {
    return "#FFA500";
  } else if (v > 9.5 && v <= 12.8) {
    return "#FF0000";
  } else {
    return "lightblue";
  }
}

const w = 1603;
const h = 540;
const padding = 150;

const title = d3
  .select("main")
  .append("h1")
  .attr("id", "title")
  .text("Monthly Global Land-Surface Temperature");

const subtitle = d3
  .select("main")
  .append("h4")
  .attr("id", "description")
  .text("1753 - 2015: base temperature 8.66℃");

const svg = d3.select("main").append("svg").attr("width", w).attr("height", h);

const url =
  "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json";

const months = []

document.addEventListener("DOMContentLoaded", function () {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      const dataset = data.monthlyVariance.map(function (item) {
        months.push(new Date(`1700-${item.month}-01`))
        return {
          year: new Date(`${item.year}-${item.month}-01`),  
          month: new Date(`1700-${item.month}-01`),
          variance: item.variance,
          actualTemp: 8.66 + item.variance,
          colorHex: calculateHex(8.66 + item.variance)
        };
      });

      console.log(dataset);

      const minYears = d3.min(dataset, (d) => d.year);

      const maxYears = d3.max(dataset, (d) => d.year);

      const minMonth = d3.min(dataset, (d) => d.month);

      const maxMonth = d3.max(dataset, (d) => d.month);

      console.log(minYears, maxYears, minMonth, maxMonth);
      
      
    
      const yScale = d3
        .scaleBand()
        .domain(months)
        .range([h - padding, padding]);

      const xScale = d3
        .scaleTime()
        .domain([new Date("1752-01-01"), new Date("2016-01-01")])
        .range([padding, w - padding]);

      const yAxis = d3.axisLeft(yScale).tickFormat(d3.timeFormat("%B"));

      const xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%Y"));

      svg
        .append("g")
        .attr("id", "x-axis")
        .attr("transform", `translate(0,${h - padding})`)
        .call(xAxis);

      svg
        .append("g")
        .attr("id", "y-axis")
        .attr("transform", `translate(${padding},0)`)
        .call(yAxis);

      svg
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", (d, i) => xScale(d.year))
        .attr("y", (d, i) => yScale(d.month))
        .attr("width", 5)
        .attr("height",20)
        .attr("data-month", (d) => d.month)
        .attr("data-year", (d) => d.year)
        .attr("data-temp", (d) => d.actualTemp)
        .attr("class", "cell")
        .style("fill", (d) => d.colorHex);
    });
});

Forget the tooltip\legend tests which I didn’t start to work on yet, I’m still failing test #8. and #9.

r5.m5.g5.55 · March 31, 2023, 5:14pm

Hola.

@ emibonezzi

No se si por el idioma sea dificil entender lo que te digo, una disculpa por eso, pero no me siento comodo escribiendo en ingles.

El primer codigo que compartiste solo requeria ligeros ajustes para cumplir con las pruebas, el que tienes ahora tiene muchos defectos, pero el mas importante esta aqui:

.then((data) => {
      const dataset = data.monthlyVariance.map(function (item) {
        months.push(new Date(`1700-${item.month}-01`))
        return {
          year: new Date(`${item.year}-${item.month}-01`),  
          month: new Date(`1700-${item.month}-01`),
          variance: item.variance,
          actualTemp: 8.66 + item.variance,
          colorHex: calculateHex(8.66 + item.variance)
        };
      });

Estos valores -01 afectaran todo el codigo, como los tenias estaban bien, lo que te mencione de restar 1 era solo en la linea que te marque, y eso era porque tenias este array .domain([12,11,10,9,8,7,6,5,4,3,2,1]) y son cosas del famoso indice 0, entonces habia dos soluciones:

1.- .domain([11,10,9,8,7,6,5,4,3,2,1,0])

2.- .attr("data-month", (d) => d.month - 1)

Solo debes aplicar una opcion.

Lo del otro problema tambien era facil de resolver.

Te recomiendo regresar al anterior y desde ese punto puedo seguirte ayudando a resolver los problemas que tienes.

saludos

emibonezzi · March 31, 2023, 7:43pm

Gracias mi amigo. Volví a mi código original, implementé su edición más analicé el tiempo y aquí estamos. Prueba aprobada. ¡Excelente!

import * as d3 from "https://cdn.skypack.dev/d3@7.8.2";

function getMonthName(monthNumber) {
      return new Date('1999-' + monthNumber + '-15').toLocaleString('en-us', { month: 'long' })
    }

function getYear(y) {
  return new Date(y + "-01-01").toLocaleString('en-us', { year: 'numeric' })
}

function calculateHex(v) {
  if (v >= 2.8 && v <= 5.0) {
    return "#008080";
  } else if (v > 5.0 && v <= 7.2) {
    return "#FFFF00";
  } else if (v > 7.2 && v <= 9.5) {
    return "#FFA500";
  } else if (v > 9.5 && v <= 12.8) {
    return "#FF0000";
  } else {
    return "lightblue";
  }
}

const w = 1603;
const h = 540;
const padding = 150;

const title = d3
  .select("main")
  .append("h1")
  .attr("id", "title")
  .text("Monthly Global Land-Surface Temperature");

const subtitle = d3
  .select("main")
  .append("h4")
  .attr("id", "description")
  .text("1753 - 2015: base temperature 8.66℃");

const svg = d3.select("main").append("svg").attr("width", w).attr("height", h);

const url =
  "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json";

document.addEventListener("DOMContentLoaded", function () {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      const dataset = data.monthlyVariance.map(function (item) {
        return {
          year: item.year,
          month: item.month,
          variance: item.variance,
          actualTemp: 8.66 + item.variance,
          colorHex: calculateHex(8.66 + item.variance)
        };
      });

      console.log(dataset);

      const minYears = d3.min(dataset, (d) => d.year);

      const maxYears = d3.max(dataset, (d) => d.year);

      const minMonth = d3.min(dataset, (d) => d.month);

      const maxMonth = d3.max(dataset, (d) => d.month);

      console.log(minYears, maxYears, minMonth, maxMonth);

      const yScale = d3
        .scaleBand()
        .domain([11,10,9,8,7,6,5,4,3,2,1,0])
        .range([h - padding, padding]);

      const xScale = d3
        .scaleLinear()
        .domain([1752, maxYears])
        .range([padding, w - padding]);

      const yAxis = d3.axisLeft(yScale).tickFormat(x => getMonthName(x+1));

      const xAxis = d3.axisBottom(xScale).tickFormat(x => getYear(x));

      svg
        .append("g")
        .attr("id", "x-axis")
        .attr("transform", `translate(0,${h - padding})`)
        .call(xAxis);

      svg
        .append("g")
        .attr("id", "y-axis")
        .attr("transform", `translate(${padding},0)`)
        .call(yAxis);

      svg
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", (d, i) => xScale(d.year))
        .attr("y", (d, i) => yScale(d.month-1))
        .attr("width", 5)
        .attr("height",20)
        .attr("data-month", (d) => d.month-1)
        .attr("data-year", (d) => d.year)
        .attr("data-temp", (d) => d.actualTemp)
        .attr("class", "cell")
        .style("fill", (d) => d.colorHex);
    });
});

r5.m5.g5.55 · March 31, 2023, 8:24pm

Hola

@ emibonezzi

Perfecto,

Una ultima sugerencia, si cambias esto:

.domain([1752, maxYears])

Por esto,

.domain([minYears, maxYears])

Tambien funciona, y aunque no es el caso, si los datos cambiaran se adaptaria a los nuevos datos.

saludos

system · September 30, 2023, 8:25am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
D3JS Heat Map cells doesn't align with month JavaScript	7	691	June 22, 2022
D3 heatmap last problem JavaScript	4	539	November 5, 2022
Data Visualization Projects - Visualize Data with a Heat Map (Facing Issues)	2	926	January 17, 2021
3d heat map #9 fails	1	406	June 1, 2021
Heat Map - Test 9 Fails ( and a question more ) JavaScript	3	512	February 7, 2022

Data Visualization Projects - Visualize Data with a Heat Map

8. The “data-month”, “data-year” of each cell should be within the range of the data.

9. My heat map should have cells that align with the corresponding month on the y-axis.

8. The “data-month”, “data-year” of each cell should be within the range of the data.

9. My heat map should have cells that align with the corresponding month on the y-axis.

Related topics