// 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"))
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.
