Applying GIS, Data Vis. and Deep Learning to environmental science and nuclear emergency responses
Public
Edited
Apr 6, 2023
1 fork
1 star
distChart = {
const spec = {
height: height,
y: {
grid: true,
tickFormat: "~s"
},
x: {
label: "Distance (mi.) →"
},
marks: [
Plot.rectY(
data,
Plot.binX(
{ y: "count" },
{
x: "distance",
filter: (d) =>
inDomain(delay(d), delayDomain) &&
inDomain(hour(d), hourDomain) &&
inDomain(d.date, dateDomain)
}
)
),
Plot.ruleY([0])
]
};
let chart = Plot.plot(spec);
const x = chart.scale("x"),
[x1, x2] = x.range;
const y = chart.scale("y"),
[y1, y2] = y.range;
let domain = x.domain;
const wrapper = svg`<svg viewBox="${chart.getAttribute("viewBox")}">${chart}`;
const brush = d3
.brushX()
.extent([
[x1, y2],
[x2, y1]
])
.on("brush end", (event) => {
const { selection, sourceEvent } = event;
domain = selection && selection.map(x.invert);
mutable distDomain = domain;
});
d3.select(wrapper).call(brush);
return wrapper;
}
hourDayChart = {
const spec = {
height: height,
y: {
grid: true,
tickFormat: "~s"
},
x: {
label: "Hour of the Day →",
domain: hourScaleDomain
},
marks: [
Plot.rectY(
data,
Plot.binX(
{ y: "count" },
{
x: (d) => hour(d),
filter: (d) =>
inDomain(d.distance, distDomain) &&
inDomain(delay(d), delayDomain) &&
inDomain(d.date, dateDomain)
}
)
),
Plot.ruleY([0])
]
};
let chart = Plot.plot(spec);
const x = chart.scale("x"),
[x1, x2] = x.range;
const y = chart.scale("y"),
[y1, y2] = y.range;
let domain = x.domain;
const wrapper = svg`<svg viewBox="${chart.getAttribute("viewBox")}">${chart}`;
const brush = d3
.brushX()
.extent([
[x1, y2],
[x2, y1]
])
.on("brush end", (event) => {
const { selection, sourceEvent } = event;
domain = selection && selection.map(x.invert);
mutable hourDomain = domain;
});
d3.select(wrapper).call(brush);
return wrapper;
}
delayChart = {
const spec = {
height: height,
y: {
grid: true,
tickFormat: "~s"
},
x: {
label: "Arrival delay (min) →"
},
marks: [
Plot.rectY(
data,
Plot.binX(
{ y: "count" },
{
x: (d) => delay(d),
thresholds: 80,
filter: (d) =>
inDomain(d.distance, distDomain) &&
inDomain(hour(d), hourDomain) &&
inDomain(d.date, dateDomain)
}
)
),
Plot.ruleY([0])
]
};
let chart = Plot.plot(spec);
const x = chart.scale("x"),
[x1, x2] = x.range;
const y = chart.scale("y"),
[y1, y2] = y.range;
let domain = x.domain;
const wrapper = svg`<svg viewBox="${chart.getAttribute("viewBox")}">${chart}`;
const brush = d3
.brushX()
.extent([
[x1, y2],
[x2, y1]
])
.on("brush end", (event) => {
const { selection, sourceEvent } = event;
domain = selection && selection.map(x.invert);
mutable delayDomain = domain;
});
d3.select(wrapper).call(brush);
return wrapper;
}
dateChart = {
const spec = {
height: height,
y: {
grid: true,
tickFormat: "~s"
},
x: {
label: "Date →",
type: "time"
},
marks: [
Plot.rectY(
data,
Plot.binX(
{ y: "count" },
{
x: "date",
thresholds: 80,
filter: (d) =>
inDomain(d.distance, distDomain) &&
inDomain(delay(d), delayDomain) &&
inDomain(hour(d), hourDomain)
}
)
),
Plot.ruleY([0])
]
};
let chart = Plot.plot(spec);
const x = chart.scale("x"),
[x1, x2] = x.range;
const y = chart.scale("y"),
[y1, y2] = y.range;
let domain = x.domain;
const wrapper = svg`<svg viewBox="${chart.getAttribute("viewBox")}">${chart}`;
const brush = d3
.brushX()
.extent([
[x1, y2],
[x2, y1]
])
.on("brush end", (event) => {
const { selection, sourceEvent } = event;
domain = selection && selection.map(x.invert);
mutable dateDomain = domain;
});
d3.select(wrapper).call(brush);
return wrapper;
}
height = 140
hourScaleDomain = d3.extent(data, (d) => hour(d))
delay = function (d) {
return Math.max(-60, Math.min(149, d.delay));
}
hour = function (d) {
return d.date.getHours() + d.date.getMinutes() / 60;
}
parseDate = function (d) {
return new Date(
2001,
d.substring(0, 2) - 1,
d.substring(2, 4),
d.substring(4, 6),
d.substring(6, 8)
);
}
inDomain = function (d, domain) {
return domain === null ? true : d >= domain[0] && d <= domain[1];
}
mutable distDomain = null
mutable delayDomain = null
mutable hourDomain = null
mutable dateDomain = null
data = flights.map((d, i) => ({
...d,
date: parseDate(d.date)
}))
flights.map((d) => parseDate(d.date))
flights-3m.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
