Integreer Matplotlib Visualisaties in Webapplicaties
description
Met deze prompt leer je hoe je Matplotlib grafieken geschikt maakt voor gebruik in webapplicaties, inclusief interactieve elementen en responsieve aanpassingen. Dit helpt je om rijke, gebruikersvriendelijke visualisaties te leveren binnen je bestaande webomgeving zonder te vertrouwen op statische afbeeldingen of externe tools.
prompt
Help me met het creëren van Matplotlib visualisaties die ik kan integreren in mijn webapplicatie. Mijn webframework is <voer het type webframework in>, en ik wil dat de grafiek interactief is met funct ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een voorbeeld van hoe je een interactieve en responsieve Matplotlib-visualisatie kunt integreren in een Flask-webapplicatie, met functies zoals zoom, hover-informatie, donkere modus, grote lettertypen en styling.
Omdat Matplotlib standaard niet interactieve functies zoals hover en zoom ondersteunt in een webomgeving, is het beter om Plotly te gebruiken voor dergelijke interactieve visualisaties. Plotly integreert naadloos met Flask en biedt out-of-the-box ondersteuning voor hover, zoom, en responsiviteit.
Hier is een volledige voorbeeldcode:
1. Installeer eerst de benodigde pakketten:
```bash
pip install flask plotly pandas
```
2. Webapplicatie code met Flask en Plotly:
```python
from flask import Flask, render_template_string
import pandas as pd
import plotly.express as px
app = Flask(__name__)
@app.route('/')
def index():
# Voorbeeldgegevens
df = pd.DataFrame({
'Categorie': ['A', 'B', 'C', 'D', 'E'],
'Waarde': [10, 15, 7, 12, 9]
})
# Creëer een interactieve plot met Plotly
fig = px.bar(
df,
x='Categorie',
y='Waarde',
title='Voorbeeld Bar Chart',
template='plotly_dark' # Donkere modus
)
# Pas stijlen voor grote lettertypen
fig.update_layout(
font=dict(
size=20, # grote lettergrootte
family='Arial, sans-serif'
),
hoverlabel=dict(
font_size=16 # grootte van hover labels
)
)
# Genereer de HTML voor de plot
plot_div = fig.to_html(full_html=False)
# Render de pagina met embedded plot
return render_template_string('''
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Interactie Visualisatie</title>
<style>
body {
background-color: #121212; /* Donkere modus achtergrond */
color: #FFFFFF;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
font-size: 36px; /* Grote koptekst */
text-align: center;
}
/* Responsieve canvas */
.plotly-graph-div {
width: 100% !important;
height: auto !important;
}
</style>
</head>
<body>
<h1>Interactie Grafiek</h1>
<!-- Embed de Plotly grafiek -->
{{ plot_div|safe }}
</body>
</html>
''', plot_div=plot_div)
if __name__ == '__main__':
app.run(debug=True)
```
**Uitleg:**
- We gebruiken Plotly Express (`px`) om een interactieve bar chart te maken.
- De `template='plotly_dark'` zorgt voor een donkere modus.
- Via `update_layout` passen we de lettergrootte en hoverlabel aan.
- In de HTML pagina zorgen we voor een responsieve layout en styling voor grote lettertypen en donkere modus.
- De plot wordt ingebed met `to_html(full_html=False)` en veilig weergegeven in de Flask-template.
**Extra tips:**
- Voor verdere styling kun je CSS aanpassen.
- Voor meer interactie, zoals custom hover info, kun je de `hover_data` parameter aanpassen.
- Plotly grafieken zijn standaard responsief en ondersteunen zoom en hover.
Mocht je liever bij Matplotlib blijven, dan is het mogelijk om de grafieken als plaatjes te genereren en te embedden, maar dan is de interactiviteit beperkt. Plotly is hiervoor veel geschikter.
provider: deepseek
model: deepseek-chat
Hier is een complete oplossing voor interactieve Matplotlib-grafieken in Flask met donkere modus en responsive design:
## 1. Flask App Structuur
```
/app
/static
/css
style.css
/templates
index.html
app.py
requirements.txt
```
## 2. requirements.txt
```txt
Flask==2.3.3
matplotlib==3.7.2
mpld3==0.5.9
numpy==1.24.3
```
## 3. app.py
```python
from flask import Flask, render_template, jsonify
import matplotlib.pyplot as plt
import mpld3
import numpy as np
from mpld3 import plugins
import json
app = Flask(__name__)
def create_interactive_plot():
# Data voorbeeld
np.random.seed(42)
x = np.linspace(0, 10, 100)
y = np.sin(x) + np.random.normal(0, 0.1, 100)
# Stijl voor donkere modus
plt.style.use('dark_background')
fig, ax = plt.subplots(figsize=(10, 6))
# Grafiek instellingen
line, = ax.plot(x, y, 'o-', color='#FF6B6B', markersize=4, linewidth=2, alpha=0.8)
ax.set_xlabel('Tijd', fontsize=14, fontweight='bold')
ax.set_ylabel('Waarde', fontsize=14, fontweight='bold')
ax.set_title('Interactieve Data Visualisatie', fontsize=16, fontweight='bold', pad=20)
# Grid styling
ax.grid(True, alpha=0.3, linestyle='--')
# Aanpassen lettergroottes
ax.tick_params(axis='both', which='major', labelsize=12)
# Interactieve tooltips
labels = [f'X: {xi:.2f}<br>Y: {yi:.2f}' for xi, yi in zip(x, y)]
tooltip = plugins.PointHTMLTooltip(line, labels, voffset=10, hoffset=10)
plugins.connect(fig, tooltip)
# Zoom en pan functionaliteit
plugins.connect(fig, plugins.MousePosition(fontsize=12))
plugins.connect(fig, plugins.Zoom(enabled=True))
plugins.connect(fig, plugins.BoxZoom())
# Converteren naar HTML
plot_html = mpld3.fig_to_html(fig, template_type='general')
plt.close(fig)
return plot_html
@app.route('/')
def index():
plot_html = create_interactive_plot()
return render_template('index.html', plot_html=plot_html)
@app.route('/api/plot-data')
def get_plot_data():
# Voorbeeld API endpoint voor dynamische data
data = {
'x': list(np.linspace(0, 10, 100)),
'y': list(np.sin(np.linspace(0, 10, 100)) + np.random.normal(0, 0.1, 100))
}
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)
```
## 4. templates/index.html
```html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactieve Grafieken</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body class="dark-mode">
<div class="container">
<header>
<h1>Interactieve Data Visualisatie</h1>
<p>Gebruik de muis om in te zoomen en over punten te hoveren voor details</p>
</header>
<main>
<div class="plot-container">
{{ plot_html|safe }}
</div>
<div class="controls">
<button onclick="refreshPlot()">Vernieuw Data</button>
<button onclick="toggleTheme()">Thema Wisselen</button>
</div>
</main>
</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
function refreshPlot() {
fetch('/api/plot-data')
.then(response => response.json())
.then(data => {
// Hier zou je de grafiek dynamisch updaten
location.reload(); // Simpele refresh voor nu
});
}
function toggleTheme() {
document.body.classList.toggle('dark-mode');
document.body.classList.toggle('light-mode');
}
// Responsive aanpassingen
window.addEventListener('resize', function() {
// Herberekening voor responsive layout
const plots = document.querySelectorAll('.mpld3-figure');
plots.forEach(plot => {
plot.style.width = '100%';
plot.style.height = 'auto';
});
});
</script>
</body>
</html>
```
## 5. static/css/style.css
```css
:root {
--bg-dark: #1a1a1a;
--text-dark: #ffffff;
--bg-light: #ffffff;
--text-light: #333333;
--accent: #FF6B6B;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transition: all 0.3s ease;
line-height: 1.6;
}
body.dark-mode {
background-color: var(--bg-dark);
color: var(--text-dark);
}
body.light-mode {
background-color: var(--bg-light);
color: var(--text-light);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
font-weight: bold;
}
p {
font-size: 1.2rem;
opacity: 0.8;
}
.plot-container {
width: 100%;
margin: 20px 0;
overflow: hidden;
}
.mpld3-figure {
width: 100% !important;
height: auto !important;
max-width: 100%;
}
.controls {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 20px;
}
button {
padding: 12px 24px;
font-size: 1.1rem;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
body.dark-mode button {
background-color: var(--accent);
color: white;
}
body.light-mode button {
background-color: var(--accent);
color: white;
}
button:hover {
opacity: 0.9;
transform: translateY(-2px);
}
/* Responsive design */
@media (max-width: 768px) {
.container {
padding: 15px;
}
h1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
.controls {
flex-direction: column;
align-items: center;
}
button {
width: 100%;
max-width: 300px;
}
}
/* Tooltip styling aanpassen */
.mpld3-tooltip {
font-size: 14px !important;
font-weight: bold !important;
padding: 10px !important;
border-radius: 5px !important;
}
body.dark-mode .mpld3-tooltip {
background-color: rgba(255, 255, 255, 0.9) !important;
color: #333 !important;
border: 2px solid var(--accent) !important;
}
body.light-mode .mpld3-tooltip {
background-color: rgba(0, 0, 0, 0.9) !important;
color: white !important;
border: 2px solid var(--accent) !important;
}
```
## 6. Geavanceerde Features Toevoegen
Voor extra functionaliteit, voeg deze functie toe aan `app.py`:
```python
def create_advanced_plot():
fig, (ax1, ax2) = plt.subplots(2, 1, figsize=(12, 8))
# Data
x = np.linspace(0, 10, 100)
y1 = np.sin(x)
y2 = np.cos(x)
# Plot 1
line1, = ax1.plot(x, y1, 'o-', color='#4ECDC4', markersize=3)
ax1.set_title('Sinus Golf', fontsize=14, fontweight='bold')
# Plot 2
line2, = ax2.plot(x, y2, 's-', color='#FFE66D', markersize=3)
ax2.set_title('Cosinus Golf', fontsize=14, fontweight='bold')
# Tooltips
tooltips1 = [f'X: {xi:.2f}<br>Sin: {yi:.2f}' for xi, yi in zip(x, y1)]
tooltips2 = [f'X: {xi:.2f}<br>Cos: {yi:.2f}' for xi, yi in zip(x, y2)]
plugins.connect(fig, plugins.PointHTMLTooltip(line1, tooltips1))
plugins.connect(fig, plugins.PointHTMLTooltip(line2, tooltips2))
# Extra plugins
plugins.connect(fig, plugins.MousePosition())
plugins.connect(fig, plugins.Zoom(enabled=True))
plugins.connect(fig, plugins.BoxZoom())
return mpld3.fig_to_html(fig)
```
## Gebruik:
1. Installeer dependencies: `pip install -r requirements.txt`
2. Run de app: `python app.py`
3. Open `http://localhost:5000` in je browser
Deze setup biedt:
- ✅ Donkere/lichte modus toggle
- ✅ Interactieve tooltips met hover
- ✅ Zoom en pan functionaliteit
- ✅ Responsive design
- ✅ Grote lettertypen
- ✅ Flask integratie
- ✅ Dynamische data updates
De grafiek is volledig interactief met mouseover informatie, zoommogelijkheden en past zich aan aan verschillende schermgroottes.