├── .github ├── dependabot.yml └── workflows │ ├── check-pr.yml │ ├── merge-dependabot.yml │ └── test.yml ├── .gitignore ├── .prettierignore ├── .release-it.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── eslint.config.js ├── examples ├── area.vl.json ├── bars.vg.json ├── diverging.vl.json ├── heatmap.vl.json ├── index.html ├── lines.vg.json ├── ramp.vl.json ├── scatter.vg.json └── stacked.vl.json ├── package-lock.json ├── package.json ├── prettier.config.js ├── rollup.config.js ├── src ├── carbongen.ts ├── config.ts ├── index.ts ├── theme-carbong10.ts ├── theme-carbong100.ts ├── theme-carbong90.ts ├── theme-carbonwhite.ts ├── theme-dark.ts ├── theme-excel.ts ├── theme-fivethirtyeight.ts ├── theme-ggplot2.ts ├── theme-googlecharts.ts ├── theme-latimes.ts ├── theme-powerbi.ts ├── theme-quartz.ts ├── theme-urbaninstitute.ts └── theme-vox.ts └── tsconfig.json /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: '/' 5 | schedule: 6 | interval: monthly 7 | day: sunday 8 | time: '23:00' 9 | timezone: PST8PDT 10 | open-pull-requests-limit: 10 11 | - package-ecosystem: github-actions 12 | directory: '/' 13 | schedule: 14 | interval: monthly 15 | day: sunday 16 | time: '23:00' 17 | timezone: PST8PDT 18 | open-pull-requests-limit: 10 19 | -------------------------------------------------------------------------------- /.github/workflows/check-pr.yml: -------------------------------------------------------------------------------- 1 | name: 'Lint PR' 2 | 3 | on: 4 | pull_request_target: 5 | types: 6 | - opened 7 | - edited 8 | - synchronize 9 | 10 | permissions: 11 | pull-requests: read 12 | 13 | jobs: 14 | main: 15 | name: Validate PR title 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: amannn/action-semantic-pull-request@v6 19 | env: 20 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 21 | -------------------------------------------------------------------------------- /.github/workflows/merge-dependabot.yml: -------------------------------------------------------------------------------- 1 | name: Auto-merge Dependabot PRs 2 | on: 3 | schedule: 4 | - cron: '0 * * * *' 5 | jobs: 6 | auto_merge: 7 | name: Auto-merge Dependabot PRs 8 | 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - uses: akheron/dependabot-cron-action@v1 13 | with: 14 | token: ${{ secrets.GITHUB_TOKEN }} 15 | auto-merge: 'minor' 16 | merge-method: 'squash' 17 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: [push] 4 | 5 | jobs: 6 | test: 7 | runs-on: ubuntu-latest 8 | 9 | name: Test 10 | 11 | steps: 12 | - uses: actions/checkout@v5 13 | 14 | - uses: actions/setup-node@v5 15 | with: 16 | cache: 'npm' 17 | 18 | - name: Install Node dependencies 19 | run: npm ci 20 | 21 | - run: npm run lint 22 | - run: npm run build 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | examples/dist 3 | coverage/ 4 | node_modules 5 | npm-debug.log* 6 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | CHANGELOG.md 2 | -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "git": { 3 | "commitMessage": "chore: release v${version}" 4 | }, 5 | "github": { 6 | "release": true 7 | }, 8 | "hooks": { 9 | "after:bump": "npm run build" 10 | }, 11 | "plugins": { 12 | "@release-it/conventional-changelog": { 13 | "preset": "angular", 14 | "infile": "CHANGELOG.md" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | # [3.0.0](https://github.com/vega/vega-themes/compare/v2.15.0...v3.0.0) (2025-03-27) 4 | 5 | 6 | ### Bug Fixes 7 | 8 | * fix demo site ([b55f081](https://github.com/vega/vega-themes/commit/b55f08174f1587c6398c056a3d6e7f3272fc5927)) 9 | 10 | # [2.15.0](https://github.com/vega/vega-themes/compare/v2.14.0...v2.15.0) (2024-05-29) 11 | 12 | 13 | ### Features 14 | 15 | * add all 4 carbon themes ([#587](https://github.com/vega/vega-themes/issues/587)) ([c82b2b0](https://github.com/vega/vega-themes/commit/c82b2b0347bf04769a7709f7114aaebb634b00bc)) 16 | 17 | # [2.14.0](https://github.com/vega/vega-themes/compare/v2.13.0...v2.14.0) (2023-07-14) 18 | 19 | 20 | ### Features 21 | 22 | * add carbon themes ([#479](https://github.com/vega/vega-themes/issues/479)) ([fad4705](https://github.com/vega/vega-themes/commit/fad47050a84d6ececcbb0197955edd277409d0d4)) 23 | 24 | # [2.13.0](https://github.com/vega/vega-themes/compare/v2.12.1...v2.13.0) (2023-04-20) 25 | 26 | 27 | ### Features 28 | 29 | * remove beemo ([#444](https://github.com/vega/vega-themes/issues/444)) ([732aa95](https://github.com/vega/vega-themes/commit/732aa95ea8b70f81643be9b07ce218d25ff46bd4)) 30 | 31 | ## 2.12.1 (2023-02-13) 32 | 33 | * chorer: switch to release-it, update rollup ([46a2fed](https://github.com/vega/vega-themes/commit/46a2fed)) 34 | * chore(deps-dev): bump @rollup/plugin-json from 4.1.0 to 5.0.1 (#418) ([ed35c26](https://github.com/vega/vega-themes/commit/ed35c26)), closes [#418](https://github.com/vega/vega-themes/issues/418) 35 | * chore(deps-dev): bump @rollup/plugin-json from 5.0.1 to 5.0.2 (#420) ([8e91ba5](https://github.com/vega/vega-themes/commit/8e91ba5)), closes [#420](https://github.com/vega/vega-themes/issues/420) [#1332](https://github.com/vega/vega-themes/issues/1332) [#1332](https://github.com/vega/vega-themes/issues/1332) [#1291](https://github.com/vega/vega-themes/issues/1291) [#1270](https://github.com/vega/vega-themes/issues/1270) [#1115](https://github.com/vega/vega-themes/issues/1115) [#940](https://github.com/vega/vega-themes/issues/940) 36 | * chore(deps-dev): bump @rollup/plugin-json from 5.0.2 to 6.0.0 (#423) ([c631e43](https://github.com/vega/vega-themes/commit/c631e43)), closes [#423](https://github.com/vega/vega-themes/issues/423) 37 | * chore(deps-dev): bump @rollup/plugin-node-resolve from 14.1.0 to 15.0.1 (#415) ([d397ba6](https://github.com/vega/vega-themes/commit/d397ba6)), closes [#415](https://github.com/vega/vega-themes/issues/415) 38 | * chore(deps-dev): bump browser-sync from 2.27.10 to 2.27.11 (#424) ([3f5af78](https://github.com/vega/vega-themes/commit/3f5af78)), closes [#424](https://github.com/vega/vega-themes/issues/424) [#1598](https://github.com/vega/vega-themes/issues/1598) [#1615](https://github.com/vega/vega-themes/issues/1615) [#1618](https://github.com/vega/vega-themes/issues/1618) [#1995](https://github.com/vega/vega-themes/issues/1995) [#1972](https://github.com/vega/vega-themes/issues/1972) 39 | * chore(deps-dev): bump concurrently from 7.4.0 to 7.5.0 (#417) ([c4d13a0](https://github.com/vega/vega-themes/commit/c4d13a0)), closes [#417](https://github.com/vega/vega-themes/issues/417) [open-cli-tools/concurrently#296](https://github.com/open-cli-tools/concurrently/issues/296) [open-cli-tools/concurrently#372](https://github.com/open-cli-tools/concurrently/issues/372) [#372](https://github.com/vega/vega-themes/issues/372) [#371](https://github.com/vega/vega-themes/issues/371) [#296](https://github.com/vega/vega-themes/issues/296) [#369](https://github.com/vega/vega-themes/issues/369) [#367](https://github.com/vega/vega-themes/issues/367) 40 | * chore(deps-dev): bump concurrently from 7.5.0 to 7.6.0 (#422) ([d12b204](https://github.com/vega/vega-themes/commit/d12b204)), closes [#422](https://github.com/vega/vega-themes/issues/422) [open-cli-tools/concurrently#375](https://github.com/open-cli-tools/concurrently/issues/375) [open-cli-tools/concurrently#374](https://github.com/open-cli-tools/concurrently/issues/374) [open-cli-tools/concurrently#376](https://github.com/open-cli-tools/concurrently/issues/376) [open-cli-tools/concurrently#385](https://github.com/open-cli-tools/concurrently/issues/385) [open-cli-tools/concurrently#375](https://github.com/open-cli-tools/concurrently/issues/375) [open-cli-tools/concurrently#376](https://github.com/open-cli-tools/concurrently/issues/376) [#388](https://github.com/vega/vega-themes/issues/388) [#386](https://github.com/vega/vega-themes/issues/386) 41 | * chore(deps-dev): bump gh-pages from 4.0.0 to 5.0.0 (#429) ([3a8c2ef](https://github.com/vega/vega-themes/commit/3a8c2ef)), closes [#429](https://github.com/vega/vega-themes/issues/429) 42 | * chore(deps-dev): bump typescript from 4.8.4 to 4.9.3 (#421) ([209cd53](https://github.com/vega/vega-themes/commit/209cd53)), closes [#421](https://github.com/vega/vega-themes/issues/421) [#50977](https://github.com/vega/vega-themes/issues/50977) [#51363](https://github.com/vega/vega-themes/issues/51363) [#50872](https://github.com/vega/vega-themes/issues/50872) [#51297](https://github.com/vega/vega-themes/issues/51297) [#51345](https://github.com/vega/vega-themes/issues/51345) [#51295](https://github.com/vega/vega-themes/issues/51295) [#51324](https://github.com/vega/vega-themes/issues/51324) [#51320](https://github.com/vega/vega-themes/issues/51320) [#51263](https://github.com/vega/vega-themes/issues/51263) [#51256](https://github.com/vega/vega-themes/issues/51256) [#50681](https://github.com/vega/vega-themes/issues/50681) [#51300](https://github.com/vega/vega-themes/issues/51300) [#51311](https://github.com/vega/vega-themes/issues/51311) [#51299](https://github.com/vega/vega-themes/issues/51299) [#51294](https://github.com/vega/vega-themes/issues/51294) [#51271](https://github.com/vega/vega-themes/issues/51271) [#51248](https://github.com/vega/vega-themes/issues/51248) [#51244](https://github.com/vega/vega-themes/issues/51244) [#51262](https://github.com/vega/vega-themes/issues/51262) [#51230](https://github.com/vega/vega-themes/issues/51230) [#51240](https://github.com/vega/vega-themes/issues/51240) [#51247](https://github.com/vega/vega-themes/issues/51247) [#50560](https://github.com/vega/vega-themes/issues/50560) [#51076](https://github.com/vega/vega-themes/issues/51076) [#51231](https://github.com/vega/vega-themes/issues/51231) [#51227](https://github.com/vega/vega-themes/issues/51227) [#51219](https://github.com/vega/vega-themes/issues/51219) [#50977](https://github.com/vega/vega-themes/issues/50977) [#51363](https://github.com/vega/vega-themes/issues/51363) [#51297](https://github.com/vega/vega-themes/issues/51297) [#51345](https://github.com/vega/vega-themes/issues/51345) [#51295](https://github.com/vega/vega-themes/issues/51295) 43 | * chore(deps-dev): bump typescript from 4.9.3 to 4.9.4 (#425) ([32bc1c8](https://github.com/vega/vega-themes/commit/32bc1c8)), closes [#425](https://github.com/vega/vega-themes/issues/425) [#51704](https://github.com/vega/vega-themes/issues/51704) [#51712](https://github.com/vega/vega-themes/issues/51712) [#51626](https://github.com/vega/vega-themes/issues/51626) [#51689](https://github.com/vega/vega-themes/issues/51689) [#51627](https://github.com/vega/vega-themes/issues/51627) [#51544](https://github.com/vega/vega-themes/issues/51544) [#51704](https://github.com/vega/vega-themes/issues/51704) [#51712](https://github.com/vega/vega-themes/issues/51712) [#51626](https://github.com/vega/vega-themes/issues/51626) [#51689](https://github.com/vega/vega-themes/issues/51689) [#51627](https://github.com/vega/vega-themes/issues/51627) [#51544](https://github.com/vega/vega-themes/issues/51544) 44 | * chore(deps-dev): bump typescript from 4.9.4 to 4.9.5 (#427) ([1c74e31](https://github.com/vega/vega-themes/commit/1c74e31)), closes [#427](https://github.com/vega/vega-themes/issues/427) [#52419](https://github.com/vega/vega-themes/issues/52419) [#52426](https://github.com/vega/vega-themes/issues/52426) [#52419](https://github.com/vega/vega-themes/issues/52419) [#52426](https://github.com/vega/vega-themes/issues/52426) 45 | * chore(deps-dev): bump vega-lite from 5.5.0 to 5.6.0 (#416) ([6dad191](https://github.com/vega/vega-themes/commit/6dad191)), closes [#416](https://github.com/vega/vega-themes/issues/416) [#8434](https://github.com/vega/vega-themes/issues/8434) [#8354](https://github.com/vega/vega-themes/issues/8354) [#8475](https://github.com/vega/vega-themes/issues/8475) [#8472](https://github.com/vega/vega-themes/issues/8472) [#8455](https://github.com/vega/vega-themes/issues/8455) [#8470](https://github.com/vega/vega-themes/issues/8470) [#8451](https://github.com/vega/vega-themes/issues/8451) [#8468](https://github.com/vega/vega-themes/issues/8468) [#8456](https://github.com/vega/vega-themes/issues/8456) [#8462](https://github.com/vega/vega-themes/issues/8462) [#8463](https://github.com/vega/vega-themes/issues/8463) [#8445](https://github.com/vega/vega-themes/issues/8445) [#8464](https://github.com/vega/vega-themes/issues/8464) [#8457](https://github.com/vega/vega-themes/issues/8457) [#8458](https://github.com/vega/vega-themes/issues/8458) [#8459](https://github.com/vega/vega-themes/issues/8459) [#8460](https://github.com/vega/vega-themes/issues/8460) [#8437](https://github.com/vega/vega-themes/issues/8437) [#8439](https://github.com/vega/vega-themes/issues/8439) [#8436](https://github.com/vega/vega-themes/issues/8436) [#8438](https://github.com/vega/vega-themes/issues/8438) [#8440](https://github.com/vega/vega-themes/issues/8440) [#8442](https://github.com/vega/vega-themes/issues/8442) [#8443](https://github.com/vega/vega-themes/issues/8443) [#8444](https://github.com/vega/vega-themes/issues/8444) [#8391](https://github.com/vega/vega-themes/issues/8391) [#8428](https://github.com/vega/vega-themes/issues/8428) [#8429](https://github.com/vega/vega-themes/issues/8429) [#8430](https://github.com/vega/vega-themes/issues/8430) [#8426](https://github.com/vega/vega-themes/issues/8426) [#8424](https://github.com/vega/vega-themes/issues/8424) [#8422](https://github.com/vega/vega-themes/issues/8422) [#8415](https://github.com/vega/vega-themes/issues/8415) [#8434](https://github.com/vega/vega-themes/issues/8434) [#8354](https://github.com/vega/vega-themes/issues/8354) [#8475](https://github.com/vega/vega-themes/issues/8475) [#8472](https://github.com/vega/vega-themes/issues/8472) [#8455](https://github.com/vega/vega-themes/issues/8455) [#8470](https://github.com/vega/vega-themes/issues/8470) [#8451](https://github.com/vega/vega-themes/issues/8451) [#8468](https://github.com/vega/vega-themes/issues/8468) [#8456](https://github.com/vega/vega-themes/issues/8456) [#8462](https://github.com/vega/vega-themes/issues/8462) [#8463](https://github.com/vega/vega-themes/issues/8463) [#8445](https://github.com/vega/vega-themes/issues/8445) [#8464](https://github.com/vega/vega-themes/issues/8464) [#8457](https://github.com/vega/vega-themes/issues/8457) [#8458](https://github.com/vega/vega-themes/issues/8458) [#8459](https://github.com/vega/vega-themes/issues/8459) [#8460](https://github.com/vega/vega-themes/issues/8460) [#8437](https://github.com/vega/vega-themes/issues/8437) [#8439](https://github.com/vega/vega-themes/issues/8439) [#8436](https://github.com/vega/vega-themes/issues/8436) [#8438](https://github.com/vega/vega-themes/issues/8438) [#8440](https://github.com/vega/vega-themes/issues/8440) [#8442](https://github.com/vega/vega-themes/issues/8442) [#8443](https://github.com/vega/vega-themes/issues/8443) [#8444](https://github.com/vega/vega-themes/issues/8444) [#8391](https://github.com/vega/vega-themes/issues/8391) [#8428](https://github.com/vega/vega-themes/issues/8428) [#8429](https://github.com/vega/vega-themes/issues/8429) [#8430](https://github.com/vega/vega-themes/issues/8430) [#8426](https://github.com/vega/vega-themes/issues/8426) [#8424](https://github.com/vega/vega-themes/issues/8424) [#8422](https://github.com/vega/vega-themes/issues/8422) [#8469](https://github.com/vega/vega-themes/issues/8469) [#8475](https://github.com/vega/vega-themes/issues/8475) [#8472](https://github.com/vega/vega-themes/issues/8472) [#8455](https://github.com/vega/vega-themes/issues/8455) [#8470](https://github.com/vega/vega-themes/issues/8470) [#8451](https://github.com/vega/vega-themes/issues/8451) [#8468](https://github.com/vega/vega-themes/issues/8468) [#6708](https://github.com/vega/vega-themes/issues/6708) [#8451](https://github.com/vega/vega-themes/issues/8451) [#8456](https://github.com/vega/vega-themes/issues/8456) 46 | * chore(deps): bump engine.io from 6.2.0 to 6.2.1 (#419) ([42b58d5](https://github.com/vega/vega-themes/commit/42b58d5)), closes [#419](https://github.com/vega/vega-themes/issues/419) [#658](https://github.com/vega/vega-themes/issues/658) [#658](https://github.com/vega/vega-themes/issues/658) [#608](https://github.com/vega/vega-themes/issues/608) [socketio/socket.io-client-swift#1309](https://github.com/socketio/socket.io-client-swift/issues/1309) [#658](https://github.com/vega/vega-themes/issues/658) [#660](https://github.com/vega/vega-themes/issues/660) [#659](https://github.com/vega/vega-themes/issues/659) [#656](https://github.com/vega/vega-themes/issues/656) [#646](https://github.com/vega/vega-themes/issues/646) [#643](https://github.com/vega/vega-themes/issues/643) 47 | * chore(deps): bump json5 from 2.2.1 to 2.2.3 (#426) ([6053ef7](https://github.com/vega/vega-themes/commit/6053ef7)), closes [#426](https://github.com/vega/vega-themes/issues/426) [#299](https://github.com/vega/vega-themes/issues/299) [#199](https://github.com/vega/vega-themes/issues/199) [#295](https://github.com/vega/vega-themes/issues/295) [#299](https://github.com/vega/vega-themes/issues/299) [#199](https://github.com/vega/vega-themes/issues/199) [#295](https://github.com/vega/vega-themes/issues/295) 48 | 49 | 50 | 51 | ## 2.12.0 (2022-08-12) 52 | 53 | * "Bump version to: 2.12.0 [skip ci]" ([5ba047e](https://github.com/vega/vega-themes/commit/5ba047e)) 54 | * Update CHANGELOG.md [skip ci] ([3f7341d](https://github.com/vega/vega-themes/commit/3f7341d)) 55 | 56 | 57 | 58 | ## 2.11.0 (2022-08-12) 59 | 60 | * v2.11.0 ([a7ae432](https://github.com/vega/vega-themes/commit/a7ae432)) 61 | 62 | # v2.11.0 (Thu Aug 11 2022) 63 | 64 | :tada: This release contains work from new contributors! :tada: 65 | 66 | Thanks for all your work! 67 | 68 | :heart: Daniel Marsh-Patrick ([@dm-p](https://github.com/dm-p)) 69 | 70 | :heart: Cameron Yick ([@hydrosquall](https://github.com/hydrosquall)) 71 | 72 | #### 🚀 Enhancement 73 | 74 | - feat: add powerbi theme [#320](https://github.com/vega/vega-themes/pull/320) ([@dm-p](https://github.com/dm-p)) 75 | 76 | #### 🐛 Bug Fix 77 | 78 | - refactor: one const per declaration [#327](https://github.com/vega/vega-themes/pull/327) ([@domoritz](https://github.com/domoritz)) 79 | - ci: use same release process as vega embed [#325](https://github.com/vega/vega-themes/pull/325) ([@domoritz](https://github.com/domoritz)) 80 | - chore: upgrade deps [#323](https://github.com/vega/vega-themes/pull/323) ([@domoritz](https://github.com/domoritz)) 81 | - ci: don't set node version [#322](https://github.com/vega/vega-themes/pull/322) ([@domoritz](https://github.com/domoritz)) 82 | - chore: upgrade deps and format [#321](https://github.com/vega/vega-themes/pull/321) ([@domoritz](https://github.com/domoritz)) 83 | - chore: set up auto for versioning/release management [#293](https://github.com/vega/vega-themes/pull/293) ([@hydrosquall](https://github.com/hydrosquall)) 84 | - ci: fix akheron/dependabot-cron-action to use v0.2 [#295](https://github.com/vega/vega-themes/pull/295) ([@domoritz](https://github.com/domoritz)) 85 | - ci: update to akheron/dependabot-cron-action@v2 [#295](https://github.com/vega/vega-themes/pull/295) ([@domoritz](https://github.com/domoritz)) 86 | - ci: auto merge dependabot PRs [#295](https://github.com/vega/vega-themes/pull/295) ([@domoritz](https://github.com/domoritz)) 87 | - ci: monthly updates [#295](https://github.com/vega/vega-themes/pull/295) ([@domoritz](https://github.com/domoritz)) 88 | 89 | #### ⚠️ Pushed to `stable` 90 | 91 | - v2.11.0 ([@domoritz](https://github.com/domoritz)) 92 | 93 | #### 🔩 Dependency Updates 94 | 95 | - chore(deps-dev): bump vega-lite-dev-config from 0.18.0 to 0.19.0 [#312](https://github.com/vega/vega-themes/pull/312) ([@dependabot[bot]](https://github.com/dependabot[bot])) 96 | - chore(deps-dev): bump @rollup/plugin-node-resolve from 13.0.5 to 13.0.6 [#313](https://github.com/vega/vega-themes/pull/313) ([@dependabot[bot]](https://github.com/dependabot[bot])) 97 | - chore(deps-dev): bump auto from 10.32.1 to 10.32.2 [#314](https://github.com/vega/vega-themes/pull/314) ([@dependabot[bot]](https://github.com/dependabot[bot])) 98 | - chore(deps-dev): bump rollup from 2.58.0 to 2.59.0 [#315](https://github.com/vega/vega-themes/pull/315) ([@dependabot[bot]](https://github.com/dependabot[bot])) 99 | - chore(deps-dev): bump @auto-it/first-time-contributor from 10.32.1 to 10.32.2 [#316](https://github.com/vega/vega-themes/pull/316) ([@dependabot[bot]](https://github.com/dependabot[bot])) 100 | - chore(deps-dev): bump @auto-it/conventional-commits from 10.32.1 to 10.32.2 [#317](https://github.com/vega/vega-themes/pull/317) ([@dependabot[bot]](https://github.com/dependabot[bot])) 101 | - chore(deps-dev): bump typescript from 4.4.3 to 4.4.4 [#318](https://github.com/vega/vega-themes/pull/318) ([@dependabot[bot]](https://github.com/dependabot[bot])) 102 | - chore(deps-dev): bump browser-sync from 2.27.5 to 2.27.7 [#319](https://github.com/vega/vega-themes/pull/319) ([@dependabot[bot]](https://github.com/dependabot[bot])) 103 | - chore(deps): bump actions/setup-node from 2.4.0 to 2.4.1 [#302](https://github.com/vega/vega-themes/pull/302) ([@dependabot[bot]](https://github.com/dependabot[bot])) 104 | - chore(deps-dev): bump vega-lite from 5.1.0 to 5.1.1 [#304](https://github.com/vega/vega-themes/pull/304) ([@dependabot[bot]](https://github.com/dependabot[bot])) 105 | - chore(deps-dev): bump @rollup/plugin-node-resolve from 13.0.4 to 13.0.5 [#303](https://github.com/vega/vega-themes/pull/303) ([@dependabot[bot]](https://github.com/dependabot[bot])) 106 | - chore(deps-dev): bump concurrently from 6.2.1 to 6.3.0 [#305](https://github.com/vega/vega-themes/pull/305) ([@dependabot[bot]](https://github.com/dependabot[bot])) 107 | - chore(deps-dev): bump rollup from 2.56.3 to 2.58.0 [#306](https://github.com/vega/vega-themes/pull/306) ([@dependabot[bot]](https://github.com/dependabot[bot])) 108 | - chore(deps-dev): bump @auto-it/conventional-commits from 10.31.0 to 10.32.1 [#307](https://github.com/vega/vega-themes/pull/307) ([@dependabot[bot]](https://github.com/dependabot[bot])) 109 | - chore(deps-dev): bump typescript from 4.4.2 to 4.4.3 [#308](https://github.com/vega/vega-themes/pull/308) ([@dependabot[bot]](https://github.com/dependabot[bot])) 110 | - chore(deps-dev): bump vega from 5.20.2 to 5.21.0 [#309](https://github.com/vega/vega-themes/pull/309) ([@dependabot[bot]](https://github.com/dependabot[bot])) 111 | - chore(deps-dev): bump auto from 10.31.0 to 10.32.1 [#310](https://github.com/vega/vega-themes/pull/310) ([@dependabot[bot]](https://github.com/dependabot[bot])) 112 | - chore(deps-dev): bump @auto-it/first-time-contributor from 10.31.0 to 10.32.1 [#311](https://github.com/vega/vega-themes/pull/311) ([@dependabot[bot]](https://github.com/dependabot[bot])) 113 | - chore(deps): bump tmpl from 1.0.4 to 1.0.5 [#301](https://github.com/vega/vega-themes/pull/301) ([@dependabot[bot]](https://github.com/dependabot[bot])) 114 | - chore(deps): bump object-path from 0.11.7 to 0.11.8 [#300](https://github.com/vega/vega-themes/pull/300) ([@dependabot[bot]](https://github.com/dependabot[bot])) 115 | - chore(deps-dev): bump typescript from 4.3.5 to 4.4.2 [#299](https://github.com/vega/vega-themes/pull/299) ([@dependabot[bot]](https://github.com/dependabot[bot])) 116 | - chore(deps): bump object-path from 0.11.5 to 0.11.7 [#298](https://github.com/vega/vega-themes/pull/298) ([@dependabot[bot]](https://github.com/dependabot[bot])) 117 | - chore(deps): bump actions/setup-node from 2.3.0 to 2.4.0 [#294](https://github.com/vega/vega-themes/pull/294) ([@dependabot[bot]](https://github.com/dependabot[bot])) 118 | - chore(deps-dev): bump concurrently from 6.2.0 to 6.2.1 [#296](https://github.com/vega/vega-themes/pull/296) ([@dependabot[bot]](https://github.com/dependabot[bot])) 119 | - chore(deps-dev): bump rollup from 2.55.1 to 2.56.3 [#297](https://github.com/vega/vega-themes/pull/297) ([@dependabot[bot]](https://github.com/dependabot[bot])) 120 | - chore(deps): bump path-parse from 1.0.6 to 1.0.7 [#292](https://github.com/vega/vega-themes/pull/292) ([@dependabot[bot]](https://github.com/dependabot[bot])) 121 | - chore(deps): bump actions/setup-node from 2.2.0 to 2.3.0 [#287](https://github.com/vega/vega-themes/pull/287) ([@dependabot[bot]](https://github.com/dependabot[bot])) 122 | - chore(deps-dev): bump browser-sync from 2.27.4 to 2.27.5 [#288](https://github.com/vega/vega-themes/pull/288) ([@dependabot[bot]](https://github.com/dependabot[bot])) 123 | - chore(deps-dev): bump vega-lite-dev-config from 0.17.3 to 0.18.0 [#289](https://github.com/vega/vega-themes/pull/289) ([@dependabot[bot]](https://github.com/dependabot[bot])) 124 | - chore(deps-dev): bump @rollup/plugin-node-resolve from 13.0.0 to 13.0.4 [#290](https://github.com/vega/vega-themes/pull/290) ([@dependabot[bot]](https://github.com/dependabot[bot])) 125 | - chore(deps-dev): bump rollup from 2.52.7 to 2.55.1 [#291](https://github.com/vega/vega-themes/pull/291) ([@dependabot[bot]](https://github.com/dependabot[bot])) 126 | - chore(deps): bump akheron/dependabot-cron-action from 0.2 to 1 [#281](https://github.com/vega/vega-themes/pull/281) ([@dependabot[bot]](https://github.com/dependabot[bot])) 127 | - chore(deps): bump actions/setup-node from 2.1.5 to 2.2.0 [#282](https://github.com/vega/vega-themes/pull/282) ([@dependabot[bot]](https://github.com/dependabot[bot])) 128 | - chore(deps-dev): bump rollup from 2.50.5 to 2.52.7 [#283](https://github.com/vega/vega-themes/pull/283) ([@dependabot[bot]](https://github.com/dependabot[bot])) 129 | - chore(deps-dev): bump gh-pages from 3.2.0 to 3.2.3 [#284](https://github.com/vega/vega-themes/pull/284) ([@dependabot[bot]](https://github.com/dependabot[bot])) 130 | - chore(deps-dev): bump browser-sync from 2.26.14 to 2.27.4 [#285](https://github.com/vega/vega-themes/pull/285) ([@dependabot[bot]](https://github.com/dependabot[bot])) 131 | - chore(deps-dev): bump typescript from 4.3.2 to 4.3.5 [#286](https://github.com/vega/vega-themes/pull/286) ([@dependabot[bot]](https://github.com/dependabot[bot])) 132 | - chore(deps): bump glob-parent from 5.1.1 to 5.1.2 [#280](https://github.com/vega/vega-themes/pull/280) ([@dependabot[bot]](https://github.com/dependabot[bot])) 133 | - chore(deps-dev): bump rollup from 2.47.0 to 2.50.5 [#277](https://github.com/vega/vega-themes/pull/277) ([@dependabot[bot]](https://github.com/dependabot[bot])) 134 | - chore(deps-dev): bump typescript from 4.2.4 to 4.3.2 [#276](https://github.com/vega/vega-themes/pull/276) ([@dependabot[bot]](https://github.com/dependabot[bot])) 135 | - chore(deps-dev): bump gh-pages from 3.1.0 to 3.2.0 [#278](https://github.com/vega/vega-themes/pull/278) ([@dependabot[bot]](https://github.com/dependabot[bot])) 136 | - chore(deps-dev): bump concurrently from 6.1.0 to 6.2.0 [#279](https://github.com/vega/vega-themes/pull/279) ([@dependabot[bot]](https://github.com/dependabot[bot])) 137 | - chore(deps): bump ws from 7.4.3 to 7.4.6 [#275](https://github.com/vega/vega-themes/pull/275) ([@dependabot[bot]](https://github.com/dependabot[bot])) 138 | - chore(deps-dev): bump rollup from 2.46.0 to 2.47.0 [#274](https://github.com/vega/vega-themes/pull/274) ([@dependabot[bot]](https://github.com/dependabot[bot])) 139 | - chore(deps-dev): bump concurrently from 6.0.2 to 6.1.0 [#273](https://github.com/vega/vega-themes/pull/273) ([@dependabot[bot]](https://github.com/dependabot[bot])) 140 | - chore(deps-dev): bump @rollup/plugin-node-resolve from 11.2.1 to 13.0.0 [#272](https://github.com/vega/vega-themes/pull/272) ([@dependabot[bot]](https://github.com/dependabot[bot])) 141 | - chore(deps): bump hosted-git-info from 2.8.8 to 2.8.9 [#271](https://github.com/vega/vega-themes/pull/271) ([@dependabot[bot]](https://github.com/dependabot[bot])) 142 | - chore(deps): bump actions/setup-node from v1 to v2.1.5 [#269](https://github.com/vega/vega-themes/pull/269) ([@dependabot[bot]](https://github.com/dependabot[bot])) 143 | - chore(deps-dev): bump rollup from 2.45.2 to 2.46.0 [#270](https://github.com/vega/vega-themes/pull/270) ([@dependabot[bot]](https://github.com/dependabot[bot])) 144 | - ci: upgrade to GitHub-native Dependabot [#268](https://github.com/vega/vega-themes/pull/268) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 145 | - chore(deps-dev): bump vega-lite-dev-config from 0.17.2 to 0.17.3 [#266](https://github.com/vega/vega-themes/pull/266) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 146 | - chore(deps-dev): bump @wessberg/rollup-plugin-ts from 1.3.11 to 1.3.14 [#267](https://github.com/vega/vega-themes/pull/267) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 147 | - chore(deps-dev): bump concurrently from 6.0.1 to 6.0.2 [#265](https://github.com/vega/vega-themes/pull/265) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 148 | - chore(deps-dev): bump vega-lite from 5.0.0 to 5.1.0 [#264](https://github.com/vega/vega-themes/pull/264) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 149 | - chore(deps-dev): bump rollup from 2.45.1 to 2.45.2 [#263](https://github.com/vega/vega-themes/pull/263) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 150 | - chore(deps-dev): bump vega-lite-dev-config from 0.17.0 to 0.17.2 [#261](https://github.com/vega/vega-themes/pull/261) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 151 | - chore(deps-dev): bump concurrently from 6.0.0 to 6.0.1 [#258](https://github.com/vega/vega-themes/pull/258) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 152 | - chore(deps-dev): bump rollup from 2.44.0 to 2.45.1 [#260](https://github.com/vega/vega-themes/pull/260) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 153 | - chore(deps-dev): bump typescript from 4.2.3 to 4.2.4 [#259](https://github.com/vega/vega-themes/pull/259) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 154 | - chore(deps-dev): bump rollup from 2.43.1 to 2.44.0 [#257](https://github.com/vega/vega-themes/pull/257) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 155 | - chore(deps-dev): bump vega from 5.20.0 to 5.20.2 [#256](https://github.com/vega/vega-themes/pull/256) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 156 | - chore(deps-dev): bump rollup from 2.42.2 to 2.43.1 [#254](https://github.com/vega/vega-themes/pull/254) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 157 | - chore(deps-dev): bump @wessberg/rollup-plugin-ts from 1.3.10 to 1.3.11 [#255](https://github.com/vega/vega-themes/pull/255) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 158 | - chore(deps-dev): bump @rollup/plugin-node-resolve from 11.2.0 to 11.2.1 [#253](https://github.com/vega/vega-themes/pull/253) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 159 | - chore(deps-dev): bump vega from 5.19.1 to 5.20.0 [#251](https://github.com/vega/vega-themes/pull/251) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 160 | - chore(deps-dev): bump @wessberg/rollup-plugin-ts from 1.3.8 to 1.3.10 [#250](https://github.com/vega/vega-themes/pull/250) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 161 | - chore(deps-dev): bump rollup from 2.41.2 to 2.42.2 [#252](https://github.com/vega/vega-themes/pull/252) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 162 | - chore(deps-dev): bump rollup from 2.40.0 to 2.41.2 [#249](https://github.com/vega/vega-themes/pull/249) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 163 | - chore(deps-dev): bump vega-lite-dev-config from 0.16.6 to 0.17.0 [#248](https://github.com/vega/vega-themes/pull/248) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 164 | - chore(deps-dev): bump typescript from 4.2.2 to 4.2.3 [#247](https://github.com/vega/vega-themes/pull/247) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 165 | - chore(deps-dev): bump rollup from 2.39.1 to 2.40.0 [#246](https://github.com/vega/vega-themes/pull/246) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 166 | - chore(deps-dev): bump vega-lite-dev-config from 0.16.1 to 0.16.6 [#245](https://github.com/vega/vega-themes/pull/245) ([@dependabot-preview[bot]](https://github.com/dependabot-preview[bot])) 167 | 168 | #### Authors: 5 169 | 170 | - [@dependabot-preview[bot]](https://github.com/dependabot-preview[bot]) 171 | - [@dependabot[bot]](https://github.com/dependabot[bot]) 172 | - Cameron Yick ([@hydrosquall](https://github.com/hydrosquall)) 173 | - Daniel Marsh-Patrick ([@dm-p](https://github.com/dm-p)) 174 | - Dominik Moritz ([@domoritz](https://github.com/domoritz)) 175 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016, University of Washington Interactive Data Lab 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | 1. Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | 2. Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | 3. Neither the name of the copyright holder nor the names of its contributors 15 | may be used to endorse or promote products derived from this software 16 | without specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE 22 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 23 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 24 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 25 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 26 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 27 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vega Themes 2 | 3 | [![npm version](https://img.shields.io/npm/v/vega-themes.svg)](https://www.npmjs.com/package/vega-themes) [![Test](https://github.com/vega/vega-themes/actions/workflows/test.yml/badge.svg)](https://github.com/vega/vega-themes/actions/workflows/test.yml) [![](https://data.jsdelivr.com/v1/package/npm/vega-themes/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vega-themes) 4 | 5 | Themes for stylized [Vega](https://vega.github.io/vega/) and [Vega-Lite](https://vega.github.io/vega-lite/) visualizations. For Vega version 3+ and Vega-Lite 2+. 6 | 7 | A Vega _theme_ is a [configuration object](https://vega.github.io/vega/docs/config/) 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](https://github.com/vega/vega-embed) or directly as a configuration object to the [Vega parser](https://vega.github.io/vega/docs/api/parser/). 8 | 9 | Try Vega-Themes in our [Observable Demo](https://beta.observablehq.com/@domoritz/vega-themes-demo). 10 | 11 | Vega Themes comes with Vega-Embed: 12 | 13 | ```js 14 | vegaEmbed(el, spec, {theme: 'quartz'}); 15 | ``` 16 | 17 | If you want to use a different version, pass the theme as a configuration: 18 | 19 | ```js 20 | vegaEmbed(el, spec, {config: vegaThemes.quartz}); 21 | ``` 22 | 23 | Once instantiated, a visualization theme can not be changed. Instead, the input specification must be re-parsed with a new theme. 24 | 25 | ## Included Themes 26 | 27 | # vega.themes.excel [<>](https://github.com/vega/vega-themes/blob/main/src/theme-excel.ts 'Source') 28 | 29 | Chart theme modeled after Microsoft Excel. [Try it here](https://vega.github.io/vega-themes/?theme=excel). 30 | 31 | # vega.themes.ggplot2 [<>](https://github.com/vega/vega-themes/blob/main/src/theme-ggplot2.ts 'Source') 32 | 33 | Chart theme modeled after ggplot2. [Try it here](https://vega.github.io/vega-themes/?theme=ggplot2). 34 | 35 | # vega.themes.quartz [<>](https://github.com/vega/vega-themes/blob/main/src/theme-quartz.ts 'Source') 36 | 37 | Chart theme modeled after Quartz. [Try it here](https://vega.github.io/vega-themes/?theme=quartz). 38 | 39 | # vega.themes.vox [<>](https://github.com/vega/vega-themes/blob/main/src/theme-vox.ts 'Source') 40 | 41 | Chart theme modeled after Vox. [Try it here](https://vega.github.io/vega-themes/?theme=vox). 42 | 43 | # vega.themes.fivethirtyeight [<>](https://github.com/vega/vega-themes/blob/main/src/theme-fivethirtyeight.ts 'Source') 44 | 45 | Chart theme modeled after FiveThirtyEight. [Try it here](https://vega.github.io/vega-themes/?theme=fivethirtyeight). 46 | 47 | # vega.themes.dark [<>](https://github.com/vega/vega-themes/blob/main/src/theme-dark.ts 'Source') 48 | 49 | A dark theme. [Try it here](https://vega.github.io/vega-themes/?theme=dark). 50 | 51 | # vega.themes.latimes [<>](https://github.com/vega/vega-themes/blob/main/src/theme-latimes.ts 'Source') 52 | 53 | Chart theme modeled after the Los Angeles Times. [Try it here](https://vega.github.io/vega-themes/?theme=latimes). 54 | 55 | # vega.themes.urbaninstitute [<>](https://github.com/vega/vega-themes/blob/main/src/theme-urbaninstitute.ts 'Source') 56 | 57 | Chart theme modeled after the Urban Institute. [Try it here](https://vega.github.io/vega-themes/?theme=urbaninstitute). 58 | 59 | # vega.themes.googlecharts [<>](https://github.com/vega/vega-themes/blob/main/src/theme-googlecharts.ts 'Source') 60 | 61 | Chart theme modeled after Google Charts. [Try it here](https://vega.github.io/vega-themes/?theme=googlecharts). 62 | 63 | # vega.themes.powerbi [<>](https://github.com/vega/vega-themes/blob/main/src/theme-powerbi.ts 'Source') 64 | 65 | Chart theme modeled after Power BI Desktop default theme. [Try it here](https://vega.github.io/vega-themes/?theme=powerbi). 66 | 67 | # vega.themes.carbonwhite [<>](https://github.com/vega/vega-themes/blob/main/src/theme-carbonwhite.ts 'Source') 68 | 69 | Chart theme modeled after IBM Carbon Charts - white theme. [Try it here](https://vega.github.io/vega-themes/?theme=carbonwhite). 70 | 71 | # vega.themes.carbong10 [<>](https://github.com/vega/vega-themes/blob/main/src/theme-carbong10.ts 'Source') 72 | 73 | Chart theme modeled after IBM Carbon Charts - grey 10 theme. This is the white theme with a slightly darker background. [Try it here](https://vega.github.io/vega-themes/?theme=carbong10). 74 | 75 | # vega.themes.carbong90 [<>](https://github.com/vega/vega-themes/blob/main/src/theme-carbong90.ts 'Source') 76 | 77 | Chart theme modeled after IBM Carbon Charts - grey 90 theme. [Try it here](https://vega.github.io/vega-themes/?theme=carbong90). 78 | 79 | # vega.themes.carbong100 [<>](https://github.com/vega/vega-themes/blob/main/src/theme-carbong100.ts 'Source') 80 | 81 | Chart theme modeled after IBM Carbon Charts - grey 100 theme. This is the grey 90 theme with a slightly darker background. [Try it here](https://vega.github.io/vega-themes/?theme=carbong100). 82 | 83 | ## Instructions for Developers 84 | 85 | To view and test different themes, follow these steps: 86 | 87 | 1. Install dependencies via `npm install`. 88 | 2. Launch a local web server in the top-level directory with `npm start`. 89 | 3. Make changes. The website will automatically reload. 90 | 91 | ## Publishing 92 | 93 | To make a release, run `npm run release`. To deploy the examples, run `npm run deploy:gh`. 94 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import eslint from '@eslint/js'; 2 | import tseslint from 'typescript-eslint'; 3 | import tsParser from '@typescript-eslint/parser'; 4 | import prettierConfig from 'eslint-plugin-prettier/recommended'; 5 | import globals from 'globals'; 6 | 7 | delete globals.browser['AudioWorkletGlobalScope ']; 8 | 9 | /** 10 | * @type {import('eslint').Linter.Config[]} 11 | */ 12 | export default [ 13 | { 14 | ignores: ['build/**', 'coverage/**', 'examples/dist/**'], 15 | }, 16 | eslint.configs.recommended, 17 | ...tseslint.configs.recommendedTypeChecked, 18 | { 19 | languageOptions: { 20 | parserOptions: { 21 | project: true, 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }, 26 | { 27 | files: ['**/*.ts'], 28 | languageOptions: { 29 | parser: tsParser, 30 | globals: { 31 | ...globals.browser, 32 | }, 33 | }, 34 | rules: { 35 | 'prettier/prettier': 'warn', 36 | '@typescript-eslint/explicit-function-return-type': 'off', 37 | '@typescript-eslint/no-explicit-any': 'warn', 38 | '@typescript-eslint/prefer-for-of': 'error', 39 | '@typescript-eslint/no-for-in-array': 'error', 40 | '@typescript-eslint/no-require-imports': 'error', 41 | '@typescript-eslint/no-parameter-properties': 'off', 42 | '@typescript-eslint/no-unused-vars': [ 43 | 'error', 44 | { 45 | vars: 'all', 46 | args: 'after-used', 47 | ignoreRestSiblings: true, 48 | }, 49 | ], 50 | '@typescript-eslint/no-shadow': 'error', 51 | '@typescript-eslint/no-unsafe-member-access': 'warn', 52 | '@typescript-eslint/no-unsafe-argument': 'warn', 53 | '@typescript-eslint/no-unsafe-return': 'warn', 54 | '@typescript-eslint/no-unsafe-assignment': 'warn', 55 | '@typescript-eslint/no-unsafe-call': 'warn', 56 | '@typescript-eslint/no-object-literal-type-assertion': 'off', 57 | '@typescript-eslint/explicit-module-boundary-types': 'off', 58 | '@typescript-eslint/no-namespace': 'error', 59 | '@typescript-eslint/unbound-method': 'off', 60 | '@typescript-eslint/no-base-to-string': 'off', 61 | '@typescript-eslint/no-unnecessary-type-assertion': 'off', 62 | '@typescript-eslint/restrict-template-expressions': 'off', 63 | '@typescript-eslint/no-misused-promises': 'off', 64 | 'linebreak-style': ['error', 'unix'], 65 | 'no-irregular-whitespace': ['error', {skipComments: true}], 66 | 'no-alert': 'error', 67 | 'prefer-const': 'error', 68 | 'no-return-assign': 'error', 69 | 'no-useless-call': 'error', 70 | 'no-useless-concat': 'error', 71 | 'prefer-template': 'error', 72 | 'no-unused-vars': 'off', 73 | // "no-undef": "off", // typescript takes care of this for us 74 | 'no-unreachable': 'off', // typescript takes care of this for us 75 | }, 76 | }, 77 | prettierConfig, 78 | { 79 | files: ['**/*.js'], 80 | ...tseslint.configs.disableTypeChecked, 81 | }, 82 | ]; 83 | -------------------------------------------------------------------------------- /examples/area.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v4.json", 3 | "width": 400, 4 | "height": 300, 5 | "data": { 6 | "url": "https://vega.github.io/vega-datasets/data/iowa-electricity.csv", 7 | "format": {"type": "csv"} 8 | }, 9 | "title": "Iowa's renewable energy boom", 10 | "mark": { 11 | "type": "area", 12 | "tooltip": true 13 | }, 14 | "encoding": { 15 | "color": { 16 | "type": "nominal", 17 | "field": "source", 18 | "legend": {"title": "Electricity source"} 19 | }, 20 | "x": { 21 | "type": "temporal", 22 | "axis": {"title": "Year"}, 23 | "field": "year", 24 | "timeUnit": "year" 25 | }, 26 | "y": { 27 | "type": "quantitative", 28 | "axis": {"format": ".0%", "title": "Share of net generation"}, 29 | "field": "net_generation", 30 | "stack": "normalize" 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/bars.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega/v6.json", 3 | "width": 480, 4 | "height": 150, 5 | "padding": 5, 6 | 7 | "title": "Simple Bar Chart", 8 | 9 | "data": [ 10 | { 11 | "name": "table", 12 | "values": [ 13 | {"index": 1, "value": 28, "position": 1, "category": "A"}, 14 | {"index": 2, "value": 55, "position": 2, "category": "A"}, 15 | {"index": 3, "value": 43, "position": 3, "category": "A"}, 16 | {"index": 4, "value": 91, "position": 4, "category": "A"}, 17 | {"index": 5, "value": 81, "position": 5, "category": "A"}, 18 | {"index": 6, "value": 53, "position": 6, "category": "A"}, 19 | {"index": 7, "value": 19, "position": 1, "category": "B"}, 20 | {"index": 8, "value": 87, "position": 2, "category": "B"}, 21 | {"index": 9, "value": 52, "position": 3, "category": "B"}, 22 | {"index": 10, "value": 48, "position": 4, "category": "B"}, 23 | {"index": 11, "value": 24, "position": 5, "category": "B"}, 24 | {"index": 12, "value": 49, "position": 6, "category": "B"}, 25 | {"index": 13, "value": 87, "position": 1, "category": "C"}, 26 | {"index": 14, "value": 66, "position": 2, "category": "C"}, 27 | {"index": 15, "value": 17, "position": 3, "category": "C"}, 28 | {"index": 16, "value": 27, "position": 4, "category": "C"}, 29 | {"index": 17, "value": 68, "position": 5, "category": "C"}, 30 | {"index": 18, "value": 16, "position": 6, "category": "C"} 31 | ] 32 | } 33 | ], 34 | 35 | "scales": [ 36 | { 37 | "name": "scaleIndex", 38 | "type": "band", 39 | "range": "width", 40 | "domain": {"data": "table", "field": "index"} 41 | }, 42 | { 43 | "name": "scaleValue", 44 | "type": "linear", 45 | "range": "height", 46 | "domain": {"data": "table", "field": "value"}, 47 | "zero": true, 48 | "nice": true 49 | } 50 | ], 51 | 52 | "axes": [ 53 | {"orient": "left", "scale": "scaleValue", "title": "Value"}, 54 | {"orient": "bottom", "scale": "scaleIndex", "title": "Index"} 55 | ], 56 | 57 | "marks": [ 58 | { 59 | "type": "rect", 60 | "from": {"data": "table"}, 61 | "encode": { 62 | "enter": { 63 | "x": {"scale": "scaleIndex", "field": "index", "offset": 1}, 64 | "width": {"scale": "scaleIndex", "band": 1, "offset": -1}, 65 | "y": {"scale": "scaleValue", "field": "value"}, 66 | "y2": {"scale": "scaleValue", "value": 0}, 67 | "tooltip": {"scale": "scaleValue", "field": "value"} 68 | } 69 | } 70 | } 71 | ] 72 | } 73 | -------------------------------------------------------------------------------- /examples/diverging.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v6.json", 3 | "description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.", 4 | "data": { 5 | "url": "https://vega.github.io/vega-lite/data/movies.json" 6 | }, 7 | "transform": [ 8 | {"filter": "datum['IMDB Rating'] != null"}, 9 | {"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}}, 10 | { 11 | "joinaggregate": [ 12 | { 13 | "op": "mean", 14 | "field": "IMDB Rating", 15 | "as": "AverageRating" 16 | } 17 | ] 18 | }, 19 | { 20 | "calculate": "datum['IMDB Rating'] - datum.AverageRating", 21 | "as": "RatingDelta" 22 | } 23 | ], 24 | "mark": "point", 25 | "encoding": { 26 | "x": { 27 | "field": "Release Date", 28 | "type": "temporal" 29 | }, 30 | "y": { 31 | "field": "RatingDelta", 32 | "type": "quantitative", 33 | "title": "Rating Delta" 34 | }, 35 | "color": { 36 | "field": "RatingDelta", 37 | "type": "quantitative", 38 | "scale": {"domainMid": 0}, 39 | "title": "Rating Delta" 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/heatmap.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v4.json", 3 | "data": { 4 | "url": "https://vega.github.io/vega-datasets/data/seattle-weather.csv" 5 | }, 6 | "title": "2010 Daily Max Temperature in Seattle", 7 | "config": { 8 | "view": { 9 | "strokeWidth": 0 10 | }, 11 | "axis": { 12 | "domain": false 13 | } 14 | }, 15 | "mark": { 16 | "type": "rect", 17 | "tooltip": true 18 | }, 19 | "encoding": { 20 | "x": { 21 | "field": "date", 22 | "timeUnit": "date", 23 | "type": "ordinal", 24 | "title": "Day", 25 | "axis": { 26 | "labelAngle": 0, 27 | "format": "%e" 28 | } 29 | }, 30 | "y": { 31 | "field": "date", 32 | "timeUnit": "month", 33 | "type": "ordinal", 34 | "title": "Month" 35 | }, 36 | "color": { 37 | "field": "temp_max", 38 | "aggregate": "max", 39 | "type": "quantitative", 40 | "legend": { 41 | "title": null 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Vega Theme Test 5 | 86 | 87 | 88 | 116 | 117 |
118 |

Additional imports

119 | 120 |

121 | Carbon themes require the Plex font to be imported, as well as an additional CSS file (to style overflow menu & 122 | tooltips). More instructions 123 | here 129 |

130 |
131 | 132 |
133 | 134 | 303 | 304 | 305 | -------------------------------------------------------------------------------- /examples/lines.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega/v6.json", 3 | "width": 200, 4 | "height": 150, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "table", 10 | "values": [ 11 | {"index": 1, "value": 28, "position": 1, "category": "A"}, 12 | {"index": 2, "value": 55, "position": 2, "category": "A"}, 13 | {"index": 3, "value": 43, "position": 3, "category": "A"}, 14 | {"index": 4, "value": 91, "position": 4, "category": "A"}, 15 | {"index": 5, "value": 81, "position": 5, "category": "A"}, 16 | {"index": 6, "value": 53, "position": 6, "category": "A"}, 17 | {"index": 7, "value": 19, "position": 1, "category": "B"}, 18 | {"index": 8, "value": 87, "position": 2, "category": "B"}, 19 | {"index": 9, "value": 52, "position": 3, "category": "B"}, 20 | {"index": 10, "value": 48, "position": 4, "category": "B"}, 21 | {"index": 11, "value": 24, "position": 5, "category": "B"}, 22 | {"index": 12, "value": 49, "position": 6, "category": "B"}, 23 | {"index": 13, "value": 87, "position": 1, "category": "C"}, 24 | {"index": 14, "value": 66, "position": 2, "category": "C"}, 25 | {"index": 15, "value": 17, "position": 3, "category": "C"}, 26 | {"index": 16, "value": 27, "position": 4, "category": "C"}, 27 | {"index": 17, "value": 68, "position": 5, "category": "C"}, 28 | {"index": 18, "value": 16, "position": 6, "category": "C"} 29 | ] 30 | } 31 | ], 32 | 33 | "scales": [ 34 | { 35 | "name": "scalePosition", 36 | "type": "linear", 37 | "range": "width", 38 | "domain": {"data": "table", "field": "position"}, 39 | "zero": false 40 | }, 41 | { 42 | "name": "scaleValue", 43 | "type": "linear", 44 | "range": "height", 45 | "domain": {"data": "table", "field": "value"}, 46 | "zero": true, 47 | "nice": true 48 | }, 49 | { 50 | "name": "colorCategory", 51 | "type": "ordinal", 52 | "range": "category", 53 | "domain": {"data": "table", "field": "category"} 54 | } 55 | ], 56 | 57 | "axes": [ 58 | {"orient": "left", "scale": "scaleValue", "title": "Value"}, 59 | {"orient": "bottom", "scale": "scalePosition", "title": "Position"} 60 | ], 61 | 62 | "marks": [ 63 | { 64 | "type": "group", 65 | "from": { 66 | "facet": { 67 | "name": "series", 68 | "groupby": "category", 69 | "data": "table" 70 | } 71 | }, 72 | "marks": [ 73 | { 74 | "type": "line", 75 | "from": {"data": "series"}, 76 | "encode": { 77 | "enter": { 78 | "x": {"scale": "scalePosition", "field": "position"}, 79 | "y": {"scale": "scaleValue", "field": "value"}, 80 | "stroke": {"scale": "colorCategory", "field": "category"}, 81 | "tooltip": {"signal": "datum"} 82 | } 83 | } 84 | } 85 | ] 86 | } 87 | ] 88 | } 89 | -------------------------------------------------------------------------------- /examples/ramp.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v4.json", 3 | "width": 500, 4 | "height": 300, 5 | "title": "Unemployment rate per county", 6 | "data": { 7 | "url": "https://vega.github.io/vega-datasets/data/us-10m.json", 8 | "format": { 9 | "type": "topojson", 10 | "feature": "counties" 11 | } 12 | }, 13 | "transform": [ 14 | { 15 | "lookup": "id", 16 | "from": { 17 | "data": { 18 | "url": "https://vega.github.io/vega-datasets/data/unemployment.tsv" 19 | }, 20 | "key": "id", 21 | "fields": ["rate"] 22 | } 23 | } 24 | ], 25 | "projection": { 26 | "type": "albersUsa" 27 | }, 28 | "mark": { 29 | "type": "geoshape", 30 | "tooltip": true 31 | }, 32 | "encoding": { 33 | "color": { 34 | "field": "rate", 35 | "type": "quantitative" 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/scatter.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega/v6.json", 3 | "width": 200, 4 | "height": 150, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "table", 10 | "values": [ 11 | {"index": 1, "value": 28, "position": 1, "category": "A"}, 12 | {"index": 2, "value": 55, "position": 2, "category": "A"}, 13 | {"index": 3, "value": 43, "position": 3, "category": "A"}, 14 | {"index": 4, "value": 91, "position": 4, "category": "A"}, 15 | {"index": 5, "value": 81, "position": 5, "category": "A"}, 16 | {"index": 6, "value": 53, "position": 6, "category": "A"}, 17 | {"index": 7, "value": 19, "position": 1, "category": "B"}, 18 | {"index": 8, "value": 87, "position": 2, "category": "B"}, 19 | {"index": 9, "value": 52, "position": 3, "category": "B"}, 20 | {"index": 10, "value": 48, "position": 4, "category": "B"}, 21 | {"index": 11, "value": 24, "position": 5, "category": "B"}, 22 | {"index": 12, "value": 49, "position": 6, "category": "B"}, 23 | {"index": 13, "value": 87, "position": 1, "category": "C"}, 24 | {"index": 14, "value": 66, "position": 2, "category": "C"}, 25 | {"index": 15, "value": 17, "position": 3, "category": "C"}, 26 | {"index": 16, "value": 27, "position": 4, "category": "C"}, 27 | {"index": 17, "value": 68, "position": 5, "category": "C"}, 28 | {"index": 18, "value": 16, "position": 6, "category": "C"} 29 | ] 30 | } 31 | ], 32 | 33 | "scales": [ 34 | { 35 | "name": "scalePosition", 36 | "type": "linear", 37 | "range": "width", 38 | "domain": {"data": "table", "field": "position"}, 39 | "zero": false 40 | }, 41 | { 42 | "name": "scaleValue", 43 | "type": "linear", 44 | "range": "height", 45 | "domain": {"data": "table", "field": "value"}, 46 | "zero": true, 47 | "nice": true 48 | }, 49 | { 50 | "name": "colorCategory", 51 | "type": "ordinal", 52 | "range": "category", 53 | "domain": {"data": "table", "field": "category"} 54 | }, 55 | { 56 | "name": "symbolCategory", 57 | "type": "ordinal", 58 | "range": "symbol", 59 | "domain": {"data": "table", "field": "category"} 60 | } 61 | ], 62 | 63 | "axes": [ 64 | {"orient": "left", "scale": "scaleValue", "title": "Value"}, 65 | {"orient": "bottom", "scale": "scalePosition", "title": "Position"} 66 | ], 67 | 68 | "legends": [{"stroke": "colorCategory", "shape": "symbolCategory", "title": "Category"}], 69 | 70 | "marks": [ 71 | { 72 | "type": "symbol", 73 | "from": {"data": "table"}, 74 | "encode": { 75 | "enter": { 76 | "x": {"scale": "scalePosition", "field": "position"}, 77 | "y": {"scale": "scaleValue", "field": "value"}, 78 | "shape": {"scale": "symbolCategory", "field": "category"}, 79 | "stroke": {"scale": "colorCategory", "field": "category"}, 80 | "tooltip": {"signal": "datum"} 81 | } 82 | } 83 | } 84 | ] 85 | } 86 | -------------------------------------------------------------------------------- /examples/stacked.vl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://vega.github.io/schema/vega-lite/v4.json", 3 | "data": { 4 | "values": [ 5 | {"yield": 27, "variety": "Manchuria", "year": 1931, "site": "University Farm"}, 6 | {"yield": 48.86667, "variety": "Manchuria", "year": 1931, "site": "Waseca"}, 7 | {"yield": 27.43334, "variety": "Manchuria", "year": 1931, "site": "Morris"}, 8 | {"yield": 39.93333, "variety": "Manchuria", "year": 1931, "site": "Crookston"}, 9 | {"yield": 32.96667, "variety": "Manchuria", "year": 1931, "site": "Grand Rapids"}, 10 | {"yield": 28.96667, "variety": "Manchuria", "year": 1931, "site": "Duluth"}, 11 | {"yield": 43.06666, "variety": "Glabron", "year": 1931, "site": "University Farm"}, 12 | {"yield": 55.2, "variety": "Glabron", "year": 1931, "site": "Waseca"}, 13 | {"yield": 28.76667, "variety": "Glabron", "year": 1931, "site": "Morris"}, 14 | {"yield": 38.13333, "variety": "Glabron", "year": 1931, "site": "Crookston"}, 15 | {"yield": 29.13333, "variety": "Glabron", "year": 1931, "site": "Grand Rapids"}, 16 | {"yield": 29.66667, "variety": "Glabron", "year": 1931, "site": "Duluth"}, 17 | {"yield": 35.13333, "variety": "Svansota", "year": 1931, "site": "University Farm"}, 18 | {"yield": 47.33333, "variety": "Svansota", "year": 1931, "site": "Waseca"}, 19 | {"yield": 25.76667, "variety": "Svansota", "year": 1931, "site": "Morris"}, 20 | {"yield": 40.46667, "variety": "Svansota", "year": 1931, "site": "Crookston"}, 21 | {"yield": 29.66667, "variety": "Svansota", "year": 1931, "site": "Grand Rapids"}, 22 | {"yield": 25.7, "variety": "Svansota", "year": 1931, "site": "Duluth"}, 23 | {"yield": 39.9, "variety": "Velvet", "year": 1931, "site": "University Farm"}, 24 | {"yield": 50.23333, "variety": "Velvet", "year": 1931, "site": "Waseca"}, 25 | {"yield": 26.13333, "variety": "Velvet", "year": 1931, "site": "Morris"}, 26 | {"yield": 41.33333, "variety": "Velvet", "year": 1931, "site": "Crookston"}, 27 | {"yield": 23.03333, "variety": "Velvet", "year": 1931, "site": "Grand Rapids"}, 28 | {"yield": 26.3, "variety": "Velvet", "year": 1931, "site": "Duluth"}, 29 | {"yield": 36.56666, "variety": "Trebi", "year": 1931, "site": "University Farm"}, 30 | {"yield": 63.8333, "variety": "Trebi", "year": 1931, "site": "Waseca"}, 31 | {"yield": 43.76667, "variety": "Trebi", "year": 1931, "site": "Morris"}, 32 | {"yield": 46.93333, "variety": "Trebi", "year": 1931, "site": "Crookston"}, 33 | {"yield": 29.76667, "variety": "Trebi", "year": 1931, "site": "Grand Rapids"}, 34 | {"yield": 33.93333, "variety": "Trebi", "year": 1931, "site": "Duluth"}, 35 | {"yield": 43.26667, "variety": "No. 457", "year": 1931, "site": "University Farm"}, 36 | {"yield": 58.1, "variety": "No. 457", "year": 1931, "site": "Waseca"}, 37 | {"yield": 28.7, "variety": "No. 457", "year": 1931, "site": "Morris"}, 38 | {"yield": 45.66667, "variety": "No. 457", "year": 1931, "site": "Crookston"}, 39 | {"yield": 32.16667, "variety": "No. 457", "year": 1931, "site": "Grand Rapids"}, 40 | {"yield": 33.6, "variety": "No. 457", "year": 1931, "site": "Duluth"}, 41 | {"yield": 36.6, "variety": "No. 462", "year": 1931, "site": "University Farm"}, 42 | {"yield": 65.7667, "variety": "No. 462", "year": 1931, "site": "Waseca"}, 43 | {"yield": 30.36667, "variety": "No. 462", "year": 1931, "site": "Morris"}, 44 | {"yield": 48.56666, "variety": "No. 462", "year": 1931, "site": "Crookston"}, 45 | {"yield": 24.93334, "variety": "No. 462", "year": 1931, "site": "Grand Rapids"}, 46 | {"yield": 28.1, "variety": "No. 462", "year": 1931, "site": "Duluth"}, 47 | {"yield": 32.76667, "variety": "Peatland", "year": 1931, "site": "University Farm"}, 48 | {"yield": 48.56666, "variety": "Peatland", "year": 1931, "site": "Waseca"}, 49 | {"yield": 29.86667, "variety": "Peatland", "year": 1931, "site": "Morris"}, 50 | {"yield": 41.6, "variety": "Peatland", "year": 1931, "site": "Crookston"}, 51 | {"yield": 34.7, "variety": "Peatland", "year": 1931, "site": "Grand Rapids"}, 52 | {"yield": 32, "variety": "Peatland", "year": 1931, "site": "Duluth"}, 53 | {"yield": 24.66667, "variety": "No. 475", "year": 1931, "site": "University Farm"}, 54 | {"yield": 46.76667, "variety": "No. 475", "year": 1931, "site": "Waseca"}, 55 | {"yield": 22.6, "variety": "No. 475", "year": 1931, "site": "Morris"}, 56 | {"yield": 44.1, "variety": "No. 475", "year": 1931, "site": "Crookston"}, 57 | {"yield": 19.7, "variety": "No. 475", "year": 1931, "site": "Grand Rapids"}, 58 | {"yield": 33.06666, "variety": "No. 475", "year": 1931, "site": "Duluth"}, 59 | {"yield": 39.3, "variety": "Wisconsin No. 38", "year": 1931, "site": "University Farm"}, 60 | {"yield": 58.8, "variety": "Wisconsin No. 38", "year": 1931, "site": "Waseca"}, 61 | {"yield": 29.46667, "variety": "Wisconsin No. 38", "year": 1931, "site": "Morris"}, 62 | {"yield": 49.86667, "variety": "Wisconsin No. 38", "year": 1931, "site": "Crookston"}, 63 | {"yield": 34.46667, "variety": "Wisconsin No. 38", "year": 1931, "site": "Grand Rapids"}, 64 | {"yield": 31.6, "variety": "Wisconsin No. 38", "year": 1931, "site": "Duluth"}, 65 | {"yield": 26.9, "variety": "Manchuria", "year": 1932, "site": "University Farm"}, 66 | {"yield": 33.46667, "variety": "Manchuria", "year": 1932, "site": "Waseca"}, 67 | {"yield": 34.36666, "variety": "Manchuria", "year": 1932, "site": "Morris"}, 68 | {"yield": 32.96667, "variety": "Manchuria", "year": 1932, "site": "Crookston"}, 69 | {"yield": 22.13333, "variety": "Manchuria", "year": 1932, "site": "Grand Rapids"}, 70 | {"yield": 22.56667, "variety": "Manchuria", "year": 1932, "site": "Duluth"}, 71 | {"yield": 36.8, "variety": "Glabron", "year": 1932, "site": "University Farm"}, 72 | {"yield": 37.73333, "variety": "Glabron", "year": 1932, "site": "Waseca"}, 73 | {"yield": 35.13333, "variety": "Glabron", "year": 1932, "site": "Morris"}, 74 | {"yield": 26.16667, "variety": "Glabron", "year": 1932, "site": "Crookston"}, 75 | {"yield": 14.43333, "variety": "Glabron", "year": 1932, "site": "Grand Rapids"}, 76 | {"yield": 25.86667, "variety": "Glabron", "year": 1932, "site": "Duluth"}, 77 | {"yield": 27.43334, "variety": "Svansota", "year": 1932, "site": "University Farm"}, 78 | {"yield": 38.5, "variety": "Svansota", "year": 1932, "site": "Waseca"}, 79 | {"yield": 35.03333, "variety": "Svansota", "year": 1932, "site": "Morris"}, 80 | {"yield": 20.63333, "variety": "Svansota", "year": 1932, "site": "Crookston"}, 81 | {"yield": 16.63333, "variety": "Svansota", "year": 1932, "site": "Grand Rapids"}, 82 | {"yield": 22.23333, "variety": "Svansota", "year": 1932, "site": "Duluth"}, 83 | {"yield": 26.8, "variety": "Velvet", "year": 1932, "site": "University Farm"}, 84 | {"yield": 37.4, "variety": "Velvet", "year": 1932, "site": "Waseca"}, 85 | {"yield": 38.83333, "variety": "Velvet", "year": 1932, "site": "Morris"}, 86 | {"yield": 32.06666, "variety": "Velvet", "year": 1932, "site": "Crookston"}, 87 | {"yield": 32.23333, "variety": "Velvet", "year": 1932, "site": "Grand Rapids"}, 88 | {"yield": 22.46667, "variety": "Velvet", "year": 1932, "site": "Duluth"}, 89 | {"yield": 29.06667, "variety": "Trebi", "year": 1932, "site": "University Farm"}, 90 | {"yield": 49.2333, "variety": "Trebi", "year": 1932, "site": "Waseca"}, 91 | {"yield": 46.63333, "variety": "Trebi", "year": 1932, "site": "Morris"}, 92 | {"yield": 41.83333, "variety": "Trebi", "year": 1932, "site": "Crookston"}, 93 | {"yield": 20.63333, "variety": "Trebi", "year": 1932, "site": "Grand Rapids"}, 94 | {"yield": 30.6, "variety": "Trebi", "year": 1932, "site": "Duluth"}, 95 | {"yield": 26.43334, "variety": "No. 457", "year": 1932, "site": "University Farm"}, 96 | {"yield": 42.2, "variety": "No. 457", "year": 1932, "site": "Waseca"}, 97 | {"yield": 43.53334, "variety": "No. 457", "year": 1932, "site": "Morris"}, 98 | {"yield": 34.33333, "variety": "No. 457", "year": 1932, "site": "Crookston"}, 99 | {"yield": 19.46667, "variety": "No. 457", "year": 1932, "site": "Grand Rapids"}, 100 | {"yield": 22.7, "variety": "No. 457", "year": 1932, "site": "Duluth"}, 101 | {"yield": 25.56667, "variety": "No. 462", "year": 1932, "site": "University Farm"}, 102 | {"yield": 44.7, "variety": "No. 462", "year": 1932, "site": "Waseca"}, 103 | {"yield": 47, "variety": "No. 462", "year": 1932, "site": "Morris"}, 104 | {"yield": 30.53333, "variety": "No. 462", "year": 1932, "site": "Crookston"}, 105 | {"yield": 19.9, "variety": "No. 462", "year": 1932, "site": "Grand Rapids"}, 106 | {"yield": 22.5, "variety": "No. 462", "year": 1932, "site": "Duluth"}, 107 | {"yield": 28.06667, "variety": "Peatland", "year": 1932, "site": "University Farm"}, 108 | {"yield": 36.03333, "variety": "Peatland", "year": 1932, "site": "Waseca"}, 109 | {"yield": 43.2, "variety": "Peatland", "year": 1932, "site": "Morris"}, 110 | {"yield": 25.23333, "variety": "Peatland", "year": 1932, "site": "Crookston"}, 111 | {"yield": 26.76667, "variety": "Peatland", "year": 1932, "site": "Grand Rapids"}, 112 | {"yield": 31.36667, "variety": "Peatland", "year": 1932, "site": "Duluth"}, 113 | {"yield": 30, "variety": "No. 475", "year": 1932, "site": "University Farm"}, 114 | {"yield": 41.26667, "variety": "No. 475", "year": 1932, "site": "Waseca"}, 115 | {"yield": 44.23333, "variety": "No. 475", "year": 1932, "site": "Morris"}, 116 | {"yield": 32.13333, "variety": "No. 475", "year": 1932, "site": "Crookston"}, 117 | {"yield": 15.23333, "variety": "No. 475", "year": 1932, "site": "Grand Rapids"}, 118 | {"yield": 27.36667, "variety": "No. 475", "year": 1932, "site": "Duluth"}, 119 | {"yield": 38, "variety": "Wisconsin No. 38", "year": 1932, "site": "University Farm"}, 120 | {"yield": 58.16667, "variety": "Wisconsin No. 38", "year": 1932, "site": "Waseca"}, 121 | {"yield": 47.16667, "variety": "Wisconsin No. 38", "year": 1932, "site": "Morris"}, 122 | {"yield": 35.9, "variety": "Wisconsin No. 38", "year": 1932, "site": "Crookston"}, 123 | {"yield": 20.66667, "variety": "Wisconsin No. 38", "year": 1932, "site": "Grand Rapids"}, 124 | {"yield": 29.33333, "variety": "Wisconsin No. 38", "year": 1932, "site": "Duluth"} 125 | ] 126 | }, 127 | "mark": { 128 | "type": "bar", 129 | "tooltip": true 130 | }, 131 | "encoding": { 132 | "column": {"field": "year", "type": "ordinal"}, 133 | "x": {"field": "yield", "type": "quantitative", "aggregate": "sum"}, 134 | "y": {"field": "variety", "type": "nominal"}, 135 | "color": {"field": "site", "type": "nominal"} 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vega-themes", 3 | "version": "3.0.0", 4 | "description": "Themes for stylized Vega and Vega-Lite visualizations.", 5 | "keywords": [ 6 | "vega", 7 | "vega-lite", 8 | "themes", 9 | "style" 10 | ], 11 | "license": "BSD-3-Clause", 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/vega/vega-themes.git" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/vega/vega-themes/issues" 18 | }, 19 | "homepage": "https://github.com/vega/vega-themes#readme", 20 | "author": { 21 | "name": "Vega", 22 | "url": "https://vega.github.io" 23 | }, 24 | "funding": { 25 | "url": "https://app.hubspot.com/payments/GyPC972GD9Rt" 26 | }, 27 | "type": "module", 28 | "exports": { 29 | "types": "./build/index.d.ts", 30 | "default": "./build/index.js" 31 | }, 32 | "files": [ 33 | "src", 34 | "build" 35 | ], 36 | "scripts": { 37 | "prebuild": "npm run clean", 38 | "build": "rollup -c", 39 | "clean": "del-cli build src/style.ts examples/dist", 40 | "deploy:gh": "vite build examples && gh-pages -d examples/dist && npm run clean", 41 | "preversion": "npm run lint", 42 | "serve": "browser-sync start -s -f build examples --serveStatic examples", 43 | "dev": "vite examples", 44 | "format": "eslint --fix && prettier . --write", 45 | "lint": "eslint && prettier . --check", 46 | "release": "release-it" 47 | }, 48 | "devDependencies": { 49 | "@eslint/js": "^9.26.0", 50 | "@release-it/conventional-changelog": "^10.0.1", 51 | "@rollup/plugin-json": "^6.1.0", 52 | "@rollup/plugin-typescript": "^12.1.2", 53 | "del-cli": "^7.0.0", 54 | "eslint": "^9.26.0", 55 | "eslint-config-prettier": "^10.1.5", 56 | "eslint-plugin-prettier": "^5.4.0", 57 | "gh-pages": "^6.3.0", 58 | "globals": "^16.1.0", 59 | "prettier": "^3.5.3", 60 | "release-it": "^19.0.2", 61 | "rollup": "^4.40.2", 62 | "rollup-plugin-bundle-size": "^1.0.3", 63 | "typescript": "~5.9.3", 64 | "typescript-eslint": "^8.32.0", 65 | "vega": "^6.1.2", 66 | "vega-embed": "^7.0.2", 67 | "vega-lite": "^6.1.0", 68 | "vite": "^7.0.0" 69 | }, 70 | "peerDependencies": { 71 | "vega": "*", 72 | "vega-lite": "*" 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @see https://prettier.io/docs/en/configuration.html 3 | * @type {import("prettier").Config} 4 | */ 5 | const config = { 6 | printWidth: 120, 7 | proseWrap: 'never', 8 | bracketSpacing: false, 9 | singleQuote: true, 10 | }; 11 | 12 | export default config; 13 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import json from '@rollup/plugin-json'; 2 | import bundleSize from 'rollup-plugin-bundle-size'; 3 | import typescript from '@rollup/plugin-typescript'; 4 | 5 | import pkg from './package.json' with {type: 'json'}; 6 | 7 | const outputs = [ 8 | { 9 | input: 'src/index.ts', 10 | output: { 11 | file: pkg.exports.default, 12 | format: 'esm', 13 | sourcemap: true, 14 | }, 15 | plugins: [json(), typescript(), bundleSize()], 16 | }, 17 | ]; 18 | 19 | export default outputs; 20 | -------------------------------------------------------------------------------- /src/carbongen.ts: -------------------------------------------------------------------------------- 1 | import {Config} from './config.js'; 2 | 3 | const defaultFont = 'IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,".sfnstext-regular",sans-serif'; 4 | const condensedFont = 5 | 'IBM Plex Sans Condensed, system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif'; 6 | const fontWeight = 400; 7 | 8 | const TOKENS = { 9 | textPrimary: {g90: '#f4f4f4', g100: '#f4f4f4', white: '#161616', g10: '#161616'}, 10 | textSecondary: {g90: '#c6c6c6', g100: '#c6c6c6', white: '#525252', g10: '#525252'}, 11 | // layer 12 | layerAccent01: { 13 | white: '#e0e0e0', 14 | g10: '#e0e0e0', 15 | g90: '#525252', 16 | g100: '#393939', 17 | }, 18 | // grid 19 | gridBg: { 20 | white: '#ffffff', 21 | g10: '#ffffff', 22 | g90: '#161616', 23 | g100: '#161616', 24 | }, 25 | }; 26 | 27 | const darkCategories = [ 28 | '#8a3ffc', 29 | '#33b1ff', 30 | '#007d79', 31 | '#ff7eb6', 32 | '#fa4d56', 33 | '#fff1f1', 34 | '#6fdc8c', 35 | '#4589ff', 36 | '#d12771', 37 | '#d2a106', 38 | '#08bdba', 39 | '#bae6ff', 40 | '#ba4e00', 41 | '#d4bbff', 42 | ]; 43 | 44 | const lightCategories = [ 45 | '#6929c4', 46 | '#1192e8', 47 | '#005d5d', 48 | '#9f1853', 49 | '#fa4d56', 50 | '#570408', 51 | '#198038', 52 | '#002d9c', 53 | '#ee538b', 54 | '#b28600', 55 | '#009d9a', 56 | '#012749', 57 | '#8a3800', 58 | '#a56eff', 59 | ]; 60 | 61 | function genCarbonConfig({theme, background}: {theme: 'white' | 'g10' | 'g90' | 'g100'; background: string}): Config { 62 | const type = ['white', 'g10'].includes(theme) ? 'light' : 'dark'; 63 | 64 | const viewbg = TOKENS.gridBg[theme]; 65 | 66 | const titleColor = TOKENS.textPrimary[theme]; 67 | const textColor = TOKENS.textSecondary[theme]; 68 | 69 | const category = type === 'dark' ? darkCategories : lightCategories; 70 | const markColor = type === 'dark' ? '#d4bbff' : '#6929c4'; 71 | 72 | return { 73 | background, 74 | 75 | arc: {fill: markColor}, 76 | area: {fill: markColor}, 77 | path: {stroke: markColor}, 78 | rect: {fill: markColor}, 79 | shape: {stroke: markColor}, 80 | symbol: {stroke: markColor}, 81 | circle: {fill: markColor}, 82 | 83 | view: { 84 | fill: viewbg, 85 | stroke: viewbg, 86 | }, 87 | 88 | group: { 89 | fill: viewbg, 90 | }, 91 | 92 | title: { 93 | color: titleColor, 94 | anchor: 'start', 95 | dy: -15, 96 | fontSize: 16, 97 | font: defaultFont, 98 | fontWeight: 600, 99 | }, 100 | 101 | axis: { 102 | // Axis labels 103 | labelColor: textColor, 104 | labelFontSize: 12, 105 | labelFont: condensedFont, 106 | labelFontWeight: fontWeight, 107 | // Axis titles 108 | titleColor: titleColor, 109 | titleFontWeight: 600, 110 | titleFontSize: 12, 111 | 112 | // MISC 113 | grid: true, 114 | gridColor: TOKENS.layerAccent01[theme], 115 | labelAngle: 0, 116 | }, 117 | axisX: { 118 | titlePadding: 10, 119 | }, 120 | axisY: { 121 | titlePadding: 2.5, 122 | }, 123 | style: { 124 | 'guide-label': { 125 | font: defaultFont, 126 | fill: textColor, 127 | fontWeight: fontWeight, 128 | }, 129 | 'guide-title': { 130 | font: defaultFont, 131 | fill: textColor, 132 | fontWeight: fontWeight, 133 | }, 134 | }, 135 | 136 | range: { 137 | category, 138 | diverging: [ 139 | '#750e13', 140 | '#a2191f', 141 | '#da1e28', 142 | '#fa4d56', 143 | '#ff8389', 144 | '#ffb3b8', 145 | '#ffd7d9', 146 | '#fff1f1', 147 | '#e5f6ff', 148 | '#bae6ff', 149 | '#82cfff', 150 | '#33b1ff', 151 | '#1192e8', 152 | '#0072c3', 153 | '#00539a', 154 | '#003a6d', 155 | ], 156 | heatmap: [ 157 | '#f6f2ff', 158 | '#e8daff', 159 | '#d4bbff', 160 | '#be95ff', 161 | '#a56eff', 162 | '#8a3ffc', 163 | '#6929c4', 164 | '#491d8b', 165 | '#31135e', 166 | '#1c0f30', 167 | ], 168 | }, 169 | }; 170 | } 171 | 172 | export default genCarbonConfig; 173 | -------------------------------------------------------------------------------- /src/config.ts: -------------------------------------------------------------------------------- 1 | import type {Config as VgConfig} from 'vega'; 2 | import type {Config as VlConfig} from 'vega-lite'; 3 | 4 | export type Config = VgConfig | VlConfig; 5 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import pkg from '../package.json'; 2 | const version = pkg.version; 3 | 4 | export {default as dark} from './theme-dark.js'; 5 | export {default as excel} from './theme-excel.js'; 6 | export {default as fivethirtyeight} from './theme-fivethirtyeight.js'; 7 | export {default as ggplot2} from './theme-ggplot2.js'; 8 | export {default as latimes} from './theme-latimes.js'; 9 | export {default as quartz} from './theme-quartz.js'; 10 | export {default as vox} from './theme-vox.js'; 11 | export {default as urbaninstitute} from './theme-urbaninstitute.js'; 12 | export {default as googlecharts} from './theme-googlecharts.js'; 13 | export {default as powerbi} from './theme-powerbi.js'; 14 | export {default as carbonwhite} from './theme-carbonwhite.js'; 15 | export {default as carbong10} from './theme-carbong10.js'; 16 | export {default as carbong90} from './theme-carbong90.js'; 17 | export {default as carbong100} from './theme-carbong100.js'; 18 | 19 | export {version}; 20 | -------------------------------------------------------------------------------- /src/theme-carbong10.ts: -------------------------------------------------------------------------------- 1 | import genCarbonConfig from './carbongen.js'; 2 | 3 | const carbong10 = genCarbonConfig({ 4 | theme: 'g10', 5 | background: '#f4f4f4', 6 | }); 7 | 8 | export default carbong10; 9 | -------------------------------------------------------------------------------- /src/theme-carbong100.ts: -------------------------------------------------------------------------------- 1 | import genCarbonConfig from './carbongen.js'; 2 | 3 | const carbong100 = genCarbonConfig({ 4 | theme: 'g100', 5 | background: '#161616', 6 | }); 7 | 8 | export default carbong100; 9 | -------------------------------------------------------------------------------- /src/theme-carbong90.ts: -------------------------------------------------------------------------------- 1 | import genCarbonConfig from './carbongen.js'; 2 | 3 | const carbong90 = genCarbonConfig({ 4 | theme: 'g90', 5 | background: '#262626', 6 | }); 7 | 8 | export default carbong90; 9 | -------------------------------------------------------------------------------- /src/theme-carbonwhite.ts: -------------------------------------------------------------------------------- 1 | import genCarbonConfig from './carbongen.js'; 2 | 3 | const carbonwhite = genCarbonConfig({ 4 | theme: 'white', 5 | background: '#ffffff', 6 | }); 7 | 8 | export default carbonwhite; 9 | -------------------------------------------------------------------------------- /src/theme-dark.ts: -------------------------------------------------------------------------------- 1 | import {Config} from './config.js'; 2 | 3 | const lightColor = '#fff'; 4 | const medColor = '#888'; 5 | 6 | const darkTheme: Config = { 7 | background: '#333', 8 | 9 | view: { 10 | stroke: medColor, 11 | }, 12 | 13 | title: { 14 | color: lightColor, 15 | subtitleColor: lightColor, 16 | }, 17 | 18 | style: { 19 | 'guide-label': { 20 | fill: lightColor, 21 | }, 22 | 'guide-title': { 23 | fill: lightColor, 24 | }, 25 | }, 26 | 27 | axis: { 28 | domainColor: lightColor, 29 | gridColor: medColor, 30 | tickColor: lightColor, 31 | }, 32 | }; 33 | 34 | export default darkTheme; 35 | -------------------------------------------------------------------------------- /src/theme-excel.ts: -------------------------------------------------------------------------------- 1 | import {Config} from './config.js'; 2 | 3 | const markColor = '#4572a7'; 4 | 5 | const excelTheme: Config = { 6 | background: '#fff', 7 | 8 | arc: {fill: markColor}, 9 | area: {fill: markColor}, 10 | line: {stroke: markColor, strokeWidth: 2}, 11 | path: {stroke: markColor}, 12 | rect: {fill: markColor}, 13 | shape: {stroke: markColor}, 14 | symbol: {fill: markColor, strokeWidth: 1.5, size: 50}, 15 | 16 | axis: { 17 | bandPosition: 0.5, 18 | grid: true, 19 | gridColor: '#000000', 20 | gridOpacity: 1, 21 | gridWidth: 0.5, 22 | labelPadding: 10, 23 | tickSize: 5, 24 | tickWidth: 0.5, 25 | }, 26 | 27 | axisBand: { 28 | grid: false, 29 | tickExtra: true, 30 | }, 31 | 32 | legend: { 33 | labelBaseline: 'middle', 34 | labelFontSize: 11, 35 | symbolSize: 50, 36 | symbolType: 'square', 37 | }, 38 | 39 | range: { 40 | category: [ 41 | '#4572a7', 42 | '#aa4643', 43 | '#8aa453', 44 | '#71598e', 45 | '#4598ae', 46 | '#d98445', 47 | '#94aace', 48 | '#d09393', 49 | '#b9cc98', 50 | '#a99cbc', 51 | ], 52 | }, 53 | }; 54 | 55 | export default excelTheme; 56 | -------------------------------------------------------------------------------- /src/theme-fivethirtyeight.ts: -------------------------------------------------------------------------------- 1 | import {Config} from './config.js'; 2 | 3 | const markColor = '#30a2da'; 4 | const axisColor = '#cbcbcb'; 5 | const guideLabelColor = '#999'; 6 | const guideTitleColor = '#333'; 7 | const backgroundColor = '#f0f0f0'; 8 | const blackTitle = '#333'; 9 | 10 | const fiveThirtyEightTheme: Config = { 11 | arc: {fill: markColor}, 12 | area: {fill: markColor}, 13 | 14 | axis: { 15 | domainColor: axisColor, 16 | grid: true, 17 | gridColor: axisColor, 18 | gridWidth: 1, 19 | labelColor: guideLabelColor, 20 | labelFontSize: 10, 21 | titleColor: guideTitleColor, 22 | tickColor: axisColor, 23 | tickSize: 10, 24 | titleFontSize: 14, 25 | titlePadding: 10, 26 | labelPadding: 4, 27 | }, 28 | 29 | axisBand: { 30 | grid: false, 31 | }, 32 | 33 | background: backgroundColor, 34 | 35 | group: { 36 | fill: backgroundColor, 37 | }, 38 | 39 | legend: { 40 | labelColor: blackTitle, 41 | labelFontSize: 11, 42 | padding: 1, 43 | symbolSize: 30, 44 | symbolType: 'square', 45 | titleColor: blackTitle, 46 | titleFontSize: 14, 47 | titlePadding: 10, 48 | }, 49 | 50 | line: { 51 | stroke: markColor, 52 | strokeWidth: 2, 53 | }, 54 | 55 | path: {stroke: markColor, strokeWidth: 0.5}, 56 | rect: {fill: markColor}, 57 | 58 | range: { 59 | category: [ 60 | '#30a2da', 61 | '#fc4f30', 62 | '#e5ae38', 63 | '#6d904f', 64 | '#8b8b8b', 65 | '#b96db8', 66 | '#ff9e27', 67 | '#56cc60', 68 | '#52d2ca', 69 | '#52689e', 70 | '#545454', 71 | '#9fe4f8', 72 | ], 73 | 74 | diverging: ['#cc0020', '#e77866', '#f6e7e1', '#d6e8ed', '#91bfd9', '#1d78b5'], 75 | heatmap: ['#d6e8ed', '#cee0e5', '#91bfd9', '#549cc6', '#1d78b5'], 76 | }, 77 | 78 | point: { 79 | filled: true, 80 | shape: 'circle', 81 | }, 82 | 83 | shape: {stroke: markColor}, 84 | 85 | bar: { 86 | binSpacing: 2, 87 | fill: markColor, 88 | stroke: null, 89 | }, 90 | 91 | title: { 92 | anchor: 'start', 93 | fontSize: 24, 94 | fontWeight: 600, 95 | offset: 20, 96 | }, 97 | }; 98 | 99 | export default fiveThirtyEightTheme; 100 | -------------------------------------------------------------------------------- /src/theme-ggplot2.ts: -------------------------------------------------------------------------------- 1 | import {Config} from './config.js'; 2 | 3 | const markColor = '#000'; 4 | 5 | const ggplot2Theme: Config = { 6 | group: { 7 | fill: '#e5e5e5', 8 | }, 9 | 10 | arc: {fill: markColor}, 11 | area: {fill: markColor}, 12 | line: {stroke: markColor}, 13 | path: {stroke: markColor}, 14 | rect: {fill: markColor}, 15 | shape: {stroke: markColor}, 16 | symbol: {fill: markColor, size: 40}, 17 | 18 | axis: { 19 | domain: false, 20 | grid: true, 21 | gridColor: '#FFFFFF', 22 | gridOpacity: 1, 23 | labelColor: '#7F7F7F', 24 | labelPadding: 4, 25 | tickColor: '#7F7F7F', 26 | tickSize: 5.67, 27 | titleFontSize: 16, 28 | titleFontWeight: 'normal', 29 | }, 30 | 31 | legend: { 32 | labelBaseline: 'middle', 33 | labelFontSize: 11, 34 | symbolSize: 40, 35 | }, 36 | 37 | range: { 38 | category: [ 39 | '#000000', 40 | '#7F7F7F', 41 | '#1A1A1A', 42 | '#999999', 43 | '#333333', 44 | '#B0B0B0', 45 | '#4D4D4D', 46 | '#C9C9C9', 47 | '#666666', 48 | '#DCDCDC', 49 | ], 50 | }, 51 | }; 52 | 53 | export default ggplot2Theme; 54 | -------------------------------------------------------------------------------- /src/theme-googlecharts.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC. 3 | * 4 | * Use of this source code is governed by a BSD-style 5 | * license that can be found in the LICENSE file or at 6 | * https://developers.google.com/open-source/licenses/bsd 7 | */ 8 | 9 | import {Config} from './config.js'; 10 | 11 | const markColor = '#3366CC'; 12 | const gridColor = '#ccc'; 13 | const defaultFont = 'Arial, sans-serif'; 14 | 15 | const googlechartsTheme: Config = { 16 | arc: {fill: markColor}, 17 | area: {fill: markColor}, 18 | path: {stroke: markColor}, 19 | rect: {fill: markColor}, 20 | shape: {stroke: markColor}, 21 | symbol: {stroke: markColor}, 22 | circle: {fill: markColor}, 23 | background: '#fff', 24 | padding: { 25 | top: 10, 26 | right: 10, 27 | bottom: 10, 28 | left: 10, 29 | }, 30 | style: { 31 | 'guide-label': { 32 | font: defaultFont, 33 | fontSize: 12, 34 | }, 35 | 'guide-title': { 36 | font: defaultFont, 37 | fontSize: 12, 38 | }, 39 | 'group-title': { 40 | font: defaultFont, 41 | fontSize: 12, 42 | }, 43 | }, 44 | title: { 45 | font: defaultFont, 46 | fontSize: 14, 47 | fontWeight: 'bold', 48 | dy: -3, 49 | anchor: 'start', 50 | }, 51 | axis: { 52 | gridColor: gridColor, 53 | tickColor: gridColor, 54 | domain: false, 55 | grid: true, 56 | }, 57 | range: { 58 | category: [ 59 | '#4285F4', 60 | '#DB4437', 61 | '#F4B400', 62 | '#0F9D58', 63 | '#AB47BC', 64 | '#00ACC1', 65 | '#FF7043', 66 | '#9E9D24', 67 | '#5C6BC0', 68 | '#F06292', 69 | '#00796B', 70 | '#C2185B', 71 | ], 72 | heatmap: ['#c6dafc', '#5e97f6', '#2a56c6'], 73 | }, 74 | }; 75 | 76 | export default googlechartsTheme; 77 | -------------------------------------------------------------------------------- /src/theme-latimes.ts: -------------------------------------------------------------------------------- 1 | import {Config} from './config.js'; 2 | 3 | const headlineFontSize = 22; 4 | const headlineFontWeight = 'normal'; 5 | const labelFont = 'Benton Gothic, sans-serif'; 6 | const labelFontSize = 11.5; 7 | const labelFontWeight = 'normal'; 8 | const markColor = '#82c6df'; 9 | // const markHighlight = '#006d8f'; 10 | // const markDemocrat = '#5789b8'; 11 | // const markRepublican = '#d94f54'; 12 | const titleFont = 'Benton Gothic Bold, sans-serif'; 13 | const titleFontWeight = 'normal'; 14 | const titleFontSize = 13; 15 | 16 | const colorSchemes = { 17 | 'category-6': ['#ec8431', '#829eb1', '#c89d29', '#3580b1', '#adc839', '#ab7fb4'], 18 | 'fire-7': ['#fbf2c7', '#f9e39c', '#f8d36e', '#f4bb6a', '#e68a4f', '#d15a40', '#ab4232'], 19 | 'fireandice-6': ['#e68a4f', '#f4bb6a', '#f9e39c', '#dadfe2', '#a6b7c6', '#849eae'], 20 | 'ice-7': ['#edefee', '#dadfe2', '#c4ccd2', '#a6b7c6', '#849eae', '#607785', '#47525d'], 21 | }; 22 | 23 | const latimesTheme: Config = { 24 | background: '#ffffff', 25 | 26 | title: { 27 | anchor: 'start', 28 | color: '#000000', 29 | font: titleFont, 30 | fontSize: headlineFontSize, 31 | fontWeight: headlineFontWeight, 32 | }, 33 | 34 | arc: {fill: markColor}, 35 | area: {fill: markColor}, 36 | line: {stroke: markColor, strokeWidth: 2}, 37 | path: {stroke: markColor}, 38 | rect: {fill: markColor}, 39 | shape: {stroke: markColor}, 40 | symbol: {fill: markColor, size: 30}, 41 | 42 | axis: { 43 | labelFont, 44 | labelFontSize, 45 | labelFontWeight, 46 | titleFont, 47 | titleFontSize, 48 | titleFontWeight, 49 | }, 50 | 51 | axisX: { 52 | labelAngle: 0, 53 | labelPadding: 4, 54 | tickSize: 3, 55 | }, 56 | 57 | axisY: { 58 | labelBaseline: 'middle', 59 | maxExtent: 45, 60 | minExtent: 45, 61 | tickSize: 2, 62 | titleAlign: 'left', 63 | titleAngle: 0, 64 | titleX: -45, 65 | titleY: -11, 66 | }, 67 | 68 | legend: { 69 | labelFont, 70 | labelFontSize, 71 | symbolType: 'square', 72 | titleFont, 73 | titleFontSize, 74 | titleFontWeight, 75 | }, 76 | 77 | range: { 78 | category: colorSchemes['category-6'], 79 | diverging: colorSchemes['fireandice-6'], 80 | heatmap: colorSchemes['fire-7'], 81 | ordinal: colorSchemes['fire-7'], 82 | ramp: colorSchemes['fire-7'], 83 | }, 84 | }; 85 | 86 | export default latimesTheme; 87 | -------------------------------------------------------------------------------- /src/theme-powerbi.ts: -------------------------------------------------------------------------------- 1 | import {Config} from './config.js'; 2 | 3 | const ptToPx = (value: number) => value * (1 / 3 + 1); 4 | 5 | const fontSmallPx = ptToPx(9); 6 | const legendFontPx = ptToPx(10); 7 | const fontLargePx = ptToPx(12); 8 | const fontStandard = 'Segoe UI'; 9 | const fontTitle = 'wf_standard-font, helvetica, arial, sans-serif'; 10 | const firstLevelElementColor = '#252423'; 11 | const secondLevelElementColor = '#605E5C'; 12 | const backgroundColor = 'transparent'; 13 | const backgroundSecondaryColor = '#C8C6C4'; 14 | const paletteColor1 = '#118DFF'; 15 | const paletteColor2 = '#12239E'; 16 | const paletteColor3 = '#E66C37'; 17 | const paletteColor4 = '#6B007B'; 18 | const paletteColor5 = '#E044A7'; 19 | const paletteColor6 = '#744EC2'; 20 | const paletteColor7 = '#D9B300'; 21 | const paletteColor8 = '#D64550'; 22 | const divergentColorMax = paletteColor1; 23 | const divergentColorMin = '#DEEFFF'; 24 | const divergentPalette = [divergentColorMin, divergentColorMax]; 25 | const ordinalPalette = [ 26 | divergentColorMin, 27 | '#c7e4ff', 28 | '#b0d9ff', 29 | '#9aceff', 30 | '#83c3ff', 31 | '#6cb9ff', 32 | '#55aeff', 33 | '#3fa3ff', 34 | '#2898ff', 35 | divergentColorMax, 36 | ]; 37 | 38 | const powerbiTheme: Config = { 39 | view: {stroke: backgroundColor}, 40 | background: backgroundColor, 41 | font: fontStandard, 42 | header: { 43 | titleFont: fontTitle, 44 | titleFontSize: fontLargePx, 45 | titleColor: firstLevelElementColor, 46 | labelFont: fontStandard, 47 | labelFontSize: legendFontPx, 48 | labelColor: secondLevelElementColor, 49 | }, 50 | axis: { 51 | ticks: false, 52 | grid: false, 53 | domain: false, 54 | labelColor: secondLevelElementColor, 55 | labelFontSize: fontSmallPx, 56 | titleFont: fontTitle, 57 | titleColor: firstLevelElementColor, 58 | titleFontSize: fontLargePx, 59 | titleFontWeight: 'normal', 60 | }, 61 | axisQuantitative: { 62 | tickCount: 3, 63 | grid: true, 64 | gridColor: backgroundSecondaryColor, 65 | gridDash: [1, 5], 66 | labelFlush: false, 67 | }, 68 | axisBand: {tickExtra: true}, 69 | axisX: {labelPadding: 5}, 70 | axisY: {labelPadding: 10}, 71 | bar: {fill: paletteColor1}, 72 | line: { 73 | stroke: paletteColor1, 74 | strokeWidth: 3, 75 | strokeCap: 'round', 76 | strokeJoin: 'round', 77 | }, 78 | text: {font: fontStandard, fontSize: fontSmallPx, fill: secondLevelElementColor}, 79 | arc: {fill: paletteColor1}, 80 | area: {fill: paletteColor1, line: true, opacity: 0.6}, 81 | path: {stroke: paletteColor1}, 82 | rect: {fill: paletteColor1}, 83 | point: {fill: paletteColor1, filled: true, size: 75}, 84 | shape: {stroke: paletteColor1}, 85 | symbol: {fill: paletteColor1, strokeWidth: 1.5, size: 50}, 86 | legend: { 87 | titleFont: fontStandard, 88 | titleFontWeight: 'bold', 89 | titleColor: secondLevelElementColor, 90 | labelFont: fontStandard, 91 | labelFontSize: legendFontPx, 92 | labelColor: secondLevelElementColor, 93 | symbolType: 'circle', 94 | symbolSize: 75, 95 | }, 96 | range: { 97 | category: [ 98 | paletteColor1, 99 | paletteColor2, 100 | paletteColor3, 101 | paletteColor4, 102 | paletteColor5, 103 | paletteColor6, 104 | paletteColor7, 105 | paletteColor8, 106 | ], 107 | diverging: divergentPalette, 108 | heatmap: divergentPalette, 109 | ordinal: ordinalPalette, 110 | }, 111 | }; 112 | 113 | export default powerbiTheme; 114 | -------------------------------------------------------------------------------- /src/theme-quartz.ts: -------------------------------------------------------------------------------- 1 | import {Config} from './config.js'; 2 | 3 | const markColor = '#ab5787'; 4 | const axisColor = '#979797'; 5 | 6 | const quartzTheme: Config = { 7 | background: '#f9f9f9', 8 | 9 | arc: {fill: markColor}, 10 | area: {fill: markColor}, 11 | line: {stroke: markColor}, 12 | path: {stroke: markColor}, 13 | rect: {fill: markColor}, 14 | shape: {stroke: markColor}, 15 | symbol: {fill: markColor, size: 30}, 16 | 17 | axis: { 18 | domainColor: axisColor, 19 | domainWidth: 0.5, 20 | gridWidth: 0.2, 21 | labelColor: axisColor, 22 | tickColor: axisColor, 23 | tickWidth: 0.2, 24 | titleColor: axisColor, 25 | }, 26 | 27 | axisBand: { 28 | grid: false, 29 | }, 30 | 31 | axisX: { 32 | grid: true, 33 | tickSize: 10, 34 | }, 35 | 36 | axisY: { 37 | domain: false, 38 | grid: true, 39 | tickSize: 0, 40 | }, 41 | 42 | legend: { 43 | labelFontSize: 11, 44 | padding: 1, 45 | symbolSize: 30, 46 | symbolType: 'square', 47 | }, 48 | 49 | range: { 50 | category: [ 51 | '#ab5787', 52 | '#51b2e5', 53 | '#703c5c', 54 | '#168dd9', 55 | '#d190b6', 56 | '#00609f', 57 | '#d365ba', 58 | '#154866', 59 | '#666666', 60 | '#c4c4c4', 61 | ], 62 | }, 63 | }; 64 | 65 | export default quartzTheme; 66 | -------------------------------------------------------------------------------- /src/theme-urbaninstitute.ts: -------------------------------------------------------------------------------- 1 | import {Config} from './config.js'; 2 | 3 | const markColor = '#1696d2'; 4 | const axisColor = '#000000'; 5 | const backgroundColor = '#FFFFFF'; 6 | const font = 'Lato'; 7 | const labelFont = 'Lato'; 8 | const sourceFont = 'Lato'; 9 | const gridColor = '#DEDDDD'; 10 | const titleFontSize = 18; 11 | 12 | const colorSchemes = { 13 | 'main-colors': ['#1696d2', '#d2d2d2', '#000000', '#fdbf11', '#ec008b', '#55b748', '#5c5859', '#db2b27'], 14 | 'shades-blue': ['#CFE8F3', '#A2D4EC', '#73BFE2', '#46ABDB', '#1696D2', '#12719E', '#0A4C6A', '#062635'], 15 | 'shades-gray': ['#F5F5F5', '#ECECEC', '#E3E3E3', '#DCDBDB', '#D2D2D2', '#9D9D9D', '#696969', '#353535'], 16 | 'shades-yellow': ['#FFF2CF', '#FCE39E', '#FDD870', '#FCCB41', '#FDBF11', '#E88E2D', '#CA5800', '#843215'], 17 | 'shades-magenta': ['#F5CBDF', '#EB99C2', '#E46AA7', '#E54096', '#EC008B', '#AF1F6B', '#761548', '#351123'], 18 | 'shades-green': ['#DCEDD9', '#BCDEB4', '#98CF90', '#78C26D', '#55B748', '#408941', '#2C5C2D', '#1A2E19'], 19 | 'shades-black': ['#D5D5D4', '#ADABAC', '#848081', '#5C5859', '#332D2F', '#262223', '#1A1717', '#0E0C0D'], 20 | 'shades-red': ['#F8D5D4', '#F1AAA9', '#E9807D', '#E25552', '#DB2B27', '#A4201D', '#6E1614', '#370B0A'], 21 | 'one-group': ['#1696d2', '#000000'], 22 | 'two-groups-cat-1': ['#1696d2', '#000000'], 23 | 'two-groups-cat-2': ['#1696d2', '#fdbf11'], 24 | 'two-groups-cat-3': ['#1696d2', '#db2b27'], 25 | 'two-groups-seq': ['#a2d4ec', '#1696d2'], 26 | 'three-groups-cat': ['#1696d2', '#fdbf11', '#000000'], 27 | 'three-groups-seq': ['#a2d4ec', '#1696d2', '#0a4c6a'], 28 | 'four-groups-cat-1': ['#000000', '#d2d2d2', '#fdbf11', '#1696d2'], 29 | 'four-groups-cat-2': ['#1696d2', '#ec0008b', '#fdbf11', '#5c5859'], 30 | 'four-groups-seq': ['#cfe8f3', '#73bf42', '#1696d2', '#0a4c6a'], 31 | 'five-groups-cat-1': ['#1696d2', '#fdbf11', '#d2d2d2', '#ec008b', '#000000'], 32 | 'five-groups-cat-2': ['#1696d2', '#0a4c6a', '#d2d2d2', '#fdbf11', '#332d2f'], 33 | 'five-groups-seq': ['#cfe8f3', '#73bf42', '#1696d2', '#0a4c6a', '#000000'], 34 | 'six-groups-cat-1': ['#1696d2', '#ec008b', '#fdbf11', '#000000', '#d2d2d2', '#55b748'], 35 | 'six-groups-cat-2': ['#1696d2', '#d2d2d2', '#ec008b', '#fdbf11', '#332d2f', '#0a4c6a'], 36 | 'six-groups-seq': ['#cfe8f3', '#a2d4ec', '#73bfe2', '#46abdb', '#1696d2', '#12719e'], 37 | 'diverging-colors': ['#ca5800', '#fdbf11', '#fdd870', '#fff2cf', '#cfe8f3', '#73bfe2', '#1696d2', '#0a4c6a'], 38 | }; 39 | 40 | const urbanInstituteTheme: Config = { 41 | background: backgroundColor, 42 | 43 | title: { 44 | anchor: 'start', 45 | fontSize: titleFontSize, 46 | font: font, 47 | }, 48 | 49 | axisX: { 50 | domain: true, 51 | domainColor: axisColor, 52 | domainWidth: 1, 53 | grid: false, 54 | labelFontSize: 12, 55 | labelFont: labelFont, 56 | labelAngle: 0, 57 | tickColor: axisColor, 58 | tickSize: 5, 59 | titleFontSize: 12, 60 | titlePadding: 10, 61 | titleFont: font, 62 | }, 63 | 64 | axisY: { 65 | domain: false, 66 | domainWidth: 1, 67 | grid: true, 68 | gridColor: gridColor, 69 | gridWidth: 1, 70 | labelFontSize: 12, 71 | labelFont: labelFont, 72 | labelPadding: 8, 73 | ticks: false, 74 | titleFontSize: 12, 75 | titlePadding: 10, 76 | titleFont: font, 77 | titleAngle: 0, 78 | titleY: -10, 79 | titleX: 18, 80 | }, 81 | 82 | legend: { 83 | labelFontSize: 12, 84 | labelFont: labelFont, 85 | symbolSize: 100, 86 | titleFontSize: 12, 87 | titlePadding: 10, 88 | titleFont: font, 89 | orient: 'right', 90 | offset: 10, 91 | }, 92 | 93 | view: { 94 | stroke: 'transparent', 95 | }, 96 | 97 | range: { 98 | category: colorSchemes['six-groups-cat-1'], 99 | diverging: colorSchemes['diverging-colors'], 100 | heatmap: colorSchemes['diverging-colors'], 101 | ordinal: colorSchemes['six-groups-seq'], 102 | ramp: colorSchemes['shades-blue'], 103 | }, 104 | 105 | area: { 106 | fill: markColor, 107 | }, 108 | 109 | rect: { 110 | fill: markColor, 111 | }, 112 | 113 | line: { 114 | color: markColor, 115 | stroke: markColor, 116 | strokeWidth: 5, 117 | }, 118 | 119 | trail: { 120 | color: markColor, 121 | stroke: markColor, 122 | strokeWidth: 0, 123 | size: 1, 124 | }, 125 | 126 | path: { 127 | stroke: markColor, 128 | strokeWidth: 0.5, 129 | }, 130 | 131 | point: { 132 | filled: true, 133 | }, 134 | 135 | text: { 136 | font: sourceFont, 137 | color: markColor, 138 | fontSize: 11, 139 | align: 'center', 140 | fontWeight: 400, 141 | size: 11, 142 | }, 143 | 144 | style: { 145 | bar: { 146 | fill: markColor, 147 | stroke: null, 148 | }, 149 | }, 150 | 151 | arc: {fill: markColor}, 152 | shape: {stroke: markColor}, 153 | symbol: {fill: markColor, size: 30}, 154 | }; 155 | 156 | export default urbanInstituteTheme; 157 | -------------------------------------------------------------------------------- /src/theme-vox.ts: -------------------------------------------------------------------------------- 1 | import {Config} from './config.js'; 2 | 3 | const markColor = '#3e5c69'; 4 | 5 | const voxTheme: Config = { 6 | background: '#fff', 7 | 8 | arc: {fill: markColor}, 9 | area: {fill: markColor}, 10 | line: {stroke: markColor}, 11 | path: {stroke: markColor}, 12 | rect: {fill: markColor}, 13 | shape: {stroke: markColor}, 14 | symbol: {fill: markColor}, 15 | 16 | axis: { 17 | domainWidth: 0.5, 18 | grid: true, 19 | labelPadding: 2, 20 | tickSize: 5, 21 | tickWidth: 0.5, 22 | titleFontWeight: 'normal', 23 | }, 24 | 25 | axisBand: { 26 | grid: false, 27 | }, 28 | 29 | axisX: { 30 | gridWidth: 0.2, 31 | }, 32 | 33 | axisY: { 34 | gridDash: [3], 35 | gridWidth: 0.4, 36 | }, 37 | 38 | legend: { 39 | labelFontSize: 11, 40 | padding: 1, 41 | symbolType: 'square', 42 | }, 43 | 44 | range: { 45 | category: ['#3e5c69', '#6793a6', '#182429', '#0570b0', '#3690c0', '#74a9cf', '#a6bddb', '#e2ddf2'], 46 | }, 47 | }; 48 | 49 | export default voxTheme; 50 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "module": "Node16", 5 | "moduleResolution": "Node16", 6 | "noEmit": true, 7 | "sourceMap": true, 8 | "declaration": true, 9 | "declarationDir": "build", 10 | "declarationMap": true, 11 | "strict": true, 12 | "importHelpers": true, 13 | "resolveJsonModule": true 14 | }, 15 | "include": ["src/index.ts"] 16 | } 17 | --------------------------------------------------------------------------------