Cubism.js v2.0

Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube, QuestDB, and other sources. Cubism is available under the Apache License.

What's New in v2.0

🚀 Major Updates:

• D3 v7 Compatibility - Full support for modern D3.js v7 (breaking change from v3)
• QuestDB Integration - New data source for QuestDB time series database
• Modern Build System - Updated build process with npm scripts
• Interactive Demo - New working demo with horizon charts and proper styling ⭐ New

Quick Start

npm install
npm run build    # Build cubism.v2.js and cubism.v2.min.js
npm run demo     # Run demo server

📊 View Interactive Demo - See Cubism v2.0 in action with horizon charts

Data Sources

Cubism supports multiple time series data sources:

• Graphite - Scalable time series database
• Cube - Open-source time series analysis
• QuestDB - High-performance time series database ⭐ New in v2.0
• Librato - Cloud monitoring service
• Ganglia - Distributed monitoring system

Usage Example

// Create context
var context = cubism.context()
    .serverDelay(5 * 1000)
    .step(10000)
    .size(1440);

// QuestDB source (new in v2.0)
var questdb = context.questdb({host: "http://localhost:9000"});
var cpuMetric = questdb.metric({
    table: "system_metrics",
    column: "cpu_usage",
    aggregation: "avg"
});

// Create horizon charts
d3.select("#charts").selectAll(".horizon")
    .data([cpuMetric])
    .enter().append("div")
    .attr("class", "horizon")
    .call(context.horizon().extent([0, 100]));

Migration from v1.x

Breaking Changes:

• Requires D3 v7 (was v3)
• Built files now named cubism.v2.js / cubism.v2.min.js
• Event handling API updated for D3 v7

Migration Steps:

1. Update D3 to v7: <script src="https://d3js.org/d3.v7.min.js"></script>
2. Update Cubism: <script src="cubism.v2.js"></script>
3. Test your existing charts (most should work without changes)

Want to learn more? See the wiki.