Public
Edited
Aug 2, 2023
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(data, Plot.groupX({y: "extent"}, {x:d => d.date.getUTCFullYear()})),
// x: "date",
// y: "extent",
//z: d => d.date.getUTCFullYear(), // Separate lines by year
]
})

Insert cell
Insert cell
Plot.plot({
x: {
// map all dates to fiscal year by adding or subtracting half a year (182.62 days)
transform: (d) => {
let offset = d.getUTCMonth() >= 6 ? -182.62 : 182.62;
let fiscalDate = d3.utcDay.offset(d, offset);
return d3.utcDay.offset(fiscalDate, (2000 - fiscalDate.getUTCFullYear()) * 365.24);
},
tickFormat: (d) => {
let month = d.getUTCMonth();
let adjustedMonth = (month + 7) % 12;
let adjustedDate = new Date(d.getUTCFullYear(), adjustedMonth, 1);
return d3.utcFormat("%b")(adjustedDate);
},
line: true
},
y: { nice: true, grid: true, zero: true },
marks: [
Plot.line(data, {
x: "date",
y: "extent",
z: d => d.date.getUTCFullYear() + (d.date.getUTCMonth() >= 6 ? 1 : 0) , // Separate lines by fiscal month and calendar year
stroke: d => d.date.getUTCFullYear() === 2015 ? "blue" : "gray", // Change color based on year
})
]
})
Insert cell
Insert cell
Plot.plot({
x: {
type: "utc",
transform: (x) => d3.utcDay.offset((365 - 184) * 24 * 3600 * 1000, x),
tickFormat: "%b",
line: true
},
y: { nice: true, grid: true, zero: true, label:"Groundwater Level" },
marks: [
Plot.line(data, {
filter: d => d.date.getUTCFullYear() != 2015,
x: (d) => (d3.utcDay.count(d3.utcYear(d.date), d.date) + 184) % 365,
y: "extent",
z: (d) =>
d.date.getUTCFullYear() -
(d3.utcDay.count(d3.utcYear(d.date), d.date) < 365 - 184), // Separate lines by fiscal month and calendar year
stroke: 'gray',
strokeWidth: 1,
strokeOpacity: .25
}),
Plot.line(data, {
filter: d => d.date.getUTCFullYear() == 2015,
x: (d) => (d3.utcDay.count(d3.utcYear(d.date), d.date) + 184) % 365,
y: "extent",
z: (d) =>
d.date.getUTCFullYear() -
(d3.utcDay.count(d3.utcYear(d.date), d.date) < 365 - 184), // Separate lines by fiscal month and calendar year
stroke: 'black',
strokeWidth: 5,
strokeDasharray: [4,9]
}),
]
})
Insert cell
// groupedData = d3.rollup(
// data,
// v => d3.mean(v, d => d.extent),
// (d) =>
// d.date.getUTCFullYear() -
// (d3.utcDay.count(d3.utcYear(d.date), d.date) < 365 - 184)
// );

groupedData = d3.rollup(
data,
v => d3.mean(v, d => d.extent),
d => getFiscalYear(d.date)
);
Insert cell
minYear = d3.min(groupedData, d => d[0]);
Insert cell

// maxYear = d3.max(groupedData, d => d[0]);
// meanYear = d3.mean(groupedData, d => d[0]);

minData = data.filter(d => getFiscalYear(d.date) === minYear);
// let maxData = data.filter(d => getFiscalYear(d.date) === maxYear);
// let meanData = data.filter(d => getFiscalYear(d.date) === meanYear);
Insert cell
plot = Plot.plot({
x: {
type: "utc",
transform: (x) => d3.utcDay.offset((365 - 184) * 24 * 3600 * 1000, x),
tickFormat: "%b",
line: true
},
marks: [
Plot.line(minData,{
x: (d) => (d3.utcDay.count(d3.utcYear(d.date), d.date) - 182) % 365,
y: "extent",
stroke: "blue"}),
]
});
Insert cell
function getFiscalYear(date) {
let fiscalYear = date.getUTCFullYear();
// if the date is past June, it belongs to the next fiscal year
if (date.getUTCMonth() >= 6) {
fiscalYear += 1;
}
return fiscalYear;
}
Insert cell
data = FileAttachment("sea-ice-extent.csv").csv({ typed: true })
Insert cell
import { addTooltip } from "@fil/experimental-plot-tooltip-01"
Insert cell
data2 = [
{"year": 2016, "sum": 5933.566941666662},
{"year": 2017, "sum": 5927.048454999997},
{"year": 2018, "sum": 7001.092951666666},
{"year": 2019, "sum": 6801.823821779584},
{"year": 2020, "sum": 6027.366745095773},
{"year": 2021, "sum": 5854.511330970313}
]

Insert cell
data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
color: {
type: "sequential",
scheme: "blues"
},
y: {
grid: true,
label: 'Average Volume (ML)',
},
x: {
label: 'Fiscal Year',
FontSize: 10
},
marks: [
Plot.barY(data1, {x: 'FiscalRange', y: 'GWL1', fill: '#3599b8', inset:-2, dx:1.5, dy:-1}),
Plot.barY(data1, {x: 'FiscalRange', y: 'GWL1', fill: '#3599b8', inset:0, dx:-1}),
Plot.barY(data1, {x: 'FiscalRange', y: 'GWL1', fill:'#136586', width:100}),
]
})
Insert cell
RN015588@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
// data3 = {
// // Create a Date object for November 1, 2018
// let startDate = new Date(2018, 10, 1); // Note: JavaScript months are 0-indexed, so 10 represents November

// // Filter the data to be only dates on or after November 1, 2018
// let filteredData = rn0155881.filter(d => {
// let date = new Date(d.Date);
// return date >= startDate;
// })

// return filteredData;
// }
// {
// let groupedData = Array.from(d3.group(plotData, d => formatDate(d.Date)), ([key, value]) => ({Date: key, Value: mean(value, d => d.Value)}));
// }

data3 = {
// Create a Date object for November 1, 2018
let startDate = new Date(2018, 6, 1); // Note: JavaScript months are 0-indexed, so 10 represents November

// Filter the data to be only dates on or after November 1, 2018
let filteredData = rn0155881.filter(d => {
let date = new Date(d.Date);
return date >= startDate;
})

return filteredData;
}
Insert cell
groupedDatas = {
// Define the formatDate and mean functions
let formatDate = d3.timeFormat("%Y-%m-%d");
let mean = (values) => d3.mean(values);

// Group the filtered data by date and calculate the mean value for each date
let groupedData = Array.from(d3.group(data3, d => formatDate(new Date(d.Date))), ([key, value]) => ({Date: key, Value: mean(value.map(d => d.Value))}));

return groupedData;
}

Insert cell
groupedDatas
X*
Y*
Color
Size
Facet X
Facet Y
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
y: { label: "Water Level Below Ground (m)" },
x: { label: "Date" },
marks: [
Plot.frame({fill: "currentColor", fillOpacity: 0.01}),
Plot.frame({anchor: "bottom"}),
//Plot.ruleY([0]),
Plot.axisX({ticks: "3 months"}),
//Plot.axisX({ticks: "year", tickSize: 28, tickPadding: -11, tickFormat: " %Y", textAnchor: "start"}),
//Plot.axisX({ticks: "6 months"}),
//Plot.axisX({ticks: "6 months", tickSize: 16, tickPadding: -11, tickFormat: " %b", textAnchor: "start"}),
Plot.gridX(),
//Plot.lineY(data3, { x: "Date", y: "Value", tip: true }),
Plot.lineY(data3, Plot.windowY(365, {x: "Date", y: "Value", stroke: "#18a1cd"})),
]
})
Insert cell
Plot.plot({
y: { label: "Water Level Below Ground (m)", domain: [-15, 0] },
x: { label: "Date" },
marks: [
Plot.frame({fill: "currentColor", fillOpacity: 0.01}),
Plot.frame({anchor: "bottom"}),
Plot.ruleY([0], {stroke: 'black', strokeWidth: 2, strokeDasharray: [7,3]}),
//Plot.axisX({ticks: "3 months"}),
Plot.axisX({ticks: "year", tickSize: 28, tickPadding: -11, tickFormat: " %Y", textAnchor: "start"}),
//Plot.axisX({ticks: "6 months"}),
//Plot.axisX({ticks: "6 months", tickSize: 16, tickPadding: -11, tickFormat: " %b", textAnchor: "start"}),
Plot.gridX(),
Plot.gridY({strokeDasharray: "0.75,2", // dashed
strokeOpacity: .5}), // opaque),
//Plot.lineY(data3, { x: "Date", y: "Value", tip: true }),
Plot.lineY(data3, Plot.windowY(365, {x: "Date", y: "Value", stroke: "#18a1cd", strokeWidth:3})),
]
})
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