Published
Edited
Sep 28, 2021
Importers
27 stars
Insert cell
Insert cell
Insert cell
Insert cell
gistemp = FileAttachment("gistemp.csv").csv({typed: true})
Insert cell
myplot = Plot.dot(gistemp, {x: "Date", y: "Anomaly", stroke: "Anomaly"}).plot({color: {type: "quantile", scheme: "burd", quantiles: 10}})
Insert cell
Insert cell
mycolor = myplot.scale("color")
Insert cell
Insert cell
Insert cell
Legend(d3.scaleThreshold(mycolor.domain, mycolor.range), {title: mycolor.label})
Insert cell
Insert cell
Plot.dot(gistemp.filter(d => d.Date.getUTCFullYear() > 1960), {x: "Date", y: "Anomaly", stroke: "Anomaly"}).plot({color: mycolor})
Insert cell
Insert cell
Plot.dot(gistemp, {x: "Date", y: "Anomaly", stroke: "Anomaly"}).plot({color: {scheme: "turbo", range: [0.5, 1]}})
Insert cell
Insert cell
Plot.dot(gistemp, {x: "Date", y: "Anomaly", stroke: "Anomaly"}).plot({color: {scheme: "turbo", range: [0, 0.5]}})
Insert cell
Insert cell
penguins = FileAttachment("penguins.csv").csv({typed: true})
Insert cell
Insert cell
penplot = Plot.plot({
color: {
domain: ["Biscoe", "Dream"],
unknown: "#ccc" // any other island will be gray
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "sex", fill: "island"})),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
import {Legend, Swatches} from "@d3/color-legend"
Insert cell

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.
Learn more