fccV8DataVisualizationProject-HeatMap-Temperature/script.js at main · mgc90/fccV8DataVisualizationProject-HeatMap-Temperature · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
const url = "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json";

const w = 1200;
const h = 500;
const padding = 60;

const svg = d3.select("#heatmap");
const tooltip = d3.select("#tooltip");

d3.json(url).then(data => {

  const baseTemp = data.baseTemperature;
  const dataset = data.monthlyVariance;

  const years = dataset.map(d => d.year);


  const xScale = d3.scaleLinear()
  .domain([d3.min(years), d3.max(years)])
  .range([padding, w - padding]);

const yScale = d3.scaleBand()
  .domain(d3.range(1, 13))
  .range([padding, h - padding])
  .padding(0);


  const xAxis = d3.axisBottom(xScale)
  .tickFormat(d3.format("d"));

  const yAxis = d3.axisLeft(yScale)
    .tickFormat(m => d3.timeFormat("%B")(new Date(0, m - 1)));

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

  // Escala de colores simple (4 colores)
  const colorScale = d3.scaleThreshold()
    .domain([baseTemp - 1, baseTemp, baseTemp + 1, baseTemp + 2])
    .range(["#4575b4", "#91bfdb", "#fee090", "#fc8d59", "#d73027"]);

    const uniqueYears = [...new Set(years)];

  svg.selectAll(".cell")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "cell")
    .attr("data-month", d => d.month - 1)
    .attr("data-year", d => d.year)
    .attr("data-temp", d => baseTemp + d.variance)
    .attr("x", d => xScale(d.year))
    .attr("y", d => yScale(d.month))
    .attr("width", (w - 2 * padding) / (uniqueYears.length))
    .attr("height", yScale.bandwidth())
    .attr("fill", d => colorScale(baseTemp + d.variance))
    .on("mouseover", (event, d) => {
      tooltip
        .style("opacity", 1)
        .style("left", (event.pageX + 15) + "px")
        .style("top", (event.pageY - 40) + "px")
        .attr("data-year", d.year)
        .html(
          `${d.year} - ${d3.timeFormat("%B")(new Date(0, d.month - 1))}<br>
           Temp: ${(baseTemp + d.variance).toFixed(2)}°C<br>
           Variance: ${d.variance.toFixed(2)}`
        );
    })
    .on("mouseout", () => tooltip.style("opacity", 0));

  // ---------- Legend ----------
  const legendColors = colorScale.range();

  const lw = 280;
  const lh = 50;

  const legend = svg.append("g")
    .attr("id", "legend")
    .attr("transform", `translate(40vw, 50)`);

  const legendScale = d3.scaleBand()
    .domain(legendColors)
    .range([0, lw]);

  const blockWidth = 50;
  const blockHeight = 20;

  legend.selectAll("rect")
    .data(legendColors)
    .enter()
    .append("rect")
    .attr("width", legendScale.bandwidth())
    .attr("height", 20)
    .attr("x", d => legendScale(d))
    .attr("fill", d => d);

    const thresholds = colorScale.domain();

    const labels = [
        `${thresholds[0].toFixed(1)}`,
        `${thresholds[0].toFixed(1)} - ${thresholds[1].toFixed(1)}`,
        `${thresholds[1].toFixed(1)} - ${thresholds[2].toFixed(1)}`,
        `${thresholds[2].toFixed(1)} - ${thresholds[3].toFixed(1)}`,
        `${thresholds[3].toFixed(1)}`
    ];

  legend.selectAll("text")
  .data(labels)
  .enter()
  .append("text")
  .attr("x", (d, i) => i * blockWidth + blockWidth / 2)
  .attr("y", blockHeight + 12)   // exactamente debajo
  .attr("text-anchor", "long")
  .attr("font-size", "12px")
  .text(d => d);

});