We create visual and data-driven stories for
@nzz – and build tools that power them.
Published
Edited
Nov 6, 2020
Importers
swatches = colors => {
const n = colors.length
const canvas = svg`<svg viewBox="0 0 ${n} 1" style="display:block;width:${n * 33}px;height:33px;margin:0 -14px;cursor:pointer;">${colors.map((c, i) => svg`<rect x=${i} width=1 height=1 fill=${culori.formatHex(c)}>`)}`;
return html`${canvas}`
}
colorDisplay = colors => {
return md`
| Deficiency Type | Swatches |
| ----------------|----------|
| none | ${swatches(colors)} |
| protanomaly and protanopia | ${swatches(colors.map(culori.deficiencyProt()))} |
| deuteranomaly and deuteranopia | ${swatches(colors.map(culori.deficiencyDeuter()))} |
| tritanomaly and tritanopia | ${swatches(colors.map(culori.deficiencyTrit()))} |
`
}
md`## Imports`
culori = require('culori')
import {vl} from '@vega/vega-lite-api'
import {text} from '@jashkenas/inputs'
md`## Styling`
html`
<style>
@import url('https://assets.static-nzz.ch/nzz/8.20.23/static/css/fonts.css');
body {
font-family: nzz-sans-serif, system-ui, sans-serif;
font-weight: 300;
}
</style>
`
markConfig = ({size: 200, opacity: 1})
overallConfig = ({font: 'nzz-sans-serif'})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
