From Python Maps to Web Deployment: Building Interactive Data Visualizations

type

Post

status

Published

date

Nov 6, 2025

slug

gis

summary

Learning the Foundations

At the beginning, I was mainly learning how to use Python packages like GeoPandas, Folium, and Flash. I went through their documentation on GitHub and practiced by building a simple color map of Bridgeport using Shp data. I also created another sample map for a different area to test what I learned. This stage was really about understanding how these libraries work and how to use them to process and visualize spatial data.

Map1 Bridgeport

Map in Bridgeport

This map is a choropleth map of Bridgeport built using Python with GIS/shapefile data

Map2 Tampa

Map in Tampa

Moving to Dynamic Visualization

Once I got comfortable with the basics, I moved on to a more advanced project using data from the DMV area. I wanted to create something interactive, so I built a time-slider map that showed how values changed over time, using both size and color to represent the data.

Map3-1 Time-slider

Map in DMV area

A time-slider map that dynamically displays the time-series data by size and color.

Note: I am still working on delploying the map on webiste.

Map3-2 Dashboard

Map in DMV area

I also added a dashboard feature where clicking on a point—like node 3718 or others—would display a line chart of the AADT (Annual Average Daily Traffic) trends. This involved generating the map locally in HTML and integrating it with interactive charts, which was a big step forward in making the map dynamic and insightful.

A dashboard that can dynamically display the time-series trend of the AADT values. The following shows the example node in anticlockwise.

Note: I am still working on delploying the map on webiste.

Deploying to the Web

Once I had mastered dynamic mapping locally, I moved on to making my work accessible online. I expanded the DMV map to include features like filtering highways based on AWDT, differences between real-time and model values, and later a metric called PRCLOADCHG. This time, I transitioned from Python to a pure web-based approach—uploading data files, building index.html pages, and hosting everything via GitHub Pages with support from AI. This phase was a different kind of challenge. I had to think about scalability, user accessibility, and how to deliver an interactive experience outside of my own machine. I also came back and deployed the past map online, which is why you’d see the online version for phrases one and two here. Seeing my maps live on the web felt like a major accomplishment—it showed that my work could be functional and impactful beyond just a development environment.

Map4-1 Average Weekday Traffic & Percentage Load

Filtered Map

Four filters are added here.

This set of filters is applied to capture changes in highway performance between the base year 2023 and the forecast year 2045.

AWDT (Average Weekday Traffic) > 0 ensures that only active road segments are considered.

CNT2LOADPCT(Percentage Load from Second Count Period) > 20 filters out highways where traffic loading increased substantially (more than 20%).

CNT2LOADDIF < -20 or > 20 ensures only large differences in load are mapped.

ABSPCTDIFF > 1 highlights where the relative percent change exceeds a threshold, removing noise from minor fluctuations.

👉 These filters help planners identify major network stress points (roads that are projected to see the greatest increases or decreases in traffic between 2023 and 2045).

Note: Double-click the filter to show it on the front layer.

Map4-2 Percentage Change in Traffic Load

Filtered Map in DMV Area

This set of filters looks at the incremental growth between 2035 and 2045, not the full 20+ year span.

Instead of absolute differences, filters are defined in terms of percent change ranges (PRCLOADCHG).

Example:

Filter 3: PRCLOADCHG -0.5 to -0.4

This is a moderate decrease, representing a drop of 40% to 50%. This level of change suggests a noticeable but not extreme reduction in traffic flow. Filter 7: PRCLOADCHG -0.1 to 0

This range represents minimal to no decrease, showing traffic that is largely stable or has a negligible reduction. This is a common category for many segments that are not heavily impacted by the model's projections.

Filter 16: PRCLOADCHG > 1

This represents an extreme increase, with traffic volume more than doubling. These segments are a priority for further analysis as they indicate a critical projected change in the transportation network, possibly due to a major new road or interchange.

(-1,0.5) = major decrease.
(-0.5, 0) = small decreases.
(0, 0.5) = small increases.
(0.5, 1) = moderate increases.
> 1 = major increases.

Including all these ranges allows for a finer-grained analysis of how traffic loads evolve within these 10 years.

👉 These filters are chosen to detect incremental changes in growth patterns, which is useful for mid-term planning, capacity improvements, and monitoring whether the network is gradually reaching stress thresholds. It allows for a clear, interpretable visualization of specific change magnitudes, serving as an effective compromise between data detail and file size limitations, as it avoids a single, massive file by distributing the data across 16 smaller, more manageable GeoJSON files.

Note: It may take a few seconds to load this website. Double-click the filter to show it on the front layer.

Map4-3: Predicted Change in Annual Log Growth

Filtered Map in DMV Area

The map illustrates the spatial distribution of the key variable PRCANLGRW, which represents the predicted change in annual log growth of traffic volumes along highway segments. Sixteen filters are applied to highlight different modal outcomes associated with this variable. The color scale conveys how the predicted growth compares to the actual observed growth: darker blue tones indicate more negative deviations (areas where predicted growth is lower than actual growth), while darker red tones represent more positive deviations (areas where predicted growth exceeds actual growth). As the colors become lighter or more neutral, they reflect diminishing differences between predicted and actual values. Overall, this filtered map effectively visualizes where traffic growth has been underestimated or overestimated, helping to identify spatial patterns in model performance across the highway network.

Note: It may take a few seconds to load this website. Double-click the filter to show it on the front layer.

Reflection – Overcoming Challenges and Growth

Each phase of this project taught me something essential: from learning the basics of mapping in Python, to creating dynamic data-driven visualizations, to finally deploying real-world, accessible tools. There were plenty of difficulties—understanding how to integrate plugins, debugging issues in time-series synchronization, and learning how to host interactive content—but overcoming each hurdle built my confidence as a developer. This project didn’t just improve my technical skills; it also taught me how to take an idea from a basic prototype to a fully deployed product, something I’m really proud of.

📎 Reference

https://python-visualization.github.io/folium/latest/

https://flask.palletsprojects.com/en/stable/

💡

Do you have any suggestions?