latkit

A GPU-accelerated visualization library for large networks, such as power grids:
interactive views in the browser with WebGPU, and images and video from the command line.

Install

npm install latkit          # in the browser
cargo install latkit-cli    # on the command line: pictures and video
cargo add latkit            # in Rust

In the browser

import { Data, View, field, load } from 'latkit';

await load();
const grid = new Data('grid').set('Bus', [101, 102], { x: [0, 30], y: [0, 20], kv: [230, 115] });

const view = await View.create(document.querySelector('canvas')!, {
  space: 'plane',
  marks: [
    {
      vertices: grid.table('Bus'),
      position: ['$x', '$y'],
      radius: 6,
      color: field('kv').colormap('viridis'),
    },
  ],
});

grid.set('Bus', [102], { kv: [345] }); // drawn the next frame

A scene is plain data, with types from latkit's schema. JSON.stringify(scene) writes the JSON the command line reads.

On the command line

Write the same scene and data as JSON to render a picture, or a video with --frames:

latkit render scene.json --data grid.json --output grid.png
latkit render scene.json --data grid.json --frames frames.jsonl --fps 60 --output grid.mp4

scene.json and grid.json

scene.json

{
  "space": "plane",
  "marks": [
    {
      "vertices": ["grid", "Bus"],
      "position": ["$x", "$y"],
      "radius": 6,
      "color": { "colormap": "viridis", "value": "$kv" }
    }
  ]
}

grid.json

{
  "name": "grid",
  "patch": [
    {
      "replace": {
        "table": "Bus",
        "ids": [101, 102],
        "fields": { "x": [0, 30], "y": [0, 20], "kv": [230, 115] }
      }
    }
  ]
}

Gallery

latkit drew every picture here. The examples show the code for each one.

Documentation

Guides, examples, and the reference are on Read the Docs, and the Rust API is on docs.rs. Contributing covers the repository and how to build it.

Created by Luke Lowery. MIT License.