Published
Edited
Jul 26, 2021
Importers
4 stars
CHART.call(ZOOM);
AxisBottom = (g, scale) =>
g
.selectAll('.x-axis-bottom')
.data(['x-axis-bottom'])
.join('g')
.attr('class', d => d)
.attr("transform", `translate(${0}, ${height - margin.bottom})`)
.call(
d3
.axisBottom()
.scale(scale)
.tickSize(5)
.tickPadding(2)
.tickSizeOuter(0)
.ticks(d3.timeHour.every(6))
.tickFormat(function(d) {
var hours;
hours = d.getHours();
if (hours === 12) {
// font awesome's sun icon
return '🌞';
} else if (hours === 0) {
// font awesome's moon icon
// return '🌒';
} else {
return d3.timeFormat('%-I%p')(d);
}
})
)
.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')
// .filter(function(d, i) {
// if(d3.select(this).text() === '12AM')
// return true;
// if(d3.select(this).text()===)
// );
// })
// .remove();
})
bind = (g, className) => {
return g
.selectAll(`.${className}`)
.data([className])
.join("g")
.attr("class", d => d);
}
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.
