dateToString(dateEnd)
createTimeline = function(selection, xGrid, height, category) {
const rectHeight = 20;
const histHeight = 20;
const rectWidth = 10;
const yPosLine = yGrid(0.5 - paddingY + (category === 'control' ? 0.5 : 0));
// Determine the first and list dates in the data set
//var monthExtent = d3.extent(data, function(d) { return d.created_date; });
// Create one bin per day (do i need to use an offset to include the first and last day?)
const thresholds = d3.timeDay.every(1).range(dateStart, dateEnd)
const dependentDates = ['pre', 'post']
.map(step => eventData[category].stepData[step].data.filter(d => d.type === category ? false : true))
.flat().map(d => d.date);
console.log(dependentDates.map(d => dateToString(d)))
const binData = d3.histogram()
.domain([dateStart, dateEnd])
.thresholds(thresholds)
.value(d => d)
(dependentDates);
// Get shifted copies of the dates for a centralized display
const dateStartClone = new Date(dateStart);
dateStartClone.setHours(-12);
const dateEndClone = new Date(dateEnd);
dateEndClone.setHours(12);
const tScale = d3.scaleTime()
.domain([dateStartClone, dateEndClone])
.range([xGrid('pre'), xGrid('post') + xGrid.bandwidth()]);
// Offset to centralize the bars around their date
const centralizeOffset = (tScale.range()[1] - tScale.range()[0]) / (2 * (2 * temporalWindowSize + 1));
const histHeightScale = d3.scaleLinear()
.domain([0, d3.max(binData, d => d.length)]).nice()
.range([yPosLine, yPosLine - histHeight])
const g = selection.append('g').attr('class', 'timeline-g');
g.selectAll('.event-rect')
.data(binData)
.join('rect')
.attr('class', 'event-rect')
.attr('x', d => tScale(d.x0) - centralizeOffset)
.attr('y', d => histHeightScale(d.length))
.attr('width', d => tScale(d.x1) - tScale(d.x0))
.attr('height', d => histHeightScale(0) - histHeightScale(d.length))
.attr('fill', d => fillScale('dependent'));
// Create x-axis function
const xAxis = d3.axisBottom().scale(tScale)
.tickValues([dateStart, dateBase, dateEnd])
.tickSize(0)
.tickFormat(d3.timeFormat("%d %b %Y"));
g.selectAll(`#${category}-x-axis-g`)
.data([0])
.join(
enter => enter.append('g')
.attr('class', `${category}-x-axis-g`)
.call(xAxis)
.attr('transform', `translate(0, ${yPosLine})`)
)
.selectAll("text")
.attr("dy", "2em");
//appendAxisTicks(g, tScale, category);
}
{
const dateStartClone = new Date(dateStart);
dateStartClone.setDate(dateStart.getDate() - 1);
dateStartClone.setHours(24);
return dateStartClone;
}
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.
