vega
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
Chart theme modeled after Microsoft Excel. Try it here.
Chart theme modeled after ggplot2. Try it here.
Chart theme modeled after Quartz. Try it here.
Chart theme modeled after Vox. Try it here.
# vega.themes.fivethirtyeight <>
Chart theme modeled after FiveThirtyEight. Try it here.
A dark theme. Try it here.
Chart theme modeled after the Los Angeles Times. Try it here.
# vega.themes.urbaninstitute <>
Chart theme modeled after the Urban Institute. Try it here.
Chart theme modeled after Google Charts. Try it here.
Chart theme modeled after Power BI Desktop default theme. Try it here.
Chart theme modeled after IBM Carbon Charts - white theme. Try it here.
Chart theme modeled after IBM Carbon Charts - grey 10 theme. This is the white theme with a slightly darker background. Try it here.
Chart theme modeled after IBM Carbon Charts - grey 90 theme. Try it here.
Chart theme modeled after IBM Carbon Charts - grey 100 theme. This is the grey 90 theme with a slightly darker background. Try it here.
Instructions for Developers
To view and test different themes, follow these steps:
- Install dependencies via
npm install. - Launch a local web server in the top-level directory with
npm start. - Make changes. The website will automatically reload.
Publishing
To make a release, run npm run release. To deploy the examples, run npm run deploy:gh.