timeline.element
oneYearAgo = new Date().setFullYear(new Date().getFullYear() - 1)
oneYearFromNow = new Date().setFullYear(new Date().getFullYear() + 1)
myData = Array.from({ length: 500 }, (x, i) => ({
id: i,
start: new Date(
new Date().getTime() + Math.random() * 100000000000 - 50000000000
)
}))
0html`
<style type="text/css">
.timeline-axis {
--daily-gridline-color: rgb(194, 199, 200);
--yearly-gridline-color: rgb(81, 93, 93);
--yearly-tick-color: rgb(81, 93, 93);
--yearly-label-color: rgb(60, 79, 81);
--daily-tick-color: rgb(161, 173, 173);
--daily-label-color: rgb(60, 79, 81);
--weekly-tick-color: rgb(161, 173, 173);
--weekly-label-color: rgb(60, 79, 81);
}
.timeline-axis line {
shape-rendering: geometricPrecision;
stroke-width: 0.5;
}
.timeline-axis .yearly line {
stroke: var(--yearly-tick-color);
}
.timeline-axis .yearly text {
color: var(--yearly-label-color);
}
.timeline-axis .daily line {
stroke: var(--daily-tick-color);
}
.timeline-axis .daily text {
color: var(--daily-label-color);
}
.timeline-axis .weekly line {
stroke: var(--weekly-tick-color);
}
.timeline-axis .weekly text {
color: var(--weekly-label-color);
}
.timeline-axis .grid line {
stroke: var(--daily-gridline-color);
}
.timeline-axis .yearlyGrid line {
stroke: var(--yearly-gridline-color);
}
</style>
`
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.
