ABC News data visualisation colour palettes
Principles:
- This should be the canonical source for colour palettes for data visualisation in ABC News stories.
- It should be easy to find and use.
- Palettes should be defined in only one place in the source code.
- It should be published as both a living style guide and a module which can be required by other projects.
Goal:
- CSS
- Custom props for all the colours used in data visualisation palettes
- Ready to go classes that define the palettes for each type of visualisation
- JS with typed exports for each colour scheme
- JS utility functions for
- generating discrete ordinal scales with x number of buckets
- creating continuous scale functions for a given sequential/divergent colour scheme
Javascript API
This describes the functions and objects available in the module and how to use them for generating or importing colour palettes.
Generic categorical palettes
Nominal
Returns an array of hex colour strings for use in visualising nominal (non-ordinal) categorical data for the given number of categories.
getNominalCategoricalPalette: (n: number) => string[]
Emphasis and de-emphasis colours can be used for palettes where there are up to four categories.
getEmphasisColours: () => {emphasise: string, deemphasise: string}
Ordinal
Returns an array of hex colour strings for use in visualising ordinal categorical data for the given number of categories.
getOrdinalCategoricalPalette: (n: number, variant: 'blue'|'red'|'green'|'purple' = 'blue') => string[]
Named categorical palettes
A generic function for accessing the palettes described below.
getNamedCategoricalPalette: (name: 'gender'|'sentiment'|'political') => GenderPalette | SentimentPalette | PoliticalPalette
Gender
Returns a palette for use when visualising gender categories.
getGenderPalette: () => GenderPalette
Sentiment
Returns a palette for use when visualising sentiment.
getSentimentPalette: () => SentimentPalette
Political
Returns a palette for use when visualising political parties.
getPoliticalPalette: () => PoliticalPalette
Continuous and divergent palettes
Continuous and divergent palettes are provided as an interpolation function that takes a value between 0 and 1 and returns a hex RGB colour string. These are similar to the diverging and sequential schemes provided by d3 in the d3-scale-chromatic package.
These are suited for use with a scale function where an input domain appropriate for the data you're visualising is mapped to a normalised output range between 0 and 1.
An easy way to use these is with d3's sequential and diverging scale functions. Unlike most of d3's scale functions these take an interpolation function in place of a range.
const scale = d3.scaleSequential(getContinuousPalette('blue')).domain([0, 100]);
Continuous
Returns a continuous scale function for generating colours for an input value. Functions expect a value between 0 and 1.
getContinuousPaletteInterpolator: (variant: 'blue'|'red'|'green'|'purple' = 'blue') => (value: number) => string
Divergent
Returns a continuous scale function for generating colours for an input value. Functions expect a value between 0 and 1.
getDivergentPaletteInterpolator: (variant: 'rb'|'gp'|'pr' = 'rb') => (value: number) => string
Authors
- Simon Elvery (simon@elvery.net)
Current status
- Build and dev commands generate the expected CSS at build time.
-
sveltekit package
doesn't output CSS.
create-svelte
Everything you need to build a Svelte project, powered by create-svelte
;
Creating a project
If you're seeing this, you've probably already done this step. Congrats!
# create a new project in the current directory
npm init svelte@next
# create a new project in my-app
npm init svelte@next my-app
Note: the
@next
is temporary
Developing
Once you've created a project and installed dependencies with npm install
(or pnpm install
or yarn
), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
Building
Before creating a production version of your app, install an adapter for your target environment. Then:
npm run build
You can preview the built app with
npm run preview
, regardless of whether you installed an adapter. This should not be used to serve your app in production.