Public
Edited
Sep 19, 2023
Insert cell
Insert cell
Insert cell
Insert cell
timetrend = FileAttachment("timetrend.json").json()
Insert cell
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data = timetrend.dataPoints
Insert cell
data
X
YEAR
Y
median
Color
Size
Facet X
Facet Y
Mark
line
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
title: timetrend.metadata.title,
marks: [Plot.lineY(data, { x: "YEAR", y: "median", tip: true })]
})
Insert cell
## ${timetrend.metadata.title}
Insert cell
${timetrend.metadata.subtitle}
Insert cell
Plot.plot({
x: {
label: timetrend.dataPointMetadata.find((item) => item.id === "YEAR").name, // pulling the label for YEAR
domain: timetrend.dataPointMetadata.find((item) => item.id === "YEAR") // pulling the order for YEAR
.categories
},
y: {
grid: true,
label: timetrend.dataPointMetadata.find((item) => item.id === "median").name // pulling the label
},
marks: [
Plot.lineY(timetrend.dataPoints, { x: "YEAR", y: "median", tip: true })
]
})
Insert cell
Insert cell
Insert cell
/// https://github.com/observablehq/plot/issues/92
Insert cell
Insert cell
timetrendDemo = FileAttachment("timetrend-demo.json").json()
Insert cell
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
color: { legend: true },
x: {
label: timetrendDemo.dataPointMetadata.find((item) => item.id === "YEAR")
.name, // pulling the label for YEAR
domain: timetrendDemo.dataPointMetadata.find((item) => item.id === "YEAR") // pulling the order for YEAR
.categories
},
y: {
grid: true,
label: timetrendDemo.dataPointMetadata.find((item) => item.id === "median")
.name // pulling the label
},
color: {
type: "ordinal",

legend: true,
domain: timetrendDemo.dataPointMetadata.find(
(item) => item.id === "levels_title"
).categories, // pulling the order o
range: ["purple", "gray", "lightgray", "lightgreen", "green", "darkgreen"]
},
marks: [
Plot.lineY(timetrendDemo.dataPoints, {
x: "YEAR",
y: "median",
stroke: "levels_title",
tip: true
})
]
})
Insert cell
Plot.plot({
title: timetrend.metadata.title,
subtitle: timetrend.metadata.subtitle,
caption: `Source: ${timetrend.metadata.source.name}`,
//caption: `Source: ${timetrend.metadata.source.name}Note: ${timetrend.metadata.note}`,
// Caption formatting needs investigation and improvement from Plot!
style: {
// backgroundColor: "black"
},

style: { fontSize: "20" }, //Global font size. Controls Line Labels because other fontsize for xy axis set below
//MADE EDIT HERE, CAN PLAY WITH POSITION
//size
height: 543,
width: 800,
//space around
marginLeft: 100, // space to the left of the chart
marginRight: 50,
marginTop: 20,
marginBottom: 50, // space below the chart
//space within
insetTop: 0,
insetBottom: 10, // space between the x-axis and the marks
insetLeft: 1, // space between the y-axis and the marks
insetRight: 0,

color: { legend: true },
x: {
label: timetrendDemo.dataPointMetadata.find((item) => item.id === "YEAR")
.name, // pulling the label for YEAR
domain: timetrendDemo.dataPointMetadata.find((item) => item.id === "YEAR") // pulling the order for YEAR
.categories
},
y: {
grid: true,
domain: [yaxisMin, yaxisMax], //here add the y axis min/max MADE EDIT HERE
label: timetrendDemo.dataPointMetadata.find((item) => item.id === "median")
.name // pulling the label
},
color: {
type: "ordinal",
legend: true,
domain: timetrendDemo.dataPointMetadata.find(
(item) => item.id === "levels_title"
).categories, // pulling the order o
range: [
"#009e73", //MADE EDIT HERE, COLOR BLIND FRIENDLY
"#ffb000",
"#dc267f",
"#648fff",
"#d55e00",
"#cc79a7",
"#0072b2",
"#f0e442",
"#785ef0",
"#fe6100"
]
},
marks: [
Plot.axisX({ fontSize: 13 }), //Made edit here font size
Plot.axisY({ fontSize: 12, label: "$" }), //Here need to edit label field
Plot.lineY(timetrendDemo.dataPoints, {
x: "YEAR",
y: "median",
stroke: "levels_title",
strokeWidth: 2, // Add this line
tip: true,
title: (d) =>
`Median: ${d.median}\n${
timetrendDemo.dataPointMetadata.find(
(item) => item.id === "levels_title"
).name
}: ${d.levels_title}\nYear: ${d.YEAR}` // Add this line
}),
Plot.dot(timetrendDemo.dataPoints, {
x: "YEAR",
y: "median",
stroke: "levels_title",
// fill: "#ffffff",
r: 2 // Makes the dots smaller. Adjust the value as needed.
}),
Plot.text(
//NEED HELP HERE

timetrendDemo.dataPoints,
Plot.selectLast({
x: "YEAR",
y: "median",
z: "levels_title", //NOT SURE ABOUT THIS
text: "levels_title",
textAnchor: "start",
dx: 5
})
)
]
})
Insert cell
//compute the average of the column called mean
average = timetrendDemo.dataPoints.reduce((total, d) => total + d.median, 0) /
timetrendDemo.dataPoints.length
Insert cell
//set the minimum of axis=minimum of data - x*average, or 0. Adjust x
yaxisMin = Math.max(
0,
Math.min(...timetrendDemo.dataPoints.map((d) => d.median)) - 0.2 * average
)
Insert cell
//set the maximum of axis=maximum of data + x*average. Adjust x
yaxisMax = Math.max(...timetrendDemo.dataPoints.map((d) => d.median)) +
0.2 * average
Insert cell
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