Creating an interactive map or search by zip, city & state, or county then API request?

Hi Guys,

Been working my way through the tutorials and some other reading material suggested by other members, and am very happy I stuck it out with observable. Things are starting to click! :slight_smile: I have to say reading the article on ES modules has pulled the curtain back on a whole other world. Seeing how compartmentalized the script is using observable and modules in general really makes the scripts much easier to understand. :smiley:

I’ve been working through some of the visualizations and I came across this census based visualization by Logan Williams and created my own fork to tinker with it a bit. The script presentlly provides a visualization of all counties in the US based on any variable provided by the US census based on user inputs and works very well. Here’s the code: Census Data Request. I ‘think’ I’m using the ‘fork’ functionality of Observable correctly? Now you guys can go right to my code to review it and make any changes you see fit, correct? (or do I need to publish the forked version first?)

Presently, the notebook above only provides a visualization of all counties in the US and the user requested stats. (I say ‘only provides’ but it’s actually very impressive how a few lines of code could create something so versatile and rich with data!)

I’d like to expand the functionality to allow the user to select the specific area (and resulting map displayed) based on their input. Based on what I’ve read so far from the ES6 modules, I believe I’ll need to run multiple module ‘instances’ to provide the specific ‘view’ I’m looking for.

First, I’d like to allow the user to search any area in the US (and preferably Canada as well) by any of the following criteria:

  1. Country
  2. State (or Province in CAN)
  3. City or County
  4. Zip
  5. Neighborhood

I’m guess the first thing I need to do is determine if there are any modules that can allow people to search by the above criteria. From what I’ve read about the Census API, it searches based on FIPS codes (if memory serves me correctly). I’m guessing that means the first module instance should look at the search criteria provided - Country, Country/State, Country/State/City, Country/Zip, or Country/State/(maybe city?)/Neighborhood, and decide how to select the appropriate map and draw it. Is there a topojson or geojson file that I could reference that would provide the parameters I’m looking for?

Once the map has been drawn, I think the rest of the code should be almost identical to what Logan put together in his notebook (again…very impressive Logan!). This would be the 2nd module instance that would be returned by the program. By default, the map would be populated with some default data, like say maybe the population growth over the last 10 years. The user would then request the variable(s) they seek - like say maybe the number of individuals over 21 - and the resulting map would be populated with the data.

I’m still trying to learn all the terminology, so please let me know if I’ve used any terms like view or instance in the wrong fashion. Thanks in advance!!

Hi there!

Regarding forking and sharing - after you fork, you’ll need to share. Currently you’re set to ‘Private’.

Have a look here for a tutorial:

Although I doubt I’m the one to help with this (and know nothing of ES6 modules just yet), I’d also encourage you to continue digging through the examples shared on this site to see if there are a few you can use to ‘mix and match’. For example, this globe zooms in to various administrative levels in China, then provides some data (with very interesting styling):

And it appears to be a fork of this globe:

In other words, you might be best served making just the minimal modifications to an existing notebook.

Keep us posted on your progress!

1 Like

One more that might be close to what you’re after:

1 Like