vega / vega-themes

Themes for stylized Vega and Vega-Lite visualizations.

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.

# vega.themes.googlecharts <>

Chart theme modeled after Google Charts. Try it here.

# vega.themes.powerbi <>

Chart theme modeled after Power BI Desktop default theme. Try it here.

# vega.themes.carbonwhite <>

Chart theme modeled after IBM Carbon Charts - white theme. Try it here.

# vega.themes.carbong10 <>

Chart theme modeled after IBM Carbon Charts - grey 10 theme. This is the white theme with a slightly darker background. Try it here.

# vega.themes.carbong90 <>

Chart theme modeled after IBM Carbon Charts - grey 90 theme. Try it here.

# vega.themes.carbong100 <>

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:

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.

Publishing

To make a release, run npm run release. To deploy the examples, run yarn deploy:gh.

vega-themes's Issues

Remember the selected theme

When developing, the test page reloads and we lose the selected theme.

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.9.2 to 1.9.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v1.9.3

2019-04-10

Bug Fixes

• Simplify return expressions that are evaluated before the surrounding function is bound (#2803)

Pull Requests

• #2803: Handle out-of-order binding of identifiers to improve tree-shaking (@lukastaegert)

Commits

The new version differs by 3 commits.

• 516a06d 1.9.3
• a5526ea Update changelog
• c3d73ff Handle out-of-order binding of identifiers to improve tree-shaking (#2803)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Unable to change fill of single series bar chart

I'm trying to create a custom theme and I'm unable to style any single series marks (multi-series is working great). The examples also seem to suffer from the same problem.

No matter what I try I can't seem to stop it from being 'steelblue'. I'm doing the same approach as what's documented here: https://github.com/vega/vega-themes/blob/master/src/theme-quartz.js#L7-L15.

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.6.0 to 1.6.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Release Notes for v1.6.1

2019-03-20

Bug Fixes

• Avoid name clashes of unused default exports when tree-shaking is false (#2758)
• Do not crash when generating SystemJS bundles containing array patterns with member expressions (#2760)

Pull Requests

• #2758: Make sure unused default exports are deconflicted when tree-shaking is false (@lukastaegert)
• #2760: Handle member expressions in array patterns (@lukastaegert)

Commits

The new version differs by 4 commits.

• dfe1713 1.6.1
• 7513859 Update changelog
• 8166eb0 Handle member expressions in array patterns (#2760)
• 26d2b31 Make sure unused default exports are deconflicted when tree-shaking is false (#2758)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Dark theme preview should use dark background for the whole page

An in-range update of vega-typings is breaking the build 🚨

The dependency vega-typings was updated from 0.6.0 to 0.6.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

vega-typings is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Commits

The new version differs by 16 commits.

• ae5c7e4 Add documentation build files.
• 9722f94 Add version tag for new expression functions.
• dc8bef0 Bump versions.
• 5676341 Document join, reverse, trim expression functions.
• 2d02abe Fix expression reverse.
• 59317c7 Document event stream scale references.
• 5931998 Add scatter-brush-* test specifications.
• 6013349 Streamline signal event handler code.
• 465f5c1 Fix View event extension logic.
• bb81631 Fix typo in Dataflow.rerank comment.
• 5553bf0 Update airports tutorial text.
• 45b74fa Add description on autoresize prevention
• d56e019 Fix typo in the Airport tutorial
• 4dbd71f Fix bar chart in the tutorial
• d8f8d33 Fix docstring typo: bandPostion

There are 16 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Comments for Dark Theme

I think axis lines & labels shouldn't be solid white. (Light gray probably makes them less distracting.)

How to style actions dropdown & tooltips?

Hi,
I'm working on a more official-looking Carbon theme.

I'd need to also be able to style the action bar

and the tooltips

is there a proposed way to do this right now?

Thank you

An in-range update of vega-lite is breaking the build 🚨

The devDependency vega-lite was updated from 3.3.0 to 3.4.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

vega-lite is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Commits

The new version differs by 120 commits.

• a4e85f7 chore: bump to v3.4.0
• 411bf16 chore: upgrade dependencies (#5232)
• df74524 feat: set data: null to ignore the parent's data (#5223)
• 53ca860 refactor: use Color type from Vega (#5214)
• 6e0d86f docs(examples): add bar_diverging_stack_population_pyramid example (#5218)
• 4b4f708 fix: make custom tooltips of composite marks override defaults (#5217)
• e313c51 chore: upgrade schema generator (#5222)
• 69e262e chore: update schema generator (#5216)
• 4292b75 docs(examples): add circle_wilkinson_dotplot example (#5205)
• 6ae368c chore: fix typos in comments (#5209)
• ea6093b fix: allow all values as tooltips (#5210)
• b3b1237 fix: make order channel group area marks (#5207)
• 8fed9b5 fix: use 0.5*a + 0.5*b for stack mid formula instead of (a+b)/2 to avoid overflow (#5204)
• 0ef762e refactor: simplify flag typings (#5201)
• 026abda chore: refactor optimizationDataflowHelper (#5176)

There are 120 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Add open source U.S. Census Bureau scheme

Found here

xkcd theme

One key aspect of xkcd is probably the font and its size. Others include the aspect ratio.

As for the imprecise line drawing, I wonder which vega aspects need to be tapped into. The renderer maybe? Or some mark properties?

When deploying from github actions, also deploy github pages

An in-range update of @types/node is breaking the build 🚨

The devDependency @types/node was updated from 11.11.0 to 11.11.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.18.0 to 1.19.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Commits

The new version differs by 6 commits.

• 9af119d 1.19.0
• b3f361c Update changelog
• 456f4d2 Avoid variable from empty module name be empty (#3026)
• 17eaa43 Use id of last module in chunk as name base for auto-generated chunks (#3025)
• 871bfa0 Switch to a code-splitting build and update dependencies (#3020)
• 2443783 Unified file emission api (#2999)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Add light theme

The current default theme is light on light background and dark on dark background. There is currently a dark theme that forces plots to be dark even on light backgrounds, but there doesn't seem to be an equivalent to force a light theme on a dark background. I can make a PR based on https://github.com/vega/vega-themes/blob/next/src/theme-dark.ts if this addition would be welcome. For the three colors needed to be specified, I am thinking it would be the following based on picking colors from the dark and light demo themes:

const lightColor = '#000';
const medColor = '#ddd';

const darkTheme: Config = {
  background: '#fff',

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.14.2 to 1.14.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v1.14.3

2019-06-06

Bug Fixes

• Generate correct external imports when importing from a directory that would be above the root of the current working directory (#2902)

Pull Requests

• #2902: Use browser relative path algorithm for chunks (@lukastaegert)

Commits

The new version differs by 4 commits.

• c68bd95 1.14.3
• d79aa57 Update changelog
• 7179390 Use browser relative path algorithm for chunks (#2902)
• b1df517 Add funding button

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Comments for ggplot2

1. Why is the color palette back and white for colored plots

2. I think our tick counts are way higher than ggplot normally does.

Presentation Theme

All the themes/styles available as of right now change the color.

Is there a theme that changes the the size? I'm looking for something like https://matplotlib.org/users/style_sheets.html#defining-your-own-style. This way one can easily create figures for presentations, where axis labels and legends are huge so that people in the back row can read of ticks.

From what I understand in matplotlib this is easily possible by downsizing the figure. Thus fonts become relatively larger. However I have not found a way to to this with altair and I was hoping to find a theme to the rescue.

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.12.5 to 1.13.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v1.13.0

2019-05-31

Features

• Omit exports and module from SystemJS wrapper if possible (#2880)
• Try to use the first letters of names when mangling exports (#2885)

Bug Fixes

• Avoid conflicts with local variables when using format specific globals to render dynamic imports and file URLs (#2880)
• Do not produce undefined reexports when reexporting from entry points (#2885)

Pull Requests

• #2880: Deconflict global variables used inside format-specific code (@lukastaegert)
• #2885: Do not produce undefined reexports when reexporting from entry points and refactor chunk linking (@lukastaegert)

Commits

The new version differs by 5 commits.

• df11753 Fix linting
• a630866 1.13.0
• 52268a9 Update changelog
• b006d13 Deconflict global variables used inside format-specific code (#2880)
• 70b0844 Do not produce undefined reexports when reexporting from entry points and refactor chunk linking (#2885)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Adding pie chart example

I am working on it.

Carbon theme

I've been playing around with making Vega charts follow IBM's Carbon guidelines:
https://carbondesignsystem.com/data-visualization/simple-charts/

Very simple proof of concept here:
https://observablehq.com/d/20ea4bb8bdd0e49a

I was wondering if I was to build a formal theme and PR it if it might be merged into this project - Are new themes being accepted?

Deploy on gh-pages

It would be nice if there was an easy way to preview themes. We could add a build script similar to what vega-embed has.

Minor grid?

I'm not sure if it's possible at this level, or if it would require changes in the parent project, but for the ggplot2 theme the most salient difference is the lack of a minor grid (thinner lines half-way). Maybe I've just become too used to it, but I find it a subtle tweak that makes the plot more polished (whether in grey background or white).

PowerBI Theme Missing

The PowerBI theme is not exported in the version published to NPM.

Example chart needed to test and debug diverging color schemes

Is there a good example of using the theme's default diverging scheme in the Vega example gallery? If so, let me know and I'll add it here as an example.

Make test/index.html the webpage?

Comments about 538 themes

1. I’m curious why the scatter and line do not have y-grid ?

2. I think they normally use filled points (not unfilled points like we do)

3. I think the theme still looks like using solid black for title and labels. I think 538 uses (very) dark grey for both. (Labels are a bit lighter)

cc: @Casyfill

Fix sourcemaps

It looks like sourcemaps link to the ts files, which are not in the package. Let's fix it.

From a parcel build

⚠️  Could not load source file "../../src/index.ts" in source map of "../node_modules/vega-themes/build/src/index.js".
[1] ⚠️  Could not load source file "../../src/theme-dark.ts" in source map of "../node_modules/vega-themes/build/src/theme-dark.js".
[1] ⚠️  Could not load source file "../../src/theme-fivethirtyeight.ts" in source map of "../node_modules/vega-themes/build/src/theme-fivethirtyeight.js".
[1] ⚠️  Could not load source file "../../src/theme-excel.ts" in source map of "../node_modules/vega-themes/build/src/theme-excel.js".
[1] ⚠️  Could not load source file "../../src/theme-ggplot2.ts" in source map of "../node_modules/vega-themes/build/src/theme-ggplot2.js".
[1] ⚠️  Could not load source file "../../src/theme-vox.ts" in source map of "../node_modules/vega-themes/build/src/theme-vox.js".
[1] ⚠️  Could not load source file "../../src/theme-urbaninstitute.ts" in source map of "../node_modules/vega-themes/build/src/theme-urbaninstitute.js".
[1] ⚠️  Could not load source file "../../src/theme-quartz.ts" in source map of "../node_modules/vega-themes/build/src/theme-quartz.js".
[1] ⚠️  Could not load source file "../../src/theme-googlecharts.ts" in source map of "../node_modules/vega-themes/build/src/theme-googlecharts.js".
[1] ⚠️  Could not load source file "../../src/theme-latimes.ts" in source map of "../node_modules/vega-themes/build/src/theme-latimes.js".