Cubism.js - A D3 Plugin for Visualizing Time Series
DZone's Guide to
Cubism.js - A D3 Plugin for Visualizing Time Series
Join the DZone community and get the full member experience.
Join For FreeBuilt by operators for operators, the Sensu monitoring event pipeline empowers businesses to automate their monitoring workflows and gain deep visibility into their multi-cloud environments. Get started for free today.
Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources.
Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values. Cubism renders incrementally, too, using Canvas to shift charts one pixel to the left. This approach lets Cubism scale easily to hundreds of metrics updating every ten seconds! Despite asynchronous fetching, rendering is synchronized so that charts update simultaneously, further improving performance and readability.
Cubism also scales in terms of perception: small multiples aligned by time facilitate rapid comparison. Cubism’s horizon charts make better use of vertical space than standard area charts, allowing you to see many more metrics at-a-glance and increasing the likelihood of discovery.
Cubism is data-source agnostic. It has built-in support for Graphite and Cube, and can be readily extended to fetch data from other sources. Client-side metric arithmetic allows further flexibility by combining metrics from multiple sources. Cubism’s modular components are designed for extensibility. You can add new chart types and modes of interaction, too. Cubism builds on D3, making it highly customizable via CSS and JavaScript.
Requirements: D3.js
Demo: http:/ / square. github. com/ cubism/
License: Apache License v2.0
Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values. Cubism renders incrementally, too, using Canvas to shift charts one pixel to the left. This approach lets Cubism scale easily to hundreds of metrics updating every ten seconds! Despite asynchronous fetching, rendering is synchronized so that charts update simultaneously, further improving performance and readability.
Cubism also scales in terms of perception: small multiples aligned by time facilitate rapid comparison. Cubism’s horizon charts make better use of vertical space than standard area charts, allowing you to see many more metrics at-a-glance and increasing the likelihood of discovery.
Cubism is data-source agnostic. It has built-in support for Graphite and Cube, and can be readily extended to fetch data from other sources. Client-side metric arithmetic allows further flexibility by combining metrics from multiple sources. Cubism’s modular components are designed for extensibility. You can add new chart types and modes of interaction, too. Cubism builds on D3, making it highly customizable via CSS and JavaScript.
Requirements: D3.js
Demo: http:/ / square. github. com/ cubism/
License: Apache License v2.0
Download our guide to mitigating alert fatigue, with real-world tips on automating remediation and triage from an IT veteran.
Like This Article? Read More From DZone
Topics:
Published at DZone with permission of Hirvesh Munogee , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}