Day 81 of 100 Days Coding Challenge: Python
Today’s mission was to finally put some clothes on our bare-bones timeline—specifically, horizontal bars that show civilizations stretching across the years like colorful ribbons. Picture this: you pick a range of years in the sidebar, and voilà, a neat bar chart unfurls, each line representing a civilization strutting across history.
Ever since kicking off this Civilization Timeline project, I’ve been living in a constant state of “overwhelmed but learning.” Every day brings a new tool, a new library, or a new way to break my code. But at its core, it’s still Python—the same familiar friend in a slightly fancier suit.
The tricky part? Each new feature has to be inserted into just the right place. Add it too early, and it vanishes; too late, and it breaks everything. It’s like threading a needle in the dark: satisfying when it works, frustrating when it doesn’t.
Today’s Motivation / Challenge
Why add bars? Because walls of text are fine for a history book, but if you really want to see civilizations rise and fall, you need visuals. Bars turn abstract dates into something tangible. Instead of saying, “The Han Dynasty lasted four centuries,” you can see its line stretching across the timeline, rubbing shoulders with Rome. It’s like putting history on a conveyor belt and watching empires roll past.
Purpose of the Code (Object)
The code adds timeline bands—horizontal bars that show how long each civilization lasted within the years you’ve selected. You pick a date range, and the app maps the civilizations that overlap with it. Hover over a bar, and you’ll see its start and end dates. It’s history turned into a chart you can actually play with.
AI Prompt
Please add the following function to the existing script:
Day 6 — Timeline bands
- Horizontal bars per civ within selected range (Plotly).
- Accept: bars scale correctly; hover shows dates & duration.
Functions & Features
- Draw horizontal timeline bars for civilizations in the selected year range.
- Hover tooltips show start and end dates plus duration.
- Single-civilization band on the detail page for close-up analysis.
Requirements / Setup
You’ll need:
- Python 3.11
Installs:
pip install plotly
Minimal Code Sample
fig = px.timeline(
x_start=[c[“start_year”] for c in items],
x_end=[c[“end_year”] for c in items],
y=[c[“name”] for c in items]
)
fig.update_yaxes(autorange=”reversed”)
st.plotly_chart(fig, use_container_width=True)
Each bar stretches across its start and end years—Plotly handles the drawing magic.
The Civilization Timeline Builder
Notes / Lessons Learned
The day began with installing Plotly, which immediately felt like unlocking a new superpower: interactive graphs! At first, I only wanted to create multi-civilization bars on the main page, but then I thought, “Why stop there?” So I snuck in a single-civ band on the detail page, too. Now, whenever you zoom in on one civilization, you get its own mini-timeline. Totally extra, but worth it.
The big lesson? Inserting new code is like assembling IKEA furniture. Put the shelf in the wrong slot and suddenly the whole bookcase wobbles. Place the band code in just the right spot, and everything stands tall.
Optional Ideas for Expansion
- Add different colors for event types (wars, tech, culture) along the bars.
- Let users toggle between BCE/CE and “absolute” year numbers.
- Allow comparison mode where two civilizations’ bands overlap on the same detail page.