pandapower-viz

Interactive web visualizer for pandapower networks. Render power system diagrams and geographic maps — in the browser, in Jupyter notebooks, or embedded in React apps.

Features

• Network Diagram — Interactive graph visualization with vis-network. Zoom, pan, drag, and click elements to inspect properties.
• Geographic Map — Plot buses and lines on OpenStreetMap when coordinates are available.
• Color Modes — Color by element type, voltage level, or loading percentage.
• Compact Mode — Automatically simplifies large networks (>500 buses) for performance.
• Dark & Light Themes — Full theme support via CSS custom properties.
• Dual Distribution — Use from Python (pip install) or React (npm install).
• Jupyter Support — Renders inline in notebook cells via anywidget.

Python Usage

pip install pandapower-viz

import pandapower as pp
import pandapower_viz as pv

net = pp.networks.case_ieee30()
pp.runpp(net)
pv.show(net)  # opens browser at localhost:8050

Jupyter Notebook

pv.show(net) auto-detects Jupyter and renders the diagram inline in the cell:

# In a Jupyter notebook cell:
import pandapower as pp
import pandapower_viz as pv

net = pp.networks.case_ieee30()
pp.runpp(net)
pv.show(net)  # renders inline — no browser tab opened

You can also use the widget directly for more control:

from pandapower_viz import NetworkWidget

w = NetworkWidget.from_net(net)
display(w)

# Update the network later:
pp.runpp(net)
w.update_network(net)

React Usage

npm install pandapower-viz

import { NetworkDiagram, parsePandaPowerJson } from 'pandapower-viz';
import 'pandapower-viz/dist/style.css';

function App({ data }) {
  const network = parsePandaPowerJson(data);
  return (
    <NetworkDiagram
      network={network}
      theme="dark"
      onElementSelect={(el) => console.log(el)}
    />
  );
}

Components

Utilities

Theming

pandapower-viz uses CSS custom properties prefixed with --ppviz-. Override them to match your app's theme:

:root {
  --ppviz-bg-primary: var(--your-bg);
  --ppviz-text-primary: var(--your-text);
  --ppviz-brand-accent: var(--your-accent);
}

Or use the data-ppviz-theme attribute for built-in dark/light themes:

<div data-ppviz-theme="light">
  <!-- pandapower-viz components here -->
</div>

Supported Elements

Buses, lines, transformers (2-winding), loads, generators, static generators (solar PV, wind), battery storage, switches, external grids.

Requirements

• Python: 3.9+ with pandapower
• React: 18+
• Peer dependencies: react, react-dom

Development

git clone https://github.com/matheusduartedm/pandapower-viz
cd pandapower-viz/frontend
npm install
npm run dev        # start dev server
npm test           # run tests
npm run build-lib  # build npm library

License

MIT