Svelte colorgridder

This app was created by Jonatan Hildén as part of a Master’s Thesis in Visual Communication Design for Aalto University.

It has two modes: Contrast grid and Bivariate hue blender

Contrast grid

Contrast grid takes a list of colors and compares their contrasts. It displays APCA (upper row) and wcag-contrast (lower row) values.

The tool generates strokes that can be used to achieve sufficient contrast between adjacent hues or light colors and a background.

Bivariate hue blender

Bivariate hue blender is a tool for creating custom color scales for bivariate choropleth maps using two starting colors (for low and high Y values) as input. The high X color is created by rotating the Y color using the Hue-Chroma-Lightness color space. Intermediate colors are blended from these pairs using two alternative methods: multiply and mix. Multiply uses the multiply blending mode, while mix uses Chroma.js to calculate intermediate hues and adjust the lightness of higher values.

Color schemes can be used with the R package biscale or the Bivariate choropleth example on Observable.

Acknowledgements

The principle for creating the color palettes builds on the blog post Bivariate Choropleth Maps: A How-to Guide by Joshua Stevens.

Color scale generation is done with Chroma.js and APCA contrast algorithms are used for additional color analysis.

The palette design was inspired by the @benjaminadk/bivariate-choropleth-color-generator.

Run locally

Install the dependencies...

cd svelte-app
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.

Building and running in production mode

To create an optimized version of the app:

npm run build

You can run the newly built app with npm run start. This uses sirv, which is included in your package.json's dependencies so that the app will work when you deploy to platforms like Heroku.