D3 ticks not work

Tell us what’s happening:
I cannot to reduce the number of ticks:

const xAxis = d3.axisBottom(xScale)
        .ticks(4);

I resolved the above issue with the following code:

const xAxis = d3.axisBottom(xScale)
        .tickValues(xScale.domain().filter((d, i) => d % 10 === 0));

The above code is not works at all and I don’t know why…
I also complete this challenge. So far it was the most difficult me.
The color legend challenge been resolve with a mule-solution.
If anyone knows how to code better in v5 please send a little answer or any link.
The code on codepen collapse with several error on console.
But on the web run on every browser.

Codepen: https://codepen.io/anon/pen/axaPYN

Your code so far

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

// set the dimensions and margins of the graph
const  margin = {
    top: 30, 
    right: 30, 
    bottom: 30, 
    left: 30
};
const width = 2160 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#svgContainer")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", `translate(${margin.left}, ${margin.top})`);

const render = data => {
    console.log(data);
    console.log(data.monthlyVariance);
    // Labels of row and columns
    
    // Build x scales and axis:
    const xValue = d => d["year"];
    const xScale = d3.scaleBand()
        .domain(d3.map(data.monthlyVariance, d => d.year).keys())
        .range([0, width]);
    
    const xAxis = d3.axisBottom(xScale)
        .ticks(4);
    
    svg.append("g")
        .style("font-size", 15)
        .attr("transform", `translate(0, ${height})`)
        .call(xAxis);
    
    // Build y scales and axis:
    const yValue = d => d["month"];
    const yScale = d3.scaleBand()
        .domain(d3.map(data.monthlyVariance, d => d.month).keys())
        .range([height, 0]);
    console.log(xScale.domain())
    
    const yAxis = d3.axisLeft(yScale);
    
    svg.append("g")
        .style("font-size", 15)
        .call(yAxis);
//    svg.selectAll(".domain").remove()
    
    // Build color scale
    const myColor = d3.scaleSequential()
        .interpolator(d3.interpolateInferno)
        .domain([1, 100]);

    // create a tooltip
    const tooltip = d3.select("#svgContainer")
        .append("div")
            .style("opacity", 0)
            .attr("class", "tooltip")
            .style("background-color", "white")
            .style("border", "solid")
            .style("border-width", "2px")
            .style("border-radius", "5px")
            .style("padding", "5px");

    // Three function that change the tooltip when user hover / move / leave a cell
    const mouseover = function(d) {
        tooltip.style("opacity", 1);
        d3.select(this)
            .style("stroke", "black")
            .style("opacity", 1);
    };
    const mousemove = function(d) {
        tooltip.html(`${d.year}. ${d.month}: ${d.variance}`)
            .style("left", (d3.mouse(this)[0] + 250) + "px")
            .style("top", (d3.mouse(this)[1] + 120) + "px");
    };
    const mouseleave = function(d) {
        tooltip.style("opacity", 0);
        d3.select(this)
            .style("stroke", "none")
            .style("opacity", 0.8);
    };
    // add the squares:
    svg.selectAll()
        .data(data.monthlyVariance)
        .enter()
        .append("rect")
            .attr("x", d => xScale(d.year))
            .attr("y", d => yScale(d.month  ))
            .attr("rx", 4)
            .attr("ry", 4)
            .attr("width", xScale.bandwidth())
            .attr("height", yScale.bandwidth())
            .attr("fill", d => myColor(d.value))
            .style("stroke-width", 4)
            .style("stroke", "none")
            .style("opacity", 0.8)
        .on("mouseover", mouseover)
        .on("mousemove", mousemove)
        .on("mouseleave", mouseleave);
};

//Read the data
d3.json(url)
    .then(data => {
    render(data);
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36 OPR/62.0.3331.72.

Link to the challenge:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums