D3 heatmap last problem

JavaScript
1

as ugly as this is i am super proud of it. im not exactly sure why the error is coming up unless it is because there are 2 januarys. but that seems to be the only way i can create room for the bars.

exuse the colors, im just trying for functionality for now. if anyone has a tip for how i remedy this last challenge

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

d3.json(
  "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json"
).then((data) => {
  console.log(data);

  let minYear;
  let maxYear;

  const getYear = () => {
    let temp = [];
    for (let i = 0; i < data.monthlyVariance.length; i++) {
      temp.push(data.monthlyVariance[i].year);
      minYear = d3.min(temp);
      maxYear = d3.max(temp);
    }
  };

  getYear();

  const baseTemp = data.baseTemperature;
  const w = 900;
  const h = 900;
  const padding = 70;
  const dataset = ["blue", "black", "yellow", "red"];

  const timeScale1 = d3
    .scaleTime()
    .domain([new Date(0, 0), new Date(0, 12)])
    .range([padding, h - padding]);
  const timeScale2 = d3
    .scaleTime()
    .domain([new Date(minYear, 0), new Date(maxYear, 0)])
    .range([padding, w - padding]);

  const tooltip = d3
    .select("body")
    .append("div")
    .style("padding", "10px")
    .style("border", "4px solid black")
    .attr("id", "tooltip")
    .style("background-color", "white")
    .style("opacity", 0)
    .style("position", "absolute");

  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .style("background-color", "pink");

  svg
    .selectAll("rect")
    .data(data.monthlyVariance)
    .enter()
    .append("rect")
    .attr("height", (d, i) => {
      return (h - 2 * padding) / 12;
    })
    .attr("width", (d, i) => {
      return (w - 2 * padding) / (maxYear - minYear);
    })
    .attr("class", "cell")
    .attr("fill", (d, i) => {
      if (baseTemp - d.variance < baseTemp && baseTemp - d.variance >= 6) {
        return "blue";
      } else if (baseTemp - d.variance < 6) {
        return "black";
      } else if (baseTemp - d.variance >= 0 && baseTemp - d.variance < 10) {
        return "yellow";
      } else {
        return "red";
      }
    })
    .attr("x", (d, i) => {
      return timeScale2(new Date(d.year, 0));
    })
    .attr("y", (d, i) => {
      return timeScale1(new Date(0, d.month - 1));
    })
    .attr("data-year", (d, i) => {
      return d.year;
    })
    .attr("data-month", (d, i) => {
      return d.month - 1;
    })
    .attr("data-temp", (d, i) => {
      return d.variance;
    })
    .on("mouseover", (e, d) => {
      tooltip
        .style("opacity", 1)
        .style("border-radius", "10px")
        .style("top", e.pageY + "px")
        .style("left", e.pageX + 20 + "px")
        .attr("data-year", () => {
          return d.year;
        })
        .text(() => {
          return d.year + " , " + d.variance;
        });
    })
    .on("mouseout", (e, d) => {
      tooltip.style("opacity", 0);
    });

  const xAxis = d3.axisBottom(timeScale2);
  const yAxis = d3.axisLeft(timeScale1).tickFormat(d3.timeFormat("%B"));

  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);

  const legend = d3
    .select("#container")
    .append("svg")
    .attr("width", 400)
    .attr("height", 200)
    .style("background-color", "tan")
    .attr("id", "legend");
  // .attr("fill", "tan");

  legend
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("width", 30)
    .attr("height", 15)
    .attr("x", (d, i) => {
      return padding + i * 80;
    })

    .attr("y", (d, i) => {
      return 100;
    })
    .attr("fill", (d, i) => {
      return d;
    });
});

heat map1 (codepen.io)

2

It’s because there’s two January’s. Or more precisely, because there are 13 ticks covering 12 months. You need 12 ticks for 12 months.

You can play around with the scale definition and axis location to force it to be right manually or you can look at a band scale and try that.

3

I removed the 12th tick and shifted everything a bit. It looks goofy but somehow passes. Going to figure out if I can make it look better.

I am down to the last challenge which is the tool tip ‘data-education’ attribute. I think it is exactly what is on the polygons but the test is telling me that they are not equal. I’m not sure if the tool tip is pulling from a different dataset than the polygon

4

It’s still the alignment, but it’s just a little misaligned. So little in fact, the tooltip tests often pass. I didn’t notice the problem until I just double-checked and got them to fail.

Scroll to the bottom and look at the alignment of the month ticks relative to the rectangles and you’ll see that the ticks get progressively higher than the rectangles, with December the worst. The ticks need to be aligned somewhere on the inside of the rows of rectangles.

5

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