Need to add extra ticks on y axis for D3 Heat Map Project

1

Im currently busy figuring out FreecodeCamp heat map project. I got stuck with the first tick on the y axis being too close to x axis.All graph points matching january coordinates will cross x axis.How could i add more ticks the top and bottom of y axis to prevent data from going over x axis. Here is my current version thus far.Thank you for any advice in this issue.My current Heat Map version

2

Hey @AJAX204, I’m just finishing up this same project on my own, and one thing that I did to avoid what I believe to be the same problem you’re having is to give both axes some padding. Here’s my CodePen for this project, it’s not quite finished but you can see that I went about creating the axes in the same way you did, but also included the side length of my cells in the transform properties so that the cells themselves are not right up against the axis:

let yAxis = d3.axisLeft(yScale).tickFormat(d => monthString(d));
  svg
    .append("g")
    .attr(
      "transform",
      "translate(" + (leftPadding - cellLength) + ", " + topPadding + ")"
    )
    .attr("id", "y-axis")
    .call(yAxis);

Is that at all helpful? I hope I’m understanding the problem you’re running in to.

3

I finally found a way to add ticks to y axis at the top and bottom of y axis to prevent graph from overflowing on my x axis. Here is my solution

(async () =>{
try {
const dataLink = await(d3.json(‘https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json’))
console.log(dataLink)

const myMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const myData = dataLink["monthlyVariance"];
let yearParser = d3.timeParse("%Y");
let yearScale = d3.timeFormat("%Y");
const minVal = d3.min(myData,d => yearParser(d["year"]))
const maxVal = d3.max(myData,d => yearParser(d["year"]))

let dateParser = d3.timeParse("%B")
let dateScale = d3.timeFormat("%B")
const minDate = d3.min(myMonths,d => dateParser(d))
const maxDate = d3.max(myMonths,d => dateParser(d))

console.log(minVal)
console.log(maxVal)

const padding = 60;
const h = 1001;
const w = 1000;

const svg = d3.select(‘body’)
.append(‘svg’)
.attr(‘height’,h)
.attr(‘width’,w)

const xScale = d3.scaleTime()
                .domain([minVal,maxVal])
				.nice()
                .range([padding,h-padding])
	
const yScale = d3.scaleLinear()
                .domain([1,25])
				//.nice()
                .range([w - padding,padding])	
	
	
const xAxis = d3.axisBottom(xScale).ticks(15).tickFormat(yearScale)
const yAxis = d3.axisLeft(yScale).ticks(3).tickValues([2,4,6,8,10,12,14,16,18,20,22,24]).tickFormat((d,i)=> myMonths[i])

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

svg.append(“g”)
.attr(“transform”, translate(${padding} , 0))//onthou ${}verteenwoordig exspression wat twee variables bymekaatr sit.
.attr(“id”,“y-axis”)
.call(yAxis)

} catch(error) {
console.log(error);
}
})();