Help with my codepen for Choropleth map

Help with my codepen for Choropleth map


Hi All !

This week I have run into bugs that I have just not been able to figure out.
Like today, I finished my Choropleth map, and it works fine on my computer, but when I load it to Codepen, it does not work and it will not give me any errors or feedback.
Could you take a look at it and see if I am missing something?
I did Add the external Scripts/Pens for jQuery, D3 and D3.queue .

Many thanks !


Fixed the issue.
Codepen did not like d3.queue, change to d3.json call. I was only calling one file through d3. The second file I was calling it through jQuery. Why? Because I can ! je je
Thanks anyways.

Still stuck in text 9 & 10 of the heat map.


d3.queue is removed in d3 v5, you can use promise.all instead. see


@akidox Please, how do I fix to v5 this code? (edited: solution below. Good suggestion. :bulb: )

  .defer(d3.json, US_GEO_DATA)
  .defer(d3.json, US_EDU_DATA)

function analyze(error, geoData, eduData) {
    if (error) throw error;
// #Draw counties
    const topojsonObj = topojson.feature(geoData, geoData.objects.counties);
    const topojsonData = topojsonObj.features;
       .attr('class', 'counties')
       .attr('class', 'county')
       .attr('d', path)
       .attr('data-fips', d =>
       .attr('data-education', d => eduData.filter(item => item.fips ===[0].bachelorOrHigher);



Eureka! :tada: This works:

 41 Promise.all([d3.json(US_GEO_DATA), d3.json(US_EDU_DATA)]).then(analyze);
 43 function analyze(dataset) {
 45     const [geoData, eduData] = dataset
 49 // #Draw counties
 50     const topojsonObj = topojson.feature(geoData, geoData.objects.counties);
 51     const topojsonData = topojsonObj.features;
 52     svg.append('g')
 53        .attr('class', 'counties')
 54        .selectAll('path')
 55        .data(topojsonData)
 56        .enter()
 57        .append('path')
 58        .attr('class', 'county')
 59        .attr('d', path)
 60        .attr('data-fips', d =>
 61        .attr('data-education', d => eduData.filter(item => item.fips ===[0].bachelorsOrHigher);
 63 }

Good suggestion! :bulb: