Public
Edited
Jan 7, 2023
processed[0].started
processed[0].ended
htl.html`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 10px sans-serif;">
<g>
${processed.map(
(d) =>
htl.svg`<circle cx="${
d.started ? x(getEventDate(d.started)) : -10
}" cy="${
d.started ? y(getYTime(d.date, d.started)) : -10
}" r="1" stroke="green" stroke-width="3" fill="red" />`
)}
${processed.map(
(d) =>
htl.svg`<circle cx="${d.ended ? x(getEventDate(d.ended)) : -10}" cy="${
d.ended ? y(getYTime(d.date, d.ended)) : -10
}" r="1" stroke="red" stroke-width="3" fill="red" />`
)}
</g>
${d3
.select(htl.svg`<g transform="translate(0,${height - margin.bottom})">`)
.call(d3.axisBottom(x))
.node()}
${d3
.select(htl.svg`<g transform="translate(${margin.left},0)">`)
.call(d3.axisLeft(y))
.node()}
</svg>`
function getEventDate(timestamp) {
// get the date of event
const year = timestamp.getFullYear();
const month = timestamp.getMonth() + 1;
const day = timestamp.getDate();
const parseDate = d3.timeParse("%Y-%m-%d");
const date = parseDate(`${year}-${month}-${day}`); // Tue Jun 30 2015 00:00:00 GMT-0700 (PDT)
return date;
}
s = processed[10].date
e = new Date(s.getTime() + totalMillis)
function getYTime(date, timestamp){
const offset = timestamp - date;
return new Date(s.getTime() + offset);
}
y = d3
.scaleTime()
.domain([s, e])
.range([margin.top, height - margin.bottom])
x = d3
.scaleTime()
.domain(d3.extent(processed, (d) => d.date))
.range([margin.left, width - margin.right])
.nice()
processed = {
const parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%S%Z");
return rawJson.map((d) => {
// for the started and ended fields we are only interested on the time of day
const date = parseDate(d.date);
const started = parseDate(d.info.started);
const ended = parseDate(d.info.ended);
return {
date: date,
started: started ? started : null,
ended: ended ? ended : null
};
});
}
rawJson = d3.json(url)
url = FileAttachment("daily-data.json").url()
totalMillis = 24 * 60 * 60 * 1000
height = 400
margin = ({ top: 10, right: 0, bottom: 20, left: 50 })
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.
