Public
Edited
Jan 13, 2023
5 stars
timeMultiFormatter = (date) => {
// formatMillisecond: .000
const formatMillisecond = d3.timeFormat(".%L"),
// formatSecond: :00
formatSecond = d3.timeFormat(":%S"),
// formatMinute: 07:00
formatMinute = d3.timeFormat("%I:%M"),
// formatHour: 07 PM
formatHour = d3.timeFormat("%I %p"),
// formatDay: Tue 26
formatDay = d3.timeFormat("%a %d"),
// formatWeek: Feb 26
formatWeek = d3.timeFormat("%a, %b %d"),
// formatMonth: February
formatMonth = d3.timeFormat("%B"),
// formatYear: 2019
formatYear = d3.timeFormat("%Y");
return (d3.timeSecond(date) < date
? formatMillisecond
: d3.timeMinute(date) < date
? formatSecond
: d3.timeHour(date) < date
? formatMinute
: d3.timeDay(date) < date
? formatHour
: d3.timeMonth(date) < date
? d3.timeWeek(date) < date
? formatDay
: formatWeek
: d3.timeYear(date) < date
? formatMonth
: formatYear)(date);
}
RenderAxis(function CustomAxis(g, scale, height, m) {
g.selectAll('.x-axis-bottom')
.data(['x-axis-bottom'], d => d)
.join('g')
.attr('class', d => d)
.attr("transform", `translate(${0}, ${height - m})`)
.call(
d3
.axisBottom()
.scale(scale)
.tickSize(10)
.tickPadding(4)
.tickSizeOuter(0)
.tickFormat(d => {
// GO THROUGH EACH TICK (DATE)
let it = null;
//LOWEST TICK IS $hour $am/pm
if (+d3.timeHour(d) === +d) {
it = d3.timeFormat('%-I %p')(d);
}
// 3RD TICK TIER - DAYS
if (+d3.timeDay(d) === +d) {
//eg: 03/09, 03/11, 03/13
it = d3.timeFormat('%m/%d')(d);
}
// // 2ND TICK TIER - WEEKS
// if (+d3.timeWeek(d) === +d) {
// //eg: Sun 08, Sun 15
// it = d3.timeFormat('%a %d')(d);
// }
//LARGEST TICKS - MONTHS
if (+d3.timeMonth(d) === +d) {
it = d3.timeFormat('%b')(d);
}
return it;
})
)
.call(g => {
g.selectAll('text')
.filter(function(d, i) {
if (d3.select(this).text() === '12AM') {
d3.select(d3.select(this).node().parentNode).remove();
}
})
.remove();
// g.selectAll('line').attr('stroke-dasharray', [2, 10]);
// g.selectAll('.domain')
// .attr('stroke-width', 2 * (height - 2 * m))
// .attr('opacity', 1);
// .attr('stroke', '#f5f5f5');
});
})
await FileAttachment('Screen Shot 2021-02-07 at 5.19.32 PM.png').image()
withoutTime = d3.timeFormat('%Y-%m-%d')(new Date('2020-05-20'))
withTimeAdjusted = d3.timeFormat('%Y-%m-%d')(new Date('2020-05-19 18:30:00'))
withTime = d3.timeFormat('%Y-%m-%d')(new Date('2020-05-20 00:00:00'))
d3.timeFormat('%Y-%m-%d')(new Date('2020-05-20')) //
d3.timeParse('%Y-%m-%d')('2020-05-20')
d3.timeParse('%Y-%m-%dT%H:%M:%S')('2020-05-20T00:00:00')
withTime === withoutTime
new Date('2020-01-01')
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.
