Public
Edited
Jan 16, 2023
dragdisplay = function({height, scrollerheight, displayed, renderer, domain, numberrows}){
function _dragOn(d){
console.log('am in here');
let sel = d3.select(this)
, event = d3.event
, y = +sel.attr('y')
, yoff = event && event.dy || 0
, ny = y + yoff
, r = displayed(y)
, nr = displayed(ny)
;
console.log([y, yoff, ny, r, nr, ny + scrollerheight, height]);
if(ny < 0 || (ny + scrollerheight - 1) > height) return;
sel.attr('y', ny)
.attr('cursor', 'grabbing');
renderer({domain: domain.slice(nr, nr + numberrows)});
}
function _dragEnd(d){
d3.select(this)
.attr('cursor', 'grab');
}
return d3.drag()
.on("start", _dragOn)
.on("drag", _dragOn)
.on("end", _dragEnd);
}
renderchart = (svg, {xscale, yscale, ytickformatter, margin, ybandwidth}) => {
console.log('this is render chart')
return function({domain}){
console.log('this is render chart call')
yscale.domain(d3.extent(domain));
let imousebehavior = mousebehavior({xscale, yscale})
, yaxis = d3.axisLeft(yscale)
.tickSize(0)
.tickValues(domain.filter((d, i) => d % 60 === 0))
.tickFormat(ytickformatter)
;
svg.selectAll('g.yaxis')
.data([0])
.join('g').attr('class', 'yaxis')
.attr('transform', `translate(${[margin.left, margin.top]})`)
.call(yaxis)
let plot = svg.selectAll('g.plot')
.data([0])
.join('g').attr('class', 'plot')
.attr('transform', `translate(${[margin.left, margin.top]})`)
plot.selectAll('g.day-band')
.data(xscale.domain())
.join('g').attr('class', 'day-band')
.each(function(d){
let dayband = d3.select(this);
dayband.selectAll('g.time-cell')
.data(domain)
.join('g').attr('class', 'time-cell')
.attr('fill', '#000')
.each(function(cd){
d3.select(this)
.selectAll('rect')
.data([0])
.join('rect')
.attr('x', xscale(d))
.attr('width', xscale.bandwidth())
.attr('height', ybandwidth)
.attr('y', yscale(cd))
})
.call(imousebehavior);
});
let ydomain = yscale.domain();
plot.selectAll('g.events')
.data([0])
.join('g').attr('class', 'events')
.selectAll('g.event')
.data(events.filter(e => e['start_time'] >= ydomain[0] && e['end_time'] <= ydomain[1]))
.join('g').attr('class', 'event')
.each(function(d){
let ed = new Date(`${d['event_date']} 00:00:00`);
d3.select(this)
.selectAll('rect')
.data([0])
.join('rect')
.attr('x', xscale(ed))
.attr('y', yscale(d['start_time']))
.attr('height', yscale(d['end_time']) - yscale(d['start_time']))
.attr('width', xscale.bandwidth() * 0.8)
.attr('fill', '#666');
})
}
}
dragbehavior = ({xscale, yscale}) => {
function dragOn(e, d){
}
function dragEnd(e, d){
}
return d3.drag()
.on("drag", dragOn)
.on("end", dragEnd);
}
mousebehavior = ({xscale, yscale}) => {
const mstate = d3.local();
function mouseenter(e, d){
//console.log('in mouse enter event');
mstate.set(this, {fill: "#000"});
let bbx = this.getBBox();
d3.select(this)
.attr("fill", "#333")
.selectAll('text')
.data(['+'])
.join('text').attr('alignment-baseline', 'baseline')
.attr('text-anchor', 'end')
.attr('stroke', '#fff')
.attr('x', bbx.x + bbx.width - 10)
.attr('y', bbx.y + bbx.height - 10)
.text(d => d)
}
function mouseout(e, d){
let {fill} = mstate.get(this);
d3.select(this)
.attr("fill", fill)
.selectAll('text')
.remove();
}
return function(sel){
sel
.on("touchmove mousemove", mouseenter)
.on("touchend mouseleave", mouseout)
}
}
onClick = function(e, d) {
}
makeTimeOfDayInterval = (d, step) => {
let format = d3.timeFormat("%I:%M %p")
, minuteoffset = dd => d3.timeMinute.count(d,dd);
return d3.timeMinute.every(step).range(d3.timeDay.floor(d), d3.timeDay.offset(d, 1))
.map(dd => Object.assign({}, {label: format(dd), minute: minuteoffset(dd)}));
}
makeWeek = (d) => {
let start = d3.timeWeek.floor(d)
, end = d3.timeWeek.ceil(d)
console.log([start, end])
return [start, end]
}
width = 1050
height = 720
minCellHeight = 30
events = [{
event_date: '2023-01-09',
start_time: 75,
end_time: 120
}, {
event_date: '2023-01-12',
start_time: 300,
end_time: 345
}, {
event_date: '2023-01-13',
start_time: 615,
end_time: 715
}
]
weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'];
d3 = require("d3@5")
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.
