This Endless Frame

ZIP Code Highlighter

Use the slider below to highlight a given range of US ZIP codes.

The above scatter plot of ZIP codes has lightness encoding such that lower ZIP codes are darker and higher ZIP codes are lighter. The gray points are also plotted with transperency to help render the 40,000 ZIP codes.

The orange shows the highlighted range of selected ZIP codes. The highlighting always shows 500 ZIP codes.

Very roughly speaking, ZIP codes increase from east to west but they are not particularly boustrophedonic.

The above visualization uses D3.js It was generated using Gemini CLI based on this Streamlit implementation.

The porting prompt was:

For the input data file, us-48_zip_codes-lat_lon-1f.tsv.zip, and the input 
python file, zip_code_highlighter.py, a data visualization of the US zip codes 
is created.
Read the python file and modify to replace usage of the streamlit library 
with a version using only standard javascript and the d3.js visualization 
library only. The revised version should not use any python.
Save the ported javascript code to the file zip_code_highlighter_d3.js.
Save an example index.html file which shows the usage of the zip code 
highlighter javascript.
Save this prompt to the file prompt_zip_highlight_d3.txt and stop.

The end result is Python and Streamlit were ported to JavaScript and D3.js using Gemini CLI.

This workflow allows quick protoyping with Python and then static deployment via JavaScript. The resulting D3.js is also less prone to rendering artifacts and the animation is smoothly updated.

And the above interface rendered as an animated gif using screenshots_to_gif.py :