Choropeth map project ,need some help please?

[agate]

Hi all.
I just would like to know if I’m on the right track?
Here’s my codepen:

codepen

Only, I don’t see the map yet, and I think I should with my code so far?

I mainly used this link as a reference:
observable link

and this one:

blocks org

Thanks

[agate]

Shouldn’t I see something with what I have so far?
Or do I need to add states and counties separately still ?

I’m not sure which direction to go right now, online resources are limited.

Thanks

[jeremy.a.gray]

Well, it looks like you got the map drawn, which is the first hard part. The second hard part is merging the datasets by using their common fips/id key. You need a combined data structure with the paths for the map and the education data so that you can create each county path on the svg and attach the fips and education data to it as attributes.

After that, it’s the same old legend and tooltips as the other D3 projects.

[agate]

I’m stuck still. I’ve browsed tutorial code examples, but the explaination is limited.
Am I even close to getting the color fill correct ? I’ve tried to add a new property for degree (line 23) in counties, after matching id/fips in both json files.
As I saw done here:
blocks.org link

Hope someone is willing to take a look.
Thanks

[agate]

I’ve spend the evening searching and trying to solve this, to no avail.
Hope someone can take a look .
So this is especially about lines 23 and 42, why color(d.properties.value);
is not correct?

I’ve seen it done similarly in a tutorial.

Thanks

[jeremy.a.gray]

Unfortunately, the choropleth is more advanced than your usual tutorial level. Plus, many of the tutorials use older versions of D3 and aren’t completely relevant any more. In this bit of code

         .attr("fill",function(d,i){
             //this does not work
             // return color(d.properties.value);
         })

add a console.log(d.properties.value); and you’ll get undefined, which means your definition of d.properties.value is incorrect. If you just return a color here, like return "#005900";, it works. You just need the correct value to pass to a color scale to get a color…