Unlisted
Edited
Jun 17
Fork of Simple D3
Insert cell
Insert cell
Insert cell
// Create the combined horizontal time scale.
combScale = d3.scaleTime()
.domain(
[
d3.min(
[d3.min(dataIS, (d) => d.tsEnd),
d3.min(data, (d) => d.ts)]
),
d3.max(
[d3.max(dataIS, (d) => d.tsEnd),
d3.max(data, (d) => d.ts)]
)
]
)
.range([marginLeft, width - marginRight]);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
outageIntervals = FileAttachment("OutageIntervals@5.json").json()
Insert cell
outages = FileAttachment("Outages@4.json").json();
Insert cell
dataIS = outageIntervals.Rows.sort((a,b) => d3.ascending(a.tsEnd, b.tsEnd));
Insert cell
data = outages.Rows.sort((a,b) => d3.ascending(a.tsEnd, b.tsEnd));

Insert cell
stats = data.
Insert cell

// Interpret .EventTimestamp to .ts in the Events data
data.forEach(
(d) => {
d.ts = parseTime(d.EventTimestamp);
}
);
Insert cell
// prep the outageIntervals
outageIntervals.Rows.forEach(
(d,i) => {
d.tsStart = parseTime(d.IntervalStart);
d.tsEnd = parseTime(d.IntervalEnd);
d.tsNextEnd = (i < outageIntervals.TotalRows - 1) ? parseTime(dataIS[i+1].IntervalEnd) : d.tsEnd;
});

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