How to Build a Dynamic Bar‑Chart GIF in Python for a Personalized Qixi Gift
This guide walks you through using Python’s pandas and matplotlib libraries to generate daily bar‑chart images, combine them into an animated GIF, and embed the animation with custom QR code and HTML to create a heartfelt, data‑driven celebration for the Qixi festival.
This article shows how to create a dynamic horizontal bar‑chart GIF using Python for a romantic Qixi (Chinese Valentine’s Day) gift.
1. Dynamic Bar Chart
Animation is created by drawing a static bar chart for each day and stitching the images into a GIF.
Data is read from an Excel file with pandas, dates are processed, and matplotlib is used for plotting.
import pandas as pd
import datetime
df = pd.read_excel("data.xlsx")
df['date_text'] = df['date'].apply(lambda x: str(x)[:10])
t = datetime.datetime(2020,1,1) # start dateSet up the figure and colors:
import matplotlib.pyplot as plt
fig, ax = plt.subplots(figsize=(10,6))
plt.rcParams['font.sans-serif'] = ['Microsoft YaHei']
colors = ['#ADD8E6', '#DC143C', '#FFC0CB']Define the drawing function that creates a bar‑chart for a given day, adds labels, hides axes, and shows the current date.
def draw(date):
current_date = (t + datetime.timedelta(days=date)).strftime("%Y-%m-%d")
df_ = df[df['date_text'].eq(current_date)]
days = df_['days']
items = df_['project']
ax.clear()
ax.barh(items, days, color=colors)
for y, (x, name) in enumerate(zip(days.values, items.values)):
ax.text(x, y, "%s" % x, size=12)
if x > 1:
ax.text(x-0.5, y, name, size=14, ha='right')
ax.text(1, 1.01, current_date, transform=ax.transAxes, size=20, ha='right')
ax.get_xaxis().set_visible(False)
ax.get_yaxis().set_visible(False)Use matplotlib.animation.FuncAnimation to generate frames and save the GIF.
import matplotlib.animation as ani
timeSlot = [x for x in range(20)]
animator = ani.FuncAnimation(fig, draw, frames=timeSlot, interval=100)
animator.save('test.gif', fps=10)2. Custom QR Code
Generate a colored QR code with a background image using the MyQR library.
from MyQR import myqr
myqr.run('https://', version=5, level='H', picture='img.jpg',
colorized=True, contrast=1.0, brightness=1.0,
save_name='save.jpg', save_dir='D:/')3. Static HTML Page
Deploy the GIF and QR code on a simple HTML page. The page includes two div elements: one for displaying the animated GIF and another for printing text.
<head>
<style>
.process_gif{background-image:url("./process.gif");background-repeat:no-repeat;
background-size:cover;width:370px;height:220px;position:relative;z-index:1;}
.show_txt{margin:auto;background-color:azure;width:370px;height:200px;
position:relative;text-align:center;padding-top:10px;z-index:1;}
</style>
</head>
<body>
<div class="process_gif" id="process"></div>
<div class="show_txt" id="content_1"></div>
</body>A JavaScript typing effect prints a message line by line and replaces the GIF with a static image after playback.
let divTyping = document.getElementById('content_1');
let a = 0, timer = 0;
let str = "We have met 20 days..."; // shortened
function typing(){
if (a <= str.length){
divTyping.innerHTML = str.slice(0,a++) + '_';
timer = setTimeout(typing, 50);
} else {
divTyping.innerHTML = str;
clearTimeout(timer);
}
}
window.onload = function(){
typing();
setTimeout(function(){
document.getElementById('process').style.backgroundImage = "url('./process_stop.png')";
}, 2000);
}The final result is an animated bar‑chart GIF synchronized with a typing text effect, suitable as a personalized Qixi gift.
Note: Adjust frame count, interval, and data range as needed for smoother animation.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Python Crawling & Data Mining
Life's short, I code in Python. This channel shares Python web crawling, data mining, analysis, processing, visualization, automated testing, DevOps, big data, AI, cloud computing, machine learning tools, resources, news, technical articles, tutorial videos and learning materials. Join us!
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.