esnet / esnet/react-timeseries-charts

Add heatmaps/lasagna plots

Open
#419 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
876
Forks
279
PR merge metrics
No merged PRs in 30d

Description

# 🌈Feature request

**What is this feature?**
There are a lot of really great things that I've been looking for in a react plotting library (shoutout to brushes and event charts !!)

A useful feature would be heatmaps that show multivariate time series where each variable is a row and a variable's magnitude is denoted through color.

**How should the feature work?**
It should take in a 2d array and draw an even (or maybe uneven could be a good option too) grid of rectangles where the color is attached to some value scale.

The two features that I'm not sure that react-ts-charts has are
1. a categorical axis (for example, if you have 5 sensors, and you want to show their uptime coverage over time, displaying each sensor as a row), and
2. color scales + a color bar

**Do you have examples or an idea of how it can be implemented?**
Here's a d3 example which shows a basic way of making a heatmap. I'm sure it won't be much different with react+svg
https://www.d3-graph-gallery.com/graph/heatmap_basic.html

**Additional context**
(Add any other context or screenshots about the feature request here)

I'm mostly interested in the first and third plots which are the easiest to deal with

##### Spectrogram reference
Here's an example of an audio spectrogram. The y axis has a linear scale
![spectrogram example](https://upload.wikimedia.org/wikipedia/commons/c/c5/Spectrogram-19thC.png)

##### Categorical heatmap reference
Here's an example with a categorical scale
![image](https://user-images.githubusercontent.com/6741720/67230643-a580a580-f40b-11e9-9039-df8f20d22947.png)

The principal is the same, but they differ in labeling

## Update: they are also called lasagna plots
![image](https://user-images.githubusercontent.com/6741720/67258903-dfc86200-f460-11e9-88a2-93d54f4e92e7.png)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.