colorCell = (color) => `<div style="background-color:${color}; width: 20px"> </div>`
colorCell("#33aa22")
colorsCell = (colors) => `<div style="display:flex">${colors.map(color => colorCell(color))}</div>`
viewof chartsTable = Inputs.table(chartsWithCustomColorsAndFlaggings, {
width: {id: "2%", slug: "15%"},
format: {
slug: (slug) => html`<a href="https://ourworldindata.org/grapher/${slug}">${slug}</a>`,
owidColors: (colors) => html`${colorsCell(colors)}`,
manualColors: (colors) => html`${colorsCell(colors)}`
}
})
chartsWithCustomColorsAndFlaggings = chartsWithParsedColors.map(row => ({id: row.id, slug: row.slug, owidColors: row.colors.filter(color => oldOwidDistinct.has(color)), manualColors: row.colors.filter(color => !oldOwidDistinct.has(color))}))
chartsWithParsedColors = chartsWithCustomColors.map(row => ({...row, colors: JSON.parse(row.colors).map(row => row.name)}))
owid
owid = new DatasetteClient(
"https://owid-datasette-y43qr.ondigitalocean.app/owid"
)
//Inputs.table(variables.query(`SELECT * from variables ${whereClause}`))
import {DatasetteClient} from "@ambassadors/datasette-client"
import {debounce} from "@mbostock/debouncing-input"
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.
