Seasoned SQL, JS Dev | Database | MS SQL Server | T-SQL | Azure | Python |
Public
Edited
Jun 12, 2024
cellchart_weather = addTooltips(
Plot.plot({
marks: [
Plot.cell(weather.slice(-365), {
x: (d) => d.date.getUTCDate(),
y: (d) =>
new Date(
d.date.getUTCFullYear(),
d.date.getUTCMonth(),
1
).toLocaleString("default", { month: "short" }),
fill: "temp_max",
//tip: true,
sort: { y: "y", reverse: false },
title: "temp_max"
})
],
color: { legend: true }
}),
// Set styles for the hovered element
{ opacity: 1, "stroke-width": "1px", stroke: "black" }
)
weather[0].date
energy = FileAttachment("us_energy.csv").csv({ typed: true })
us_energy.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
scatterplot_energy = Plot.plot({
marks: [Plot.dot(energy, { x: "year", y: "quadrillion_btu" })]
})
linechart_energy = Plot.plot({
marks: [
Plot.line(energy, { x: "year", y: "quadrillion_btu", stroke: "type" }),
Plot.dot(energy, {
x: "year",
y: "quadrillion_btu",
fill: "type",
stroke: "white",
tip: true,
r: 4
}),
Plot.frame()
],
x: { tickFormat: "Y", type: "linear", label: "Year" },
y: { domain: [0, 45], label: "Quadrillion BTU" },
color: { scheme: "Accent", legend: true },
grid: true
})
scatterplot_penguins = Plot.plot({
marks: [
Plot.dot(penguins, {
x: "body_mass_g",
y: "flipper_length_mm",
r: "flipper_length_mm",
fill: "species",
tip: true
})
],
r: {
domain: d3.extent(penguins, (d) => d.flipper_length_mm),
range: [1, 10]
},
color: {
domain: ["Adelie", "Chinstrap", "Gentoo"],
range: ["purple", "teal", "orange"]
}
})
import { monoYearly } from "@observablehq/keep-saving-mono-lake"
salamanders
Type Table, then Shift-Enter. Ctrl-space for more options.
scatterplot_salamanders = Plot.plot({
marks: [
Plot.frame(),
Plot.dot(salamanders, {
x: "totalLength",
y: (d) => d.weight,
fill: "creekSection",
opacity: 0.5,
r: "totalLength",
// sort: { channel: "fill" }
tip: true
})
],
y: { label: "weight" }
})
scatterplot_salamanders_v2 = Plot.plot({
marks: [
Plot.frame(),
Plot.dot(salamanders, {
x: "totalLength",
y: (d) => d.weight,
fill: "creekSection", // Later, switch to totalLength to see continuous custom scheme!
opacity: 0.5,
r: "totalLength",
sort: { channel: "fill" },
tip: true
})
],
x: { domain: [0, 400], ticks: 5, reverse: true },
y: { type: "pow", exponent: 0.5, label: "weight" },
color: { range: ["cyan", "purple"], legend: true },
grid: true
})
barplot_salmanders = Plot.plot({
marks: [
Plot.rectY(
salamanders,
Plot.binX(
{ y: "mean" },
{ x: "date", y: "totalLength", interval: "5 years", tip: true }
)
)
]
})
addTooltips(
Plot.plot({
marks: [
Plot.rectY(
salamanders,
Plot.binX(
{
y: (elems) =>
elems.reduce((acc, curr) => acc + curr, 0) / elems.length,
title: (elems) =>
`${(
elems.reduce((acc, curr) => acc + curr.totalLength, 0) /
elems.length
).toFixed(0)}`
},
{ x: "date", y: "totalLength" }
)
),
Plot.ruleY([0])
]
})
)
salamanders
X
date
Y
mean
totalLength
Color
mean
totalLength
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
barplotGenra_salamanders = Plot.plot({
marks: [
Plot.rectY(
salamanders,
Plot.binX(
{ fill: "mean", y: "mean" },
{
x: "date",
y: "totalLength",
fill: "totalLength",
tip: true,
interval: "5 years"
}
)
),
Plot.ruleY([0])
],
color: { legend: true }
})
salamanders
X
—
Y
creekSection
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
barplotGenra_salamandersv2 = Plot.plot({
marks: [
Plot.barX(
salamanders,
Plot.groupY(
{ x: "count" },
{ y: "creekSection", tip: true, fill: "reach", tip: true }
)
),
Plot.ruleX([0])
],
color: { legend: true }
})
monoYearly
Type Table, then Shift-Enter. Ctrl-space for more options.
lineplot_monoYearly = Plot.plot({
marks: [
Plot.line(
monoYearly,
Plot.normalizeY({ x: "year", y: "volume", basis: "first", tip: true })
) // Try mean, min, last,!
],
marginLeft: 60,
x: { tickFormat: "" }
})
lineplot_monoYearlyv2 = Plot.plot({
marks: [
Plot.line(
monoYearly,
Plot.normalizeY("first", { x: "year", y: "lake", tip: true })
)
]
})
wb_tidy@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
scatterplot_incgrfact = Plot.plot({
marks: [
Plot.frame(),
Plot.dot(worldbank, {
filter: (d) => d.year == 2010,
x: "gdp",
y: "co2",
fill: "#ccc",
r: "life_exp",
opacity: 0.7
}),
Plot.dot(worldbank, {
filter: (d) => d.year == 2010,
x: "gdp",
y: "co2",
fill: "life_exp",
r: "life_exp",
opacity: 0.7,
tip: true,
fy: "income_group"
})
],
x: { type: "log", label: "GDP (USD)" },
y: { type: "log", label: "CO2 Emissions" },
fy: {
label: "Income group",
domain: [
"Not classified",
"Low income",
"Lower middle income",
"Upper middle income",
"High income"
],
reverse: true
},
color: { legend: true, label: "Life expectancy (years)" },
r: { domain: d3.extent(worldbank, (d) => d.life_exp), range: [1, 10] },
marginRight: 150
})
aapl = FileAttachment("aaplStock.csv").csv()
goog = FileAttachment("googStock.csv").csv()
tsla = FileAttachment("tslaStock.csv").csv()
dateParse = d3.timeParse("%Y-%m-%d")
stocks = aapl
.map((d) => ({ ...d, symbol: "aapl" }))
.concat(
goog.map((d) => ({ ...d, symbol: "goog" })),
tsla.map((d) => ({ ...d, symbol: "tsla" }))
)
.map((d) => ({ ...d, Date: dateParse(d.Date) }))
stocks
Type Table, then Shift-Enter. Ctrl-space for more options.
lineplot_stocks = Plot.plot({
marks: [
Plot.lineY(stocks, {
x: "Date",
y: "Close",
stroke: "symbol",
tip: true
})
],
x: {
domain: [new Date("2019-01-01"), new Date("2024-06-04")]
},
y: {
domain: [0, 400]
},
color: { legend: true }
})
lineplot_stocksv2 = // Calculates (by default a rolling mean, using the current value as the middle of the window). Can also update to "start" or "end" for leading or trailing windows! Add `strict` to avoid noisy tails (from incomplete windows at series endpoints)
Plot.plot({
marks: [
Plot.lineY(stocks, {
x: "Date",
y: "Close",
stroke: "symbol",
opacity: 0.3,
tip: true
}),
Plot.lineY(
stocks,
Plot.windowY(
{ k: 50, anchor: "middle", reduce: "mean", strict: true },
{ x: "Date", y: "Close", stroke: "symbol" }
)
),
Plot.text(
stocks,
Plot.selectLast({
x: "Date",
y: "Close",
text: "symbol",
fill: "symbol",
textAnchor: "start",
dx: 5,
dy: -9, // Use the getDy function to set the dy value
fontSize: 15
})
),
Plot.tip([`Oct 27, 2022: Elon Musk becomes Twitter CEO`], {
x: new Date("2022-10-27"),
y: 250,
anchor: "bottom-left"
})
],
color: { legend: true, range: ["teal", "navy", "orange"] },
x: {
domain: [new Date("2019-01-01"), new Date("2024-06-04")]
},
y: {
domain: [0, 400],
label: "Closing Price (USD)"
},
marginRight: 100
})
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
Meteorite_Landings.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import { land } from "@observablehq/plot-live-earthquake-map"
scatter_geoplot_meteorites = Plot.plot({
projection: "equal-earth",
marks: [
Plot.graticule(),
Plot.geo(land, {
fill: "#ccc"
}),
Plot.dot(meteorites, {
x: "reclong",
y: "reclat",
r: "mass (g)",
fill: "purple",
opacity: 0.5,
tip: true
})
],
r: { range: [1, 10] }
})
viewof pickColor = Inputs.color({ label: "Favorite color", value: "#4682b4" })
scatterplot_cars = Plot.plot({
marks: [
Plot.dot(cars, {
x: "power (hp)",
y: "economy (mpg)",
tip: true,
fill: pickColor
})
]
})
viewof pickWindow = Inputs.range([2, 90], {label: "Amount", step: 1})
lineplot_stocksv3 = Plot.plot({
marks: [
Plot.lineY(stocks, {
x: "Date",
y: "Close",
stroke: "symbol",
opacity: 0.3
}),
Plot.lineY(
stocks,
Plot.windowY(
{ k: pickWindow, anchor: "middle", reduce: "mean", strict: true },
{ x: "Date", y: "Close", stroke: "symbol" }
)
)
],
color: { legend: true, range: ["teal", "navy", "orange"] },
x: {
domain: [new Date("2019-01-01"), new Date("2024-06-04")]
},
y: {
domain: [0, 400],
label: "Closing Price (USD)"
}
})
Data: The World Bank DataBank
wb = worldbank
wb2010 = wb.filter(d => d.year == 2010)
wb2010
Type Table, then Shift-Enter. Ctrl-space for more options.
scatterplot_wb2010 = Plot.plot({
marks: [
Plot.dot(wb2010, { x: "gdp", y: "life_exp", fill: "gray" }),
Plot.dot(
wb2010,
Plot.pointer({
x: "gdp",
y: "life_exp",
fill: "red",
r: 8,
opacity: 0.6,
tip: true,
title: (d) => `${d.country_name}`
})
),
Plot.crosshair(wb2010, {
x: "gdp",
y: "life_exp",
textFill: "red",
textStroke: "white",
strokeWidth: 3
})
],
x: { type: "log" },
margin: 50
})
scatterplot_stocksv1 = Plot.plot({
marks: [
Plot.lineY(stocks, {
x: "Date",
y: "Close",
stroke: "symbol",
tip: true,
channels: {
Open: "Open"
}
}),
Plot.tip(
stocks,
Plot.selectMaxY({
x: "Date",
y: "Close",
stroke: "symbol",
anchor: "right",
fill: "yellow"
})
) // Static annotation!
],
x: {
domain: [new Date("2019-01-01"), new Date("2024-06-04")]
},
y: {
domain: [0, 400],
label: "Closing Price (USD)"
},
color: { legend: true }
})
scatterplot_wbv1 = Plot.plot({
marks: [
Plot.dot(wb, {
filter: (d) => d.region == selectRegion && d.year <= pickYear,
x: "gdp",
y: "co2",
fill: "country_name",
r: "gdp",
opacity: (d) => (d.year == pickYear ? 1 : 0.2),
tip: true
})
],
x: { type: "log" },
y: { type: "log" },
r: { range: [3, 20] }
})
barplot_plants = Plot.plot({
marks: [
Plot.barX(
plants.filter(
(d) => pickStates.includes(d.state) && d.primary_source == pickSource
),
Plot.groupY(
{ x: "sum" },
{
x: "total_capacity",
y: "state",
fill: "primary_source",
sort: { y: "x", reverse: true, limit: 10 }
}
)
),
Plot.ruleX([0])
],
marginLeft: 100
})
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.
