Help with my codepen for Choropleth map

#1

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 !

#3

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.

#4

d3.queue is removed in d3 v5, you can use promise.all instead. see https://github.com/d3/d3/releases/tag/v5.0.0

3 Likes
#5

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

d3.queue()
  .defer(d3.json, US_GEO_DATA)
  .defer(d3.json, US_EDU_DATA)
  .await(analyze);

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

}
#6

Eureka! :tada: This works:

 41 Promise.all([d3.json(US_GEO_DATA), d3.json(US_EDU_DATA)]).then(analyze);
 42   
 43 function analyze(dataset) {
 44      
 45     const [geoData, eduData] = dataset
 46 
 47 
 48 
 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 => d.id)
 61        .attr('data-education', d => eduData.filter(item => item.fips === d.id)[0].bachelorsOrHigher);
 62 
 63 }

Good suggestion! :bulb:

#7