Data Visualization Projects - Visualize Data with a Choropleth Map

[kzowada]

Tell us what’s happening:

Hey Guys, hope someone is able to point to a direction on how to solve my problem.
Im currently trying to code the Legend but im struggling with 2 things. First i dont really know how to compute the numbers under the ticks to be the same as in the solution. (I could easily look up the code with devtools but I’m trying to find a solution on my own). And second the rect elements tha show the colors in my legend: How do I compute the correct x Coordinate so that they align within the Axis of the legend. I hope sombody can help.

Your code so far

const colorShades = ["#efe1fd", "#cea5f9", "#ae69f6", "#8e2df2", "#6e0dd2", "#4e0996", "#2f065a", "#10021e" ]

function shader (percentage) {
    switch (true) { 
        case percentage <= 3.0 :
            return colorShades[0]
        case percentage <= 12.0 :
            return colorShades[1]
        case percentage <= 21.0 :
            return colorShades[2]
        case percentage <= 30.0 :
            return colorShades[3]
        case percentage <= 39.0 :
            return colorShades[4]
        case percentage <= 48.0 :
            return colorShades[5]
        case percentage <= 57.0 :
            return colorShades[6]
        case percentage <= 66.0 :
            return colorShades[7]
    }
}



const mapRequest = fetch("https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json")
.then(response => response.json());
const educationRequest = fetch("https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json")
.then(response => response.json());

Promise.all([mapRequest, educationRequest])
    .then(([data1, data2]) => {
        const countyData = data1;
        const educationData = data2;
        
        //console.log(countyData.objects.counties);
        //console.log(educationData[0])

    let svg = d3.select("svg");

    let path = d3.geoPath();

    const xScale = d3.scaleLinear().domain([2.6, 75.1]).rangeRound([600, 960]);

    const legend = d3.axisBottom(xScale);

    let legendAxis = svg.append("g")
        .attr("transform", "translate(0, 30)")
        .attr("id", "legend")
        .call(legend)

    legendAxis.selectAll("rect")
        .data(colorShades)
        .enter()
        .append("rect")
        .attr("height", 10)
        .attr("width", 50)
        .attr("fill" , (d) => {
            return d
        })
        .attr("x", (d, i) => {
            
        })
        .attr("y", 0)

    svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(countyData, countyData.objects.counties).features)
    .enter()
    .append("path")
    .attr("data-fips", function(d) {
        return d.id + "";
    })
    .attr("data-education", function(d) {
        let dataEdu = educationData.filter( (eduData) => eduData.fips == d.id);
        return dataEdu[0].bachelorsOrHigher + ""
    })
    .attr("fill", function(d){
        let dataEdu = educationData.filter ( (eduData) => eduData.fips == d.id);
        let color = shader(dataEdu[0].bachelorsOrHigher);
        return color;

    })
    .attr("d", path)

    /*svg.append("path")
        .datum(
            topojson.mesh(countyData, countyData.objects.states, function(a, b) { 
                return a !== b; 
            })
        )
        .attr("class", "states")
        .attr("d", path) */
        
    })

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:120.0) Gecko/20100101 Firefox/120.0

Challenge Information:

Data Visualization Projects - Visualize Data with a Choropleth Map

freeCodeCamp.org