Data Visualization Projects - Visualize Data with a Heat Map (Facing Issues)

Data Visualization Projects - Visualize Data with a Heat Map (Facing Issues)
0

#1

Hi there again folks. I seem to have trouble with the y-axis for this project. I can’t seem to be able to get the y-axis to show each month in between the cells. Is there any way to get the months to not start at the bottom of each cell but in the middle. Here is the link to my pen to get a better picture. Thanks in advance :slight_smile:

const height = 700;
const width = 1500;
const padding = 70;
const url =
https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json”;

d3.json(url, function (data) {

let datum = data.monthlyVariance.map(item => item)

let newWidth = padding*2 + (datum.length/12)*4;

let yearValue = datum.map(item => item.year)

let monthValue = datum.map(item => item.month)

let timeFormat = d3.timeFormat("%B");

const months =[‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]

let colorArray = ["#0015ff","#00d4ff","#00ffbf","#00ff65","#19ff00","#6eff00","#b6ff00","#eeff00","#fffa00","#ffe100","#ffb600","#ffa500","#ff9400","#ff6600","#ff5400","#ff3f00","#ff0000"]

let tip = d3
.select(".innerContainer")
.append(“div”)
.attr(“class”, “tool-tip”)
.style(“opacity”, 0.6);

let xScale = d3
.scaleTime()
.domain([d3.min(yearValue), d3.max(yearValue)])
.range([0, (datum.length*4)/12]);

let xAxis = d3.axisBottom(xScale).tickFormat(d3.format(“d”));

let yScale = d3
.scaleLinear()
.domain([0, 12])
.range([0, d3.max(monthValue)*35]);

let yAxis = d3.axisLeft(yScale).tickFormat((d)=>months[d-1]);
d3.axisLeft(yScale).tickFormat(timeFormat);
let tempArray = datum.map(item => (item.variance + data.baseTemperature).toFixed(2));

const svg = d3
.select(".innerContainer")
.append(“svg”)
.attr(“height”, height)
.attr(“width”, newWidth);

svg
.selectAll(“rect”)
.data(datum)
.enter()
.append(“rect”)
.attr(“class”, “cell”)
.attr(“data-month”,(d,i) => d.month)
.attr(“data-year”, (d,i) => d.year)
.attr(“data-temp”, (d,i) => data.baseTemperature + d.variance)
.attr(“x”, (d, i) => padding + xScale(d.year))
.attr(“y”, (d, i) => padding + yScale(d.month))
.attr(“width”, 4)
.attr(“height”, 35)
.attr(“fill”, (d,i) => {
if(tempArray[i] < 2){return colorArray[0]}
else if(tempArray[i] < 3) {return colorArray[1]}
else if(tempArray[i] < 4) {return colorArray[2]}
else if(tempArray[i] < 5) {return colorArray[3]}
else if(tempArray[i] < 6) {return colorArray[4]}
else if(tempArray[i] < 7) {return colorArray[5]}
else if(tempArray[i] < 8) {return colorArray[6]}
else if(tempArray[i] < 8.5) {return colorArray[7]}
else if(tempArray[i] < 9) {return colorArray[8]}
else if(tempArray[i] < 9.5) {return colorArray[9]}
else if(tempArray[i] < 10) {return colorArray[10]}
else if(tempArray[i] < 10.5){return colorArray[11]}
else if(tempArray[i] < 11) {return colorArray[12]}
else if(tempArray[i] < 12) {return colorArray[13]}
else if(tempArray[i] < 13) {return colorArray[14]}
else if(tempArray[i] < 14) {return colorArray[15]}
else {return colorArray[16]}
})
.on(“mouseover”, function(d,i) {
tip
.style(“opacity”, 0.7)
.attr(“id”, “tooltip”)
.attr(“data-year”, d.year)
.attr(“class”,“tool-tip”)
.html((d.month == 1? “January” : d.month == 2? “February” : d.month == 3? “March” : d.month == 4? “April” : d.month == 5? “May” : d.month == 6? “June” : d.month == 7? “July” : d.month == 8? “August” : d.month == 9? “September” : d.month == 10? “October” : d.month == 11? “November” : d.month == 12? “December” : null) + " - " + d.year + “
” + ((data.baseTemperature + d.variance).toFixed(2)) + “°C” + “
” + (d.variance<=0? ${d.variance.toFixed(2)}°C: +${d.variance.toFixed(2)}°C))
.style(“left”, d3.event.pageX-75 + “px”)
.style(“top”, d3.event.pageY - 60 + “px”)
})
.on(“mouseout”, function(d) {
tip.style(“opacity”, 0);
});

let legend = svg.append(“g”)
// .classed(“legend”, true)
.attr(“id”, “legend”)

legend.append(“g”)
.selectAll(“rect”)
.data(colorArray)
.enter()
.append(“rect”)
.attr(“class”,“legend”)
.attr(“x”, (d, i) => padding + i*41)
.attr(“y”, (d, i) => height - padding - 25)
.attr(“width”, 40)
.attr(“height”, 25)
.attr(“fill”,(d,i) => d)

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

svg
.append(“g”)
.call(xAxis)
.attr(“class”, “xAxis”)
.attr(“id”, “x-axis”)
.attr(“transform”, translate(${padding}, ${padding+35*13}));

svg
.append(“text”)
.text(“Monthly Global Land-Surface Temperature”)
.attr(“id”, “title”)
.attr(“transform”, translate(${newWidth / 2 - 300},${padding - 30}));

svg
.append(“text”)
.text(“Base Temperature : 8.66 °C”)
.attr(“id”, “description”)
.attr(“transform”, translate(${newWidth / 2 - 80},${padding}));

let legendArray = [2.0,3.0,4.0,5.0,6.0,7.0,8.0,8.5,9.0,9.5,10.0,10.5,11.0,12.0,13.0,14.0]

let legendAxis = svg.append(“g”)
.attr(“id”, “legendAxis”)

svg.append(“g”)
.selectAll(“text”)
.data(legendArray)
.enter()
.append(“text”)
.attr(“class”, “legendAxis”)
.text((d,i) => d.toFixed(1))
.attr(“x”,(d,i) => i*40 + padding + 32)
.attr(“y”, height - padding + 13)

})


#2

It’s ok. Found a way