Plot as an inset for another PlotMaking a Treemap and Sankey diagram with Observable PlotAnalyzing time series data with PlotScatterplot Charts - a collection of Plot examplesAn easter egg collection of Plot examplesDisplaying multiple plots of the whole dataset - a collection of Plot examplesLine charts - a collection of Plot examplesSorting with Plot - a collection of Plot examplesThe function mark - a collection of Plot examplesArea Charts - a collection of Plot examplesDistributions and summary statistics - a collection of Plot examplesPlot party! 🥳🎉Plot API v0.1.0Raincloud Plots with Observable PlotPlot exploration: How to make a clock with Plot?Plot exploration: How to make a slope graph?
Plot Exploration: How to customize the calendar visualization?
// type your code here
Plot.plot({
x: {
axis: null
},
y: {
tickFormat: i => "SMTWTFS"[i],
tickSize: 0
},
color: {
scheme: "blues",
},
facet: {
data: data,
y: d => d.date.getUTCFullYear(),
},
marks: [
Plot.frame({stroke: "#ccc"}),
Plot.cell(data, {
x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date),
y: d => d.date.getUTCDay(),
fill: "precipitation",
title: "precipitation",
inset: 0.5,
})
]
})
// type your code here
Plot.plot({
x: {
axis: null
},
y: {
tickFormat: i => "SMTWTFS"[i],
tickSize: 0
},
color: {
scheme: myScheme, // changed this to refer to our Select input instead of "blues"
},
facet: {
data: data,
y: d => d.date.getUTCFullYear(),
},
marks: [
Plot.frame({stroke: "#ccc"}),
Plot.cell(data, {
x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date),
y: d => d.date.getUTCDay(),
fill: "precipitation",
title: "precipitation",
inset: 0.5,
})
]
})
// type your code here
Plot.plot({
width: 1200,
y: {
tickFormat: i => "SMTWTFS"[i],
tickSize: 0,
},
color: {
scheme: myScheme,
},
facet: {
data: data,
y: d => d.date.getUTCFullYear(),
x: d => d.date.getUTCMonth(),
},
marks: [
Plot.cell(data, {
x: d => d3.utcWeek.count(d3.utcMonth(d.date), d.date), // x value based on week of month
y: d => d.date.getUTCDay(), // y value based on day of the week
fill: "precipitation",
title: d => `${d.date}: ${d.precipitation}`,
}),
// Plot.frame(),
]
})
// type your code here
Plot.plot({
width: 1200,
y: {
// padding: 0,
tickFormat: Plot.formatWeekday("de"),
tickSize: 0,
domain: [1,2,3,4,5,6,0], // change the order of week days to start with Monday
},
color: {
scheme: myScheme,
},
facet: {
data: data,
y: d => d.date.getUTCFullYear(),
x: d => d.date.getUTCMonth(),
},
marks: [
Plot.cell(data, {
x: d => d3.timeMonday.count(d3.utcMonth(d.date), d.date), // x value based on week of month (Monday based)
y: d => d.date.getUTCDay(), // y value based on day of the week
fill: "precipitation",
title: d => `${d.date}: ${d.precipitation}`,
}),
// Plot.frame(),
]
})
// type your code here
Plot.plot({
x: {
// padding: 0,
tickFormat: Plot.formatWeekday("de"),
tickSize: 0,
domain: [1,2,3,4,5,6,0],
},
color: {
scheme: myScheme,
},
facet: {
data: data,
x: d => d.date.getUTCFullYear(),
y: d => d.date.getUTCMonth(),
},
marks: [
Plot.cell(data, {
y: d => d3.timeMonday.count(d3.utcMonth(d.date), d.date), // monday-based layout
x: d => d.date.getUTCDay(),
fill: "precipitation",
title: d => d.date,
}),
// Plot.frame(),
]
})
// type your code here
Plot.plot({
x: {
// padding: 0,
tickFormat: Plot.formatWeekday("de"),
tickSize: 0,
domain: [1, 2, 3, 4, 5, 6, 0],
axis: "top"
},
y: {
axis: null
},
color: {
scheme: myScheme
},
fx: {
axis: "top"
},
fy: {
tickFormat: Plot.formatMonth("de")
},
facet: {
data: data,
x: (d) => d.date.getUTCFullYear(),
y: (d) => d.date.getUTCMonth()
},
marks: [
Plot.cell(data, {
y: (d) => d3.timeMonday.count(d3.utcMonth(d.date), d.date), // monday-based layout
x: (d) => d.date.getUTCDay(),
fill: "precipitation",
title: (d) => d.date
})
// Plot.frame(),
]
})
Plot.plot({
width: width,
height: width / 3,
x: {
// padding: 0,
tickFormat: Plot.formatWeekday("de", "narrow"),
tickSize: 0,
domain: [1, 2, 3, 4, 5, 6, 0],
axis: "top"
},
y: {
axis: null
},
color: {
scheme: myScheme
},
facet: {
data: data,
x: (d) => d.date.getUTCMonth(),
y: (d) => d.date.getUTCFullYear()
},
marks: [
Plot.cell(data, {
// lay the days out in the x direction based on the week of the year
// x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date),
y: (d) => d3.timeMonday.count(d3.utcMonth(d.date), d.date), // monday-based layout
// lay the days out in the x direction based on day of the week
x: (d) => d.date.getUTCDay(),
fill: "precipitation",
title: (d) => d.date
}),
Plot.axisFx({
axis: "top",
dy: -14,
tickFormat: Plot.formatMonth("de", "long")
})
// Plot.frame(),
]
})
Object.assign(
Plot.plot({
width: 2800,
height: 700,
caption: html`This chart is a <b>extra laaaaarge</b>. `,
style: { maxWidth: "2800px" },
x: {
// padding: 0,
tickFormat: Plot.formatWeekday("de"),
tickSize: 0,
domain: [1, 2, 3, 4, 5, 6, 0],
axis: "top"
},
y: {
axis: null
},
color: {
scheme: myScheme
},
fy: {
// tickFormat: Plot.formatY("de"),
},
facet: {
data: data,
x: (d) => d.date.getUTCMonth(),
y: (d) => d.date.getUTCFullYear()
},
marks: [
Plot.cell(data, {
// lay the days out in the x direction based on the week of the year
// x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date),
y: (d) => d3.timeMonday.count(d3.utcMonth(d.date), d.date), // monday-based layout
// lay the days out in the x direction based on day of the week
x: (d) => d.date.getUTCDay(),
fill: "precipitation",
title: (d) => d.date
}),
Plot.axisFx({
axis: "top",
dy: -14,
tickFormat: Plot.formatMonth("de", "long")
})
// Plot.frame(),
]
}),
{ style: `max-width: ${width}px; overflow: scroll` }
)
drawCalendar(new Date("03/08/2022"), new Date("04/13/2022"))
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.