Visualization
The visualization design tokens provide a consistent color palette for theming data visualization UI tools and libraries. Elements does not support data visualizations as part of the core library, but does provide a set of tokens that you can use to theme data visualization libraries.
Usage
You can consume tokens via CSS Custom Properties, but data visualization libraries often use JavaScript based APIs for theming. To make it easier to theme these libraries, a utility function converts the active theme tokens to a JavaScript object.
import { getThemeTokens } from '@nvidia-elements/core';
const tokens = getThemeTokens();
// output
{
"--nve-ref-color-brand-green-100": "#121807"
"--nve-ref-border-radius-lg": "16px"
"--nve-ref-font-size-200": "14px"
...
}
ChartJS
Below is a simple demo of a visualization library (ChartJS) consuming the tokens and rendering the visualization to a HTML canvas.
import { getThemeTokens } from '@nvidia-elements/core';
import Chart from 'chart.js/auto';
const tokens = getThemeTokens();
new Chart(document.querySelector('canvas'), {
type: 'line',
options: { ... },
data: {
labels: [...],
datasets: [
{
label: 'grass',
data: [...],
backgroundColor: tokens['--nve-sys-visualization-categorical-grass'],
borderColor: tokens['--nve-sys-visualization-categorical-grass'],
}
]
}
});
Heatmap
Grid heatmap displaying simulation test pass rates for AV software modules across driving scenarios. Ideal for CI/CD dashboards tracking autonomous vehicle stack validation using red-green diverging tokens.
Categorical
The categorical tokens apply to visualizations that represent distinct categories or groups. These values are useful when the data has distinct groups but no natural numerical order.
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-visualization-categorical-violet | --nve-ref-color-purple-violet-1000 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-lavender | --nve-ref-color-purple-lavender-900 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-rose | --nve-ref-color-pink-rose-900 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-red | --nve-ref-color-red-cardinal-1000 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-pumpkin | --nve-ref-color-orange-pumpkin-900 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-amber | --nve-ref-color-yellow-amber-1000 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-nova | --nve-ref-color-yellow-nova-800 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-pear | --nve-ref-color-lime-pear-900 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-grass | --nve-ref-color-green-grass-1000 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-seafoam | --nve-ref-color-teal-seafoam-900 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-cyan | --nve-ref-color-teal-cyan-800 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-slate | --nve-ref-color-neutral-1000 | Use for categorical data visualization when representing distinct groups |
Sequential Diverging Virdis
The diverging tokens apply to visualizations that represent two opposing values or groups of data. This can be useful for data with a natural center and the goal is to highlight the differences or deviations from the center.
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-visualization-sequential-diverging-virdis-100 | --oklch(91.8% 0.187 102.2) | Use for the highest values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-200 | --oklch(85.9% 0.19 115) | Use for very high values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-300 | --oklch(82.1% 0.194 126.8) | Use for high values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-400 | --oklch(77.5% 0.187 137.2) | Use for moderately high values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-500 | --oklch(73.4% 0.164 147.5) | Use for upper-mid range values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-600 | --oklch(69.1% 0.145 157.3) | Use for mid-range values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-700 | --oklch(64.6% 0.12 169.6) | Use for lower-mid range values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-800 | --oklch(60.2% 0.1 184.4) | Use for moderately low values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-900 | --oklch(56.8% 0.087 200.1) | Use for low values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-1000 | --oklch(49.1% 0.083 242.3) | Use for very low values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-1100 | --oklch(45.3% 0.094 261.6) | Use for near-minimum values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-1200 | --oklch(41.9% 0.108 278.7) | Use for very low values approaching the bottom of a viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-1300 | --oklch(37.1% 0.124 293.4) | Use for near-bottom values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-1400 | --oklch(33.3% 0.134 306.3) | Use for minimal values in a sequential viridis scale | ||
| --nve-sys-visualization-sequential-diverging-virdis-1500 | --oklch(27.6% 0.132 318.4) | Use for the lowest values in a sequential viridis scale |
Sequential Diverging Red Green
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-visualization-sequential-diverging-red-green-100 | --oklch(49.9% 0.159 23.4) | Use for the most extreme negative values in a diverging red-green scale | ||
| --nve-sys-visualization-sequential-diverging-red-green-200 | --oklch(59.6% 0.195 23.8) | Use for strong negative values that deviate significantly from center | ||
| --nve-sys-visualization-sequential-diverging-red-green-300 | --oklch(68.4% 0.193 22) | Use for moderate negative values below the neutral midpoint | ||
| --nve-sys-visualization-sequential-diverging-red-green-400 | --oklch(83.3% 0.083 18.1) | Use for slight negative values just below the center point | ||
| --nve-sys-visualization-sequential-diverging-red-green-600 | --oklch(86.4% 0.117 148.8) | Use for slight positive values just above the center point | ||
| --nve-sys-visualization-sequential-diverging-red-green-700 | --oklch(72.5% 0.176 148.7) | Use for moderate positive values above the neutral midpoint | ||
| --nve-sys-visualization-sequential-diverging-red-green-800 | --oklch(62.7% 0.157 148.3) | Use for strong positive values that deviate significantly from center | ||
| --nve-sys-visualization-sequential-diverging-red-green-900 | --oklch(47.5% 0.109 150.4) | Use for the most extreme positive values in a diverging red-green scale | ||
| --nve-sys-visualization-sequential-diverging-red-green-500 | --nve-ref-color-neutral-400 | Use for neutral values at the center point of a diverging scale |
Trend
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-visualization-trend-negative-color | --nve-ref-color-red-cardinal-1000 | Use for negative trend indicators in data visualizations | ||
| --nve-sys-visualization-trend-negative-emphasis-color | --nve-ref-color-red-cardinal-1100 | Use for emphasized negative trend indicators in data visualizations | ||
| --nve-sys-visualization-trend-positive-color | --nve-ref-color-green-grass-1000 | Use for positive trend indicators in data visualizations | ||
| --nve-sys-visualization-trend-positive-emphasis-color | --nve-ref-color-green-grass-1100 | Use for emphasized positive trend indicators in data visualizations |