You might want to move some of the code around; I'm just having them all together
// Quantize evenly breakups domain into range buckets
const color = d3
.scaleQuantize() //color buckets depending on data, scaleQuantize breaks up domain into ranges for different colors
.domain([0, d3.max(data, (d) => d.extremely_poor)])
.nice() //color distribution, from 0 to 23 extremely poor
.range(d3.schemeGreens[9]); // replace 9 with number of bins desired
// builds legend and places it on the HTML
d3.select("#legend")
.node() // creates node and then appends child to it (ie. legend)
.appendChild(
Legend(color, {
title: "Extreme Poverty Level",
tickFormat: (d) => Math.floor(d),
})
);
Replace this https://github.com/magabrielaa/CAPP30239_FA22/blob/cdb6d7b38f7786ad0174965bc98c5eb3c0bd37e3/final_project/chart1.js#L36-L39
and this
https://github.com/magabrielaa/CAPP30239_FA22/blob/cdb6d7b38f7786ad0174965bc98c5eb3c0bd37e3/final_project/chart1.js#L42-L53
with:
You might want to move some of the code around; I'm just having them all together