vega-themes

What is vega-themes?

The vega-themes npm package provides a collection of themes for styling Vega and Vega-Lite visualizations. These themes can be used to quickly apply consistent styling to charts and graphs, enhancing their visual appeal and readability.

What are vega-themes's main functionalities?

Applying Predefined Themes

This feature allows users to apply predefined themes to their Vega or Vega-Lite visualizations. The code sample demonstrates how to apply the 'dark' theme from vega-themes to a Vega visualization.

const vega = require('vega');
const vegaThemes = require('vega-themes');

const runtime = vega.parse(spec);
const view = new vega.View(runtime)
  .renderer('canvas')
  .initialize('#view')
  .theme(vegaThemes.dark)
  .run();

Customizing Themes

Users can customize existing themes by modifying properties such as background color and axis styles. The code sample shows how to create a custom theme based on the 'fivethirtyeight' theme and apply it to a visualization.

const vega = require('vega');
const vegaThemes = require('vega-themes');

const customTheme = {
  ...vegaThemes.fivethirtyeight,
  background: '#f0f0f0',
  axis: {
    domainColor: '#333',
    tickColor: '#333'
  }
};

const runtime = vega.parse(spec);
const view = new vega.View(runtime)
  .renderer('canvas')
  .initialize('#view')
  .theme(customTheme)
  .run();

Other packages similar to vega-themes

chartjs-plugin-colorschemes

Chart.js Plugin Colorschemes provides a variety of color schemes for Chart.js charts. Similar to vega-themes, it allows users to apply consistent color themes to their visualizations, but it is specifically designed for use with Chart.js rather than Vega or Vega-Lite.

d3-scale-chromatic

D3-scale-chromatic is a collection of color scales for D3.js visualizations. While it focuses on color scales rather than complete themes, it serves a similar purpose in enhancing the visual appeal of charts and graphs. Unlike vega-themes, it is tailored for D3.js.

README

Vega Themes

Themes for stylized Vega and Vega-Lite visualizations. For Vega version 3+ and Vega-Lite 2+.

A Vega theme is a configuration object with default settings for a variety of visual properties such as colors, typefaces, line widths and spacing. This module exports a set of named themes, which can be passed as input to the Vega or Vega-Lite with Vega-Embed or directly as a configuration object to the Vega parser.

Try Vega-Themes in our Observable Demo.

Vega Themes comes with Vega-Embed:

vegaEmbed(el, spec, {theme: 'quartz'});

If you want to use a different version, pass the theme as a configuration:

vegaEmbed(el, spec, {config: vegaThemes.quartz});

Once instantiated, a visualization theme can not be changed. Instead, the input specification must be re-parsed with a new theme.

Included Themes

# vega.themes.excel <>

Chart theme modeled after Microsoft Excel. Try it here.

# vega.themes.ggplot2 <>

Chart theme modeled after ggplot2. Try it here.

# vega.themes.quartz <>

Chart theme modeled after Quartz. Try it here.

# vega.themes.vox <>

Chart theme modeled after Vox. Try it here.

# vega.themes.fivethirtyeight <>

Chart theme modeled after FiveThirtyEight. Try it here.

# vega.themes.dark <>

A dark theme. Try it here.

# vega.themes.latimes <>

Chart theme modeled after the Los Angeles Times. Try it here.

# vega.themes.urbaninstitute <>

Chart theme modeled after the Urban Institute. Try it here.

Instructions for Developers

To view and test different themes, follow these steps:

1. Install dependencies via yarn.
2. Launch a local web server in the top-level directory with yarn start.
3. Make changes. The website will automatically reload.

Release Process

To release a new version, make sure that everything works. Then run yarn version and bump the version number. Lastly, push to GitHub (with the release tag). Travis will build a bundle and make the npm release automatically.