🌊 Animated Flow Field

Showcase
, ,
1

Built a custom Bokeh extension for animating flow fields - perfect for visualizing fluid dynamics such as ocean currents and wind patterns. Features real-time zoom/pan, hover tooltips showing velocity data, and support for real-world geography via Cartopy.

:fire: Find the source code and examples here.

Peek 2026-02-10 03-03

https://github.com/mixstam1821/bokeh_flow/blob/main/EXAMPLE_2.py

Peek 2026-02-10 03-04

Peek 2026-02-10 03-06

image
image803×811 255 KB

https://github.com/mixstam1821/bokeh_flow/blob/main/example2_custom_data.py

Screenshot_20260210_030807
Screenshot_20260210_030807992×698 436 KB

https://github.com/mixstam1821/bokeh_flow/blob/main/real_world_coastlines_example.py

Architecture Breakdown

Core Components:

  • flowfield_interactive.ts/py: Basic flow field with zoom/pan/tooltips

  • flowfield_with_background.ts/py: Extended version with background image support

  • background_utils.py: Helpers to convert Bokeh plots, images, or numpy arrays to base64 backgrounds

Examples Provided:

  1. example1_basic_patterns.py - Different mathematical flow patterns (spiral, vortex, double gyre)

  2. example2_custom_data.py - Shows how to use your own data (math functions, wind, ocean currents)

  3. real_world_coastlines_example.py - Uses Cartopy to overlay flows on real geography

  4. true_overlay_example.py - Demonstrates background image techniques

  5. demo_zoom_pan_tooltip.py - Interactive features showcase

  6. EXAMPLE_1.py - Flow over Earth’s regions

  7. EXAMPLE_2.py - Flow over the World

# Requirements
pip install bokeh pillow
pip install cartopy  
pip install selenium
pip install matplotlib numpy
1 Like