PhD student at University of Hasselt.
Public
Edited
Jan 18, 2024
data = FileAttachment("data@1.csv").csv().then(data => {
const parseTime = d3.timeParse("%H:%M");
data.forEach(d => {
const departTime = parseTime(d.depart);
const arriveTime = parseTime(d.arrive);
if (departTime.getHours() >= 0 && departTime.getHours() < 6) {
departTime.setDate(departTime.getDate() + 1);
if (arriveTime.getHours() > 6) {
arriveTime.setDate(arriveTime.getDate() + 1);
}
}
if (arriveTime.getHours() >= 0 && arriveTime.getHours() < 6) {
arriveTime.setDate(arriveTime.getDate() + 1);
if (departTime.getHours() > 6) {
}
}
d.depart = departTime;
d.arrive = arriveTime;
d.bold = d.bold === "TRUE" ? true : false;
});
return data;
});
chart = {
const width = 2560;
const height = 1280;
const svg = d3.create('svg').attr('width', width).attr('height', height);
const yScale = d3.scaleLinear().domain([0,d3.max(stations, d => d.dist)]).range([0,height]);
const xScale = d3.scaleTime().domain([new Date("1900-01-01T06:00Z"), new Date("1900-01-02T06:00Z")]).range([0,width]);
const lines = svg.selectAll("line")
.data(data)
.join("line")
.attr("x1", d => xScale(d.depart))
.attr("x2", d => xScale(d.arrive))
.attr("y1", d => yScale(stations.find(k => k.station === d.source).dist))
.attr("y2", d => yScale(stations.find(k => k.station === d.target).dist))
.attr("stroke-width", d => d.bold ? 1 : .5)
.attr("stroke", d => d.bold ? "black" : "gray");
return svg.node();
}
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.
