D3.js version 7 - Choropleth: User Story 6 and 7 FAIL

[LLL]

Firstly, thank you to the many people who make FCC possible, and to those who donate their time and effort to make the forum a genuine resource. I am passionate about data analysis and the availability of these resources does a lot to level the playing field for me personally as someone who does not have a background in computer science or experience in web development.

I am motivated to complete the D3.js projects using the latest version, which currently is version 7. I am working on the choropleth and am having some difficulty satisfying User Story 6 and User Story 7. I am getting the following errors:

6. My Choropleth should have a county for each provided data point

• expected 3141 to equal 3142

7. The counties should have data-fips and data-education values that match the sample data

• Choropleth does not contain all fips from sample data : expected -1 to not equal -1

As far as I can tell, my code does not differ substantially from others that pass these tests. These errors suggest to me that one of the path objects is not being rendered for some reason.

I do not know what User Story 6 and 7 are actually testing for. Maybe if I knew I could trouble shoot more efficiently. But as it is I feel I am sinking a lot of time poking around in the dark for some nugget of truth to guide me toward a solution.

Any suggestions or guidance would be greatly appreciated.

The relevant sections of my code are reproduced below. My code pen can be seen at the link:

D3.js v7 - choropleth

// Get data
Promise.all([d3.json(COUNTY_FILE), d3.json(EDUCATION_FILE)])
  .then((data) => {
    let top = data[0] // topology file
    let edu = data[1]
    choropleth(top, edu)
  }

// Choropleth 
// OBS: max index reached is 3141 
const path = d3.geoPath()
function choropleth(top, raw) {
  const geo = topojson.feature(top, top.objects.counties).features
  console.log(geo.length)  // Show geo has 3142 elements
  svg
    .selectAll('path')
    .data(geo)
    .enter()
    .append('path')
    .attr('class', 'county')
    .style('fill', function (d, index) { 
      const result = raw.filter(function (elem) {
        return elem.fips === d.id
      })
      if (result[0]) {
        return color(result[0].bachelorsOrHigher)
      }
      else {console.log('could not find data for: ', d.id)}
      return color(0)
    })
    .attr('data-fips', function (d, index) {
      //console.log(index)
      return d.id
    })
    .attr('data-education', function (d) {
      const obj = raw.filter(function (elem) {
        return elem.fips === d.id
      })
      if (obj[0]) {
        //console.log('education level', obj[0].bachelorsOrHigher)
        return obj[0].bachelorsOrHigher + '%'
      }
      // could not find a matching fips id in the data
      else {console.log('could not find data for: ', d.id)}
      return 0
    })
    .attr('data-location', (d) => {
      let result = raw.filter(function(elem) {
          return elem.fips === d.id
      })
      if (result[0]) {
        return (
          result[0]['area_name'] +
          ', ' +
          result[0]['state']
        )
      }
      else {console.log('could not find a matching fips' + elem.fips + 'id' + d.id + 'id')}
      return 0
    })
    .attr('d', path)
}

[jeremy.a.gray]

You’re missing a county (Marion County, Arkansas; one of the middle ones on the northern border), which just happens to be the first one in the county data, which means you have an off by one somewhere. I didn’t attempt to track it down.

The codepen link is sufficient, but if you want to post code, please enclose it in a code block (the </> button in the post editor).

[jwilkins.oboe]

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 it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).