Day 84 of 100 Days Coding Challenge: Python
Today I taught my app a new trick: showing which civilizations overlapped in time. Now, when you open a civilization’s detail page, you not only get its story, but also a handy list of its “neighbors” and even a small network graph that shows how timelines intersect.
Why bother? Because civilizations rarely lived in a vacuum. They bumped into each other constantly—sometimes trading spices and inventions, other times trading insults and spears. Think about paper or gunpowder leaving China and changing the world, or the ripple effect of Rome’s conversion to Christianity. Overlaps tell us who was around to witness (or resist) those changes. It’s a reminder that history is less about isolated silos and more about crowded dinner tables where everyone argues over who invented noodles first.
Today’s Motivation / Challenge
Looking at a single civilization is fine, but history really comes alive when you see what else was happening at the same time. Were they sharing trade routes? Fighting over borders? Borrowing each other’s gods and gadgets? By showing overlaps, the app gives us a quick peek into those messy, fascinating interactions. It’s like flipping to the “crossovers” episode in your favorite TV universe.
Purpose of the Code (Object)
The code checks which civilizations were active during the same time period. If their timelines overlap, it records the connection. On the detail page, these overlaps are displayed as a list of neighbors and a small graph where nodes are civilizations and edges are overlaps. Pick any two civilizations, and you’ll know instantly whether they were contemporaries—or whether one was long gone before the other showed up.
AI Prompt
I want to add the following functions:
- Compute overlaps between civilizations.
- Show the list of neighbors on the civ detail page.
- Add a small network graph of overlapping civilizations.
- Accept: picking any two civilizations and showing overlap or no overlap.
Functions & Features
- Calculate whether two civilizations’ date ranges overlap.
- Display a list of overlapping civilizations on the detail page.
- Render a simple network graph showing connections.
- Keep filters (years, tags, regions) consistent across both timeline and overlap view.
Requirements / Setup
You’ll need:
- Python 3.11
Installs:
pip install plotly networkx
Minimal Code Sample
def overlaps(civ1, civ2):
return civ1.start_year <= civ2.end_year and civ2.start_year <= civ1.end_year
neighbors = [c for c in all_civs if overlaps(civ, c) and c.id != civ.id]
This simple function checks if two civilizations’ timelines overlap.
The Civilization Timeline Builder
Notes / Lessons Learned
At first, I thought everything was smooth. Then I ran Poetry, and poof—my event dots vanished from the sidebar. The culprit? I’d placed the event-dots block outside _build_timeline_bands(…). Order matters, and mine was a mess. It reminded me of my first brush with Visual Basic decades ago, when I was scolded endlessly about naming conventions and comments. Turns out, old habits save you: my comments helped me track down the rogue block quickly.
Another wrinkle: filtering by a single tag caused some civilizations to disappear entirely. The fix was adding conds.append(or_(*preds)) so the query could handle multiple possibilities gracefully. That way, selecting “tech” doesn’t mean losing all the civilizations that had tech and culture in the same event.
After some code shuffling, a rerun, and a sigh of relief, everything worked: overlapping civilizations lit up both as lists and in the graph, while event dots stayed loyally in place.
Optional Ideas for Expansion
- Add hover tooltips in the network graph with details like duration of overlap.
- Weight the graph edges by the length of overlap (longer overlaps = thicker lines).
- Let users toggle “overlap mode” to see only civilizations that shared at least 100 years.