The end-to-end solution for building and hosting better data apps, dashboards, and reports.
myCategoricalColors = ["orange", "#56B4e9", "#009e73", "tomato", "steelblue", "#f0e442"] // Edit these values, or add more!
Plot.plot({
marks: [
Plot.dot(cars, {
x: "power (hp)",
y: "economy (mpg)",
fill: "cylinders",
r: 5
})
],
color: { range: myCategoricalColors } // Your custom color scheme here
})
myContinuousColors = ["orange", "#9700ff"] // Edit these colors!
Plot.plot({
marks: [
Plot.dot(cars, {
x: "power (hp)",
y: "economy (mpg)",
fill: "economy (mpg)",
r: 5
})
],
color: {
range: myContinuousColors, // Your custom color scheme here
interpolate: "hcl"
}
})
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
</style>
myGoogleFonts
Plot.plot({
style: {fontFamily: "Lato"}, // Update with your imported Google font to change all in chart
y: {
grid: true,
label: "↑ Frequency (%)",
transform: (d) => d * 100
},
marks: [
Plot.barY(alphabet, { x: "letter", y: "frequency" }),
Plot.text(alphabet, {
x: "letter",
y: "frequency",
text: (d) => (d.frequency * 100).toFixed(1),
dy: -5
}),
Plot.ruleY([0])
]
})
kalam = FileAttachment("Kalam-Regular.ttf")
<style>
@font-face {
font-family: Kalam;
src: url('${await kalam.url()}');
}
</style>
myDownloadedFonts
Plot.plot({
y: {
grid: true,
label: "↑ Frequency (%)",
transform: (d) => d * 100
},
marks: [
Plot.barY(alphabet, { x: "letter", y: "frequency" }),
Plot.text(alphabet, {
x: "letter",
y: "frequency",
text: (d) => (d.frequency * 100).toFixed(1),
dy: -5,
fontFamily: "Kalam",
fontSize: 14,
fill: "red",
dy: -10
}),
Plot.ruleY([0])
]
})
logo = FileAttachment("observable-logo.png").url()
Plot.plot({
marks: [
Plot.dot(cars, { x: "power (hp)", y: "economy (mpg)" }),
Plot.frame(),
Plot.image([logo], { src: [logo], frameAnchor: "top-right", dx: -80, width: 130 }) // Add, position and size your logo
],
})
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.
