import {
createDemo,
intro,
controlWidth,
dataDescription,
welcomeBox,
inputStyles,
plotWidth,
download,
deck,
marksPng,
scalesPng,
layoutsPng,
transformsPng,
colorsPng,
} with { evalCodeStr } from "@observablehq/cheatsheet-utilities"
import {introParagraph as marksIntro, marksExample, data} from "@observablehq/plot-marks-cheatsheet"
import {toc} from "@nebrius/indented-toc"
import {introParagraph as scalesIntro, scalesExample} from "@observablehq/plot-scales-cheatsheet"
import {introParagraph as transformsIntro, transformsExample, data as tData} from "@observablehq/plot-transforms-cheatsheet"
import {introParagraph as layoutsIntro, layoutsExample} from "@observablehq/plot-layouts-cheatsheet"
import {introParagraph as colorsIntro, colorsExample, scheme, quantScaleTypes, data as tempData} from "@observablehq/plot-cheatsheets-colors"
evalCodeStr = (str) => {
const func = new Function("data", "Plot", "width", "d3", "data", "tempData", "tData", `return ${str}`)
return func(data, Plot, width, d3, data, tempData, tData);
}
// Settings to create the colors plot
quantitative = ({
controls: [
{ type: "text", value: "// Temp. over time\nPlot.plot({" },
{ type: "text", value: "marks:[Plot.dot(tempData, {", indent: 1 },
{ param: "fill", value: "air_temp" },
{ type: "text", value: "})],", indent: 1 },
{ type: "text", value: "color: {", indent: 1 },
{ param: "scheme", type: "select", value: "scheme", options: scheme },
{ param: "type", type: "select", options: quantScaleTypes },
{ type: "text", value: "// Clamp the domain", indent: 2 },
{ param: "domain", type: "textInput", value: `[0, 30]` },
{ type: "text", value: `// Restrict output range`, indent: 2 },
{ param: "range", type: "textInput", value: `[0, 1]` },
{ type: "text", value: "}})" }
],
plot: (config) => `Plot.plot({
marks: [Plot.dot(tempData, { x: "date", y: "air_temp", fill: "air_temp" })],
color: {
type: "${config.type}",
scheme: "${config.scheme}",
legend: true${config.domain ? `,\n\t\tdomain: ${config.domain}` : ''}${config.range ? `,\n\t\trange: ${config.range}` : ""}
},
width: ${plotWidth}
})`
})
// Settings to create the transforms historgram
histogram = ({
controls: [
{ type: "text", value: "// Create a histogram" },
{ type: "text", value: "Plot.rectY(tData,", indent: 0 },
{ type: "text", value: "Plot.binX({", indent: 1 },
{
param: "reducer",
label: "y",
value: "count"
},
{ type: "text", value: "},{", indent: 1 },
{ param: "x", value: "price_in_usd" },
{
param: "fill",
options: ["blue", "brand", "red"],
type: "select"
},
{
param: "thresholds",
type: "select",
options: [5, 10, 50]
},
{
param: "fillOpacity",
type: "range",
min: 0.1,
max: 1,
value: 0.5,
step: 0.05
},
{ type: "text", value: "}", indent: 1 },
{ type: "text", value: "})" }
],
// Function that returns a string of the plot code: input is key/value pairs of the controls
plot: (config) => `Plot.plot({
marks: [
Plot.rectY(
tData,
Plot.binX(
{ y: "${config.reducer}" },
{
x: "price_in_usd",
fill: "${config.fill}",
fillOpacity: ${config.fillOpacity},
thresholds: ${config.thresholds}
}
)
)
],
marginLeft: 100,
width: ${plotWidth},
height: 300
})`
})
inputStyles
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.
