Seasoned SQL, JS Dev | Database | MS SQL Server | T-SQL | Azure | Python |
Plot.plot({
marks: [
Plot.dot(data, {
x: "bill_length",
y: "bill_depth",
title: (d) =>
`${d.island} \n bill depth: ${d.bill_depth} \n bill length: ${d.bill_length}` // \n makes a new line
})
]
})
Plot.plot({
marks: [
Plot.dot(data, {
x: "bill_length",
y: "bill_depth",
title: (d) =>
`${d.island} \n bill depth: ${d.bill_depth} \n bill length: ${d.bill_length}` // \n makes a new line
})
],
tooltip: {
fill: "red",
stroke: "blue",
r: 8,
}
})
Plot.plot({
marks: [
Plot.dot(data, {
x: "bill_length",
y: "bill_depth",
title: (d) =>
`${d.island} \n bill depth: ${d.bill_depth} \n bill length: ${d.bill_length}` // \n makes a new line
})
],
tooltip: {
fill: "red",
stroke: "blue",
r: 8,
tip: {
background: "#ffffff8d",
color: "black",
"backdrop-filter": "blur(50px)"
},
title: {
background: "#f0f0f0a9",
color: "red",
"font-family": "Lucida Console, Courier New, monospace"
},
content: {
padding: "0"
},
name: {
// color: "blue",
"font-family": "Lucida Console, Courier New"
},
value: {
color: "orange",
"font-family": "Lucida Console"
}
}
})
// Pass any plot to addTooltips -- just set the `title` attribute for your marks!
addTooltips(
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
title: (d) =>
`${d.island} \n culmen depth: ${d.culmen_depth_mm} \n culmen length: ${d.culmen_length_mm}` // \n makes a new line
}).plot()
)
addTooltips(
Plot.plot({
marks: [
Plot.dot(data, {
x: "bill_length",
y: "bill_depth",
title: (d) =>
`${d.island} \n bill depth: ${d.bill_depth} \n bill length: ${d.bill_length}` // \n makes a new line
})
],
tooltip: {
fill: "red",
stroke: "blue",
r: 8
}
})
)
addTooltips(
Plot.rectY(
data,
Plot.binX(
{ y: "count", title: (elems) => `rows\n${elems.length}` },
{ x: "body_mass", thresholds: 20 }
)
).plot(),
// Set styles for the hovered element
{ fill: "gray", opacity: 0.5, "stroke-width": "3px", stroke: "red" }
)
addTooltips(
Plot.dot(
data,
Plot.binX(
{ y: "count", title: (elems) => `count\n${elems.length}` },
{ x: "body_mass", thresholds: 20 }
)
).plot(),
// Set styles for the hovered element
{ fill: "gray", opacity: 0.5, "stroke-width": "3px", stroke: "red" }
)
addTooltips(
Plot.barX(data, {
x: "body_mass",
fill: "island",
title: (d) => d.island + "\n" + d.bill_length
}).plot({
// caption: "test",
style: { paddingTop: 30 },
width
})
)
addTooltips(
Plot.plot({
y: {
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.areaY(
industries,
Plot.stackY({
x: "date",
y: "unemployed",
fill: "industry",
z: "industry",
title: (d) => `industry\n${d.industry}`,
order: "max",
reverse: true,
stroke: "#ddd"
})
),
Plot.ruleY([0])
],
style: {
pointerEvents: "all"
},
color: {
legend: true,
columns: "110px",
width: 640
}
})
)
Plot.plot({
y: {
grid: true,
label: "↑ Unemployment (%)"
},
marks: [
Plot.ruleY([0]),
Plot.lineY(bls, {
x: "date",
y: "unemployment",
z: "division",
stroke: "lightgrey"
}),
Plot.lineY(
bls,
Plot.pointer({
x: "date",
y: "unemployment",
z: "division",
//stroke: "division", // lines don't need an explicit z
render: (index, scales, values, dimensions, context, next) => {
// Filter and highlight the paths with the same *z* as the hovered point.
const path = d3
.select(context.ownerSVGElement)
.selectAll("[aria-label=line] path");
if (index.length) {
const z = values.z[index[0]];
path
.style("stroke", "black")
.filter(([i]) => values.z[i] != z)
.style("stroke", null)
.raise();
} else path.style("stroke", null);
return next(index, scales, values, dimensions, context);
}
})
),
Plot.tip(
bls,
Plot.pointer({
x: "date",
y: "unemployment",
z: "division"
})
)
]
})
Plot.plot({
width,
height: 800,
y: {
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.line(
industries,
Plot.windowY({
x: "date",
y: "unemployed",
stroke: "lightgrey",
z: "industry",
k: 10
//marker: true
})
),
Plot.line(
industries,
Plot.pointerX(
Plot.windowY({
x: "date",
y: "unemployed",
z: "industry",
k: 10,
//stroke: "industry", // lines don't need an explicit z
render: (index, scales, values, dimensions, context, next) => {
// Filter and highlight the paths with the same *z* as the hovered point.
const path = d3
.select(context.ownerSVGElement)
.selectAll("[aria-label=line] path");
if (index.length) {
const z = values.z[index[0]];
path
.style("stroke", "black")
.filter(([i]) => values.z[i] != z)
.style("stroke", null)
.raise();
} else path.style("stroke", null);
return next(index, scales, values, dimensions, context);
}
})
)
),
Plot.tip(
industries,
Plot.pointerX(
Plot.windowY({
x: "date",
y: "unemployed",
z: "industry",
k: 10
})
)
),
Plot.ruleY([0])
]
})
Plot.plot({
width,
height: 800,
y: {
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.ruleY([0]),
Plot.line(industries, {
x: "date",
y: "unemployed",
stroke: "lightgrey",
z: "industry",
marker: true
}),
Plot.line(
industries,
Plot.pointer({
x: "date",
y: "unemployed",
stroke: "industry"
})
)
]
})
addTooltips(
Plot.plot({
width,
height: 600,
y: {
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.line(industries, {
x: "date",
y: "unemployed",
stroke: "industry",
z: "industry",
title: (d) =>
`${d.industry}\ndate:${d3
.timeFormat("%B %d, %Y")(d.date)
.trim()}\nunemployed:${d.unemployed}`,
marker: true
}),
Plot.ruleY([0])
]
})
)
Plot.plot({
width,
height: 500,
marks: [
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
title: (d) =>
`${d.island} \n culmen depth: ${d.culmen_length_mm} \n culmen length: ${d.culmen_depth_mm}` // \n makes a new line
}),
Plot.dot(
penguins,
Plot.pointer({
x: "culmen_length_mm",
y: "culmen_depth_mm",
z: "species",
render: addTooltipsv201({
fill: "red",
stroke: "blue",
r: 8
})
})
)
]
})
import { data as brandData } from "@observablehq/plot-cheatsheets-marks"
addTooltips(
Plot.plot({
marks: [
Plot.cell(brandData, {
x: "date",
y: "brand",
fill: "value",
title: (d) => `${d.brand}\nvalue:${d.value}`
})
],
color: { scheme: "blues", legend: true, reverse: false },
marginLeft: 100,
x: { tickFormat: null },
width: 578
})
)
Plot.plot({
width,
height: 500,
marks: [
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm"
}),
Plot.dot(
penguins,
Plot.pointer({
x: "culmen_length_mm",
y: "culmen_depth_mm",
z: "species",
render: addTooltipsv202({
fill: "red",
stroke: "blue",
r: 8
})
})
)
]
})
// automatically add tooltips to every Plot in a notebook
// this allows users to do import {Plot} from "@dheerajyss/plot-tooltip-v2"
// Plot = tooltipPlugin(await require("@observablehq/plot"))
// import { Plot } from "@dheerajyss/observablehq-notebook-plugins-manager"
industries.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
bls = FileAttachment("bls-metro-unemployment.csv").csv({ typed: true })
bls
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
