Colours§
In many of the visualisations it is possible to set the colours of lines/points/polygons. You can set a colour using:
- a hex code e.g.
#396bad - an RGB value e.g.
rgb(255,0,0)orrgba(255,0,0,0.5) - a CSS color name e.g.
purple
Contrasting colour§
If you are placing coloured text on a coloured background you may want to make sure you have the most contrasting colour ratio. You can get that using, for example, {{ "#396bad" | contrastColour() }} where the first argument is the colour. For #396bad we get the contrasting white.
Colour scales§
Sometimes items can have their colour set using a colour scale value. These can either be provided in the style of a CSS gradient string (e.g. #03051A 0%, #CB1B4F 50%, #FAEBDD 100%) or using one of the following named colour scales:
CividisHeatInfernoMagmaMakoPlasmaRocketTurboViridisPlanckPiPGPRGnPuOrRdBu
Sources: Cividis/Inferno/Magma/Plasma/Turbo/Viridis come from Plotly (MIT), Rocket comes from the Seaborn statistical data visualization package for Python, Mako comes from ViridisLite, PiPG/PRGn/PuOr/RdBu come from ColorBrewer 2.0 (Cynthia Brewer Apache License 2.0)
You can apply a colour scale to replacement values e.g. {{ value | colourScale("Viridis",0,100) }} passes value into the colourScale function with the scale Viridis, the minimum value 0, and maximum value 100.
It is possible to get a reversed version of each scale by adding _r to the name e.g. Viridis_r.
Series colours§
The default series colours come from Figure 2 of Wong, B. Points of view: Color blindness. Nat Methods 8, 441 (2011):
#D55E00#0072B2#009E73#F0E442#CC79A7#56B4E9#E69F00
Customising colours§
Setting named colours§
By default we provide existing CSS colours but there may be times when you'd like to define your own custom named colours (or change the values of existing named colours) for use in visualisations. You can set these site-wide or specific to a visualisation.
Site-wide named colours
If you want to have named colours that you can re-use across many visualisations, you can set site-wide defaults. Update _config.[js|ts] to include the new named colours as part of the config to the plugin e.g.:
site.use(oiLumeViz({
...
"colour": {
"names": {
"gold": "#F7AB3D",
"orange": "#E55912",
"turquoise": "#69C2C9",
"cherry": "#E52E36",
"chartreuse": "#C7B200",
"plum": "#7D2248",
"grey": "#B2B2B2",
"blue": "#005776",
"raisin": "#874245",
"rose": "#FF808B",
"forest": "#4A783C",
"richblack": "#000000",
},
},
...
}));Visualisation-specific named colours
It may be better to keep your named colours specific to a particular visualisation. In that case you can add a colours property to your visualisation config. e.g.:
config:
...
colours:
gold: "#F7AB3D",
orange: "#E55912",
turquoise: "#69C2C9",
cherry: "#E52E36",
chartreuse: "#C7B200",
plum: "#7D2248",
grey: "#B2B2B2",
blue: "#005776",
raisin: "#874245",
rose: "#FF808B",
forest: "#4A783C",
richblack: "#000000",
...The new named colours can then be used in the same way as pre-defined colour names. For instance, we can include them in this page: gold orange turquoise cherry chartreuse plum grey blue raisin rose forest richblack. Note that, in this example, as well as creating some new colours we've also over-ridden several existing CSS colour names with new values.
Setting series colours§
We provide a default set of colour-blind-safe series colours but you may wish to set your own defaults. Update _config.[js|ts] to include an array of colours as part of the config to the plugin:
site.use(oiLumeViz({
...
"colour": {
"series": [ "#E52E36", "#C7B200", "#69C2C9", ],
},
...
}));Setting colour scales§
It may be that the built-in colour scales don't meet your needs. You can add your own custom colour scales by updating _config.[js|ts] to include the new scales as part of the config to the plugin. For example, here we will create a new colour scale named example:
site.use(oiLumeViz({
...
"colour": {
"scales": {
"example": "#ff0000 0%, #0000ff 100%",
}
},
...
}));The new colour scale (example) and its reverse (example_r) can then be used in the same way as pre-defined colour scales. For instance, we can include them in this page:
exampleexample_r