Plot

Library for visualizing data using Observable Plot

Technology

TypeScript
Golang
Project Forge

The plot module provides data visualization capabilities for Project Forge applications using Observable Plot. It enables developers to create interactive, responsive charts and graphs with minimal code.

Overview

This module provides:

Key Features

Performance

Developer Experience

Chart Types

Package Structure

Assets

Components

Usage

Basic Setup

First, include the plot assets in your template:

{%= PlotAssets() %}

Creating a Horizontal Bar Chart

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{% code 
  data := []util.ValueMap{
    {"name": "Category A", "value": 10},
    {"name": "Category B", "value": 20},
    {"name": "Category C", "value": 15},
  }
%}

<div id="chart-container"></div>
{%= PlotHorizontalBar("chart-container", data, "value", "name", "${d.name}: ${d.value}", 80) %}

Custom Charts

Use the PlotCall() function to create custom visualizations:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div id="custom-chart"></div>
<script type="module">
  const customChart = (div) => {
    // Your Observable Plot code here
    return Plot.plot({
      marks: [
        // Your marks
      ]
    });
  };
  
  {%= PlotCall("custom-chart", "customChart(div)") %}
</script>

Configuration

The module automatically handles: - Asset loading and caching - Responsive behavior on window resize - Memory cleanup when charts are destroyed - Integration with Project Forge’s asset pipeline

Dependencies

Source Code

See Also