Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

Vega Themes

npm version Build Status

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.

# vega.themes.googlecharts <>

Chart theme modeled after Google Charts. 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.