Map attempt returns black box | requesting help to diagnose

Community Help
1

Hello Observable Community!

I am working on a visualization of increased habitation at a coastal settlement area between 2010 and 2017. I managed to sketch out all the vector files for one year (2011) and from this to create a working d3 visualization using the standard web visualization approach.

I would like to get this map working in the context of Observable so that I may play around with legends, pop-ups, etc (without all the hassle of a traditional development environment) , but it seems that I am still struggling on the basics. Specifically, I am only able to produce a black box instead of a map:

I’ve tried to replicate the approaches represented in Mike’s D3 Choropleth map and Tom’s Google Maps example , but regardless of whether I render the map in a <div> element or return it as an svg node, the output is the same.

If you’re reading this, could you please help me to understand if my problem with how the map is generated, or is it with how I am referencing the data? I’ve tried entering the GeoJSON data locally (within the context of d3 – my preferred approach) and via URL links (from the github example). Still no dice.

I’d be happy for any help, feedback and guidance!

Thank you in advance for your time and consideration.

Sincerely,

Aaron

2

Here’s a version with something showing:


Not sure if this is what you want, but, briefly, I got rid of the black rectangle that was being appended to the svg and I removed the stuff with d3-queue, as you already loaded the geojson files.

1 Like
3

Thanks @Evan! This certainly did the trick. I dropped in a bit of CSS to define color and transparency for the vector layers and now it’s looking just like the GitHub version. I appreciate your help to point out and correct my mistakes. Thanks again!

I’m looking forward to building on this map – trying to add in an interactive legend and mouse-over tooltips. Thank you so much for getting me started!

Sincerely,

Aaron