D3 Choropleth Test #12

1
12. My tooltip should have a "data-education" property that corresponds to the "data-education" of the active area.
Tooltip's "data-education" property should be equal to the active area's "data-education" property: expected '15.9' to equal '18.1'

I’ve been at this for a while now, changing values between the data-education attribute in my path and in my tooltip. I can freely swap between passing Test #7 and Test # 12, but I can’t get them both to pass at the same time.

The current iteration of my code was the last straw before I asked for help. I wrangled this code in ways that seem insane to me but I still can’t get the values to match…which is confusing because when Test #7 is passing, my tooltip displays the correct value for the county I’m hovering…so I don’t know where these non-matching numbers are coming from.

I cannot wait to get through this D3 certification and I hope I never see it again as long as I live…determination and stubbornness are the only things keeping me going at this point…

2

I’m also stuck on this challenge, specifically with how to join the data.

let result = attainmentData.filter((obj) => obj.fips == d.id);

I see you did a callback function to match the data here but don’t understand it.
I can see “fips” in the Education data but can’t find “id” in the counties data.

Your error seems to be the data is not matching??

Tooltip’s “data-education” property should be equal to the active area’s “data-education” property: expected ‘23.3’ to equal ‘28.1’

But I don’t know USA so would not know if the counties are correct?

3

I’m still lost on this one. It makes no sense to me how Test #12 is failing. The tooltip displays the data-education value, and I’ve checked multiple counties through the data; all the values in data-education are correct in the tooltip. Then, according to Tests #5 and #7, the data-education values are correct for the counties themselves.

If both data-education attributes are displaying correct values, how do they not match?

As for d.id, if you look at the county URL you’ll see that each area has an id that matches the fips value in the education URL. By comparing the two, you can make sure that you’re matching the right educational data with the right county.

As a side note, it seems like Test #5 and #7 are nearly identical tests. I’ve read them several times but I don’t really see how they’re different. At one point I was passing Test #5 but not Test #7, so they must be, but the language isn’t very clear.

I wish I could help you by helping myself, but I’ve moved on for the moment to other things. I hate to do this, @SpaniardDev, but it looks like I need your help again. The fCC help forum is practically dead on all matters D3-related except for you, profesor.

4

Hi there,

Had a look into your code and the issue relies on how you handle the data. You’re using different array indices: one for the tooltip and another for the map.

// Line 96
(d,i) => attainmentData[i].fips)
// And line 98
(d,i) => dataByFIPS[attainmentData[i].fips])
// ...
// From line 112 to 116
tooltip.html(
  countyByFIPS[d.id] + ", " + stateByFIPS[d.id]
  + "</br>"
  + dataByFIPS[d.id] + "% Attainment"
)

As you can see, you’re getting the FIPS and education values from attainmentData (in order of appearance in the raw data as you are getting them by their array indices) and then you’re getting the county, state and FIPS by their FIPS value to create the tooltip. This means your data is not consistent and that’s why you were getting different FIPS and education values for the same state.

That being said, you need to make two little changes in your code.

Replace your code from lines 95 and 98:

.attr('data-fips', 
  (d,i) => attainmentData[i].fips)
.attr('data-education', 
  (d,i) => dataByFIPS[attainmentData[i].fips])

With this:

.attr('data-fips', d => d.id)
.attr('data-education', (d,i) => dataByFIPS[d.id])

This way, both the tooltip and the map are using the same data because both are getting their values depending on their FIPS id (d.id) and not the index in the source of data. And now, the tests are all green. Yay! :smiley:

I didn’t look anything else in your code so, if you notice anything wrong just let me know.

PS: Oh, yes. After line 68, where you’re pairing data with FIPS, you’re initializing your variables as an object:

let dataByFIPS = {};

And then, you’re using it as an array:

attainmentData.forEach((d) => dataByFIPS[d.fips] = d.bachelorsOrHigher );

Just saying :smiley:

5

I feel like I owe you money or something at this point. Not sure what I’d do without your help here.

6

LOL. No problem, dude. Just make sure to get the concepts :smiley:

1 Like