mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-11 21:08:36 +03:00
594 lines
14 KiB
JavaScript
594 lines
14 KiB
JavaScript
/*
|
|
TIMELINE
|
|
Displays events over the course of the night
|
|
Allows brushing and selecting periods of time in it
|
|
TODO: is it possible to express this idiomatically as React?
|
|
*/
|
|
import {
|
|
areEqual
|
|
} from '../data/utilities';
|
|
import esLocale from '../data/es-MX.json';
|
|
import copy from '../data/copy.json';
|
|
|
|
export default function(app, ui, methods) {
|
|
d3.timeFormatDefaultLocale(esLocale);
|
|
const formatterWithYear = ui.tools.formatterWithYear;
|
|
const parser = ui.tools.parser;
|
|
const zoomLevels = app.zoomLevels;
|
|
let events = [];
|
|
let categories = [];
|
|
let selected = [];
|
|
let timerange = app.timerange;
|
|
|
|
// Drag behavior
|
|
let dragPos0;
|
|
let transitionDuration = 500;
|
|
|
|
// Dimension of the client
|
|
const WIDTH_CONTROLS = 180;
|
|
const boundingClient = d3.select(`#${ui.dom.timeline}`).node().getBoundingClientRect();
|
|
let WIDTH = boundingClient.width - WIDTH_CONTROLS;
|
|
const HEIGHT = 140;
|
|
const markerRadius = 15;
|
|
// margin
|
|
// NB: is it possible to do this with SCSS?
|
|
// A: Maybe, although we are using it programmatically here for now
|
|
const mg = {
|
|
l: 120
|
|
};
|
|
|
|
/**
|
|
* Create scales
|
|
*/
|
|
const scale = {};
|
|
|
|
scale.x = d3.scaleTime()
|
|
.domain(timerange)
|
|
.range([mg.l, WIDTH]);
|
|
|
|
// calculate group step between categories
|
|
const groupStep = (106 - 30) / categories.length;
|
|
const groupYs = new Array(categories.length);
|
|
groupYs.map((g, i) => {
|
|
return 30 + i * groupStep;
|
|
});
|
|
|
|
scale.y = d3.scaleOrdinal()
|
|
.domain(categories)
|
|
.range(groupYs);
|
|
|
|
/**
|
|
* Initilize SVG elements and groups
|
|
*/
|
|
const dom = {};
|
|
|
|
dom.svg =
|
|
d3.select(`#${ui.dom.timeline}`)
|
|
.append('svg')
|
|
.attr('width', WIDTH)
|
|
.attr('height', HEIGHT);
|
|
|
|
dom.controls =
|
|
d3.select(`#${ui.dom.timeline}`)
|
|
.append('svg')
|
|
.attr('class', 'time-controls')
|
|
.attr('width', WIDTH_CONTROLS)
|
|
.attr('height', HEIGHT);
|
|
|
|
/*
|
|
* Axis group elements
|
|
*/
|
|
|
|
dom.axis = {};
|
|
|
|
dom.axis.x0 = dom.svg.append('g')
|
|
.attr('transform', `translate(0, 25)`)
|
|
.attr('class', 'axis xAxis');
|
|
|
|
dom.axis.x1 = dom.svg.append('g')
|
|
.attr('transform', `translate(0, 105)`)
|
|
.attr('class', 'axis axisHourText');
|
|
|
|
dom.axis.y = dom.svg.append('g')
|
|
.attr('transform', `translate(${WIDTH}, 0)`)
|
|
.attr('class', 'yAxis');
|
|
|
|
dom.axis.boundaries = dom.svg.selectAll('.axisBoundaries')
|
|
.data([0, 1])
|
|
.enter().append('line')
|
|
.attr('class', 'axisBoundaries');
|
|
|
|
dom.axis.label0 = dom.svg.append('text')
|
|
.attr('class', 'timeLabel0 timeLabel');
|
|
|
|
dom.axis.label1 = dom.svg.append('text')
|
|
.attr('class', 'timelabelF timeLabel');
|
|
|
|
/*
|
|
* Plottable elements
|
|
*/
|
|
dom.dataset = dom.svg.append('g');
|
|
dom.events = dom.dataset.append('g');
|
|
|
|
/*
|
|
* Time Controls
|
|
*/
|
|
dom.forward = dom.svg.append('g').attr('class', 'time-controls-inline');
|
|
dom.forward.append('circle');
|
|
dom.forward.append('path');
|
|
|
|
dom.backwards = dom.svg.append('g').attr('class', 'time-controls-inline');
|
|
dom.backwards.append('circle');
|
|
dom.backwards.append('path');
|
|
|
|
dom.playGroup = dom.controls.append('g');
|
|
dom.playGroup.append('circle');
|
|
|
|
dom.play = dom.playGroup.append('g');
|
|
dom.play.append('path');
|
|
|
|
dom.pause = dom.playGroup.append('g').style('opacity', 0);
|
|
dom.pause.append('rect');
|
|
dom.pause.append('rect');
|
|
|
|
dom.zooms = dom.controls.append('g');
|
|
|
|
dom.zooms.selectAll('.zoom-level-button')
|
|
.data(zoomLevels)
|
|
.enter().append('text')
|
|
.attr('class', 'zoom-level-button');
|
|
|
|
/*
|
|
* Initialize axis function and element group
|
|
*/
|
|
const axis = {};
|
|
|
|
axis.x0 =
|
|
d3.axisBottom(scale.x)
|
|
.ticks(10)
|
|
.tickPadding(5)
|
|
.tickSize(80)
|
|
.tickFormat(d3.timeFormat('%d %b'));
|
|
|
|
axis.x1 =
|
|
d3.axisBottom(scale.x)
|
|
.ticks(10)
|
|
.tickPadding(20)
|
|
.tickSize(0)
|
|
.tickFormat(d3.timeFormat('%H:%M'));
|
|
|
|
axis.y =
|
|
d3.axisLeft(scale.y)
|
|
.tickValues([]);
|
|
|
|
/*
|
|
* Setup drag behavior
|
|
*/
|
|
const drag =
|
|
d3.drag()
|
|
.on('start', () => {
|
|
d3.event.sourceEvent.stopPropagation();
|
|
dragPos0 = d3.event.x;
|
|
toggleTransition(false);
|
|
})
|
|
.on('drag', () => {
|
|
const drag0 = scale.x.invert(dragPos0).getTime();
|
|
const dragNow = scale.x.invert(d3.event.x).getTime();
|
|
const timeShift = (drag0 - dragNow) / 1000;
|
|
|
|
const newDomain0 = d3.timeSecond.offset(timerange[0], timeShift);
|
|
const newDomainF = d3.timeSecond.offset(timerange[1], timeShift);
|
|
|
|
scale.x.domain([newDomain0, newDomainF])
|
|
render();
|
|
})
|
|
.on('end', () => {
|
|
toggleTransition(true);
|
|
methods.onUpdateTimerange(scale.x.domain());
|
|
});
|
|
|
|
/*
|
|
* SVG groups for marker
|
|
*/
|
|
|
|
dom.markers = dom.svg.append('g');
|
|
|
|
/**
|
|
* Adapt dimensions when resizing
|
|
*/
|
|
function getCurrentWidth() {
|
|
return d3.select(`#${ui.dom.timeline}`).node()
|
|
.getBoundingClientRect().width;
|
|
}
|
|
|
|
/**
|
|
* Resize timeline one window resice
|
|
*/
|
|
function addResizeListener() {
|
|
window.addEventListener('resize', () => {
|
|
if (d3.select(`#${ui.dom.timeline}`).node() !== null) {
|
|
WIDTH = getCurrentWidth() - WIDTH_CONTROLS;
|
|
|
|
dom.svg.attr('width', WIDTH);
|
|
scale.x.range([mg.l, WIDTH]);
|
|
axis.y.tickSize(WIDTH - mg.l);
|
|
dom.axis.y.attr('transform', `translate(${WIDTH}, 0)`)
|
|
render(null);
|
|
}
|
|
});
|
|
}
|
|
addResizeListener();
|
|
|
|
/**
|
|
* PLAY FUNCTIONALITY
|
|
*/
|
|
function stopBrushTransition() {
|
|
clearInterval(window.playInterval);
|
|
isPlaying = false;
|
|
dom.play.style('opacity', 1);
|
|
dom.pause.style('opacity', 0);
|
|
}
|
|
|
|
/**
|
|
* START PLAY SERIES OF TRANSITIONS
|
|
*/
|
|
function playBrushTransition() {
|
|
isPlaying = true;
|
|
dom.play.style('opacity', 0);
|
|
dom.pause.style('opacity', 1);
|
|
window.playInterval = setInterval(() => {
|
|
moveTime('forward');
|
|
}, playDuration);
|
|
}
|
|
|
|
/**
|
|
* Return which color event circle should be based on incident type
|
|
* @param {object} eventPoint data object
|
|
*/
|
|
function getEventPointFillColor(eventPoint) {
|
|
return methods.getCategoryColor(eventPoint.category);
|
|
}
|
|
|
|
/**
|
|
* Given an event, get all the filtered events that happen simultaneously
|
|
* @param {object} eventPoint: regular eventPoint data
|
|
*/
|
|
function getAllEventsAtOnce(eventPoint) {
|
|
const timestamp = eventPoint.timestamp;
|
|
const category = eventPoint.category;
|
|
return events
|
|
.filter(event => (event.timestamp === timestamp && category === event.category))
|
|
}
|
|
|
|
/*
|
|
* Get y height of eventPoint, considering the ordinal Y scale
|
|
* @param {object} eventPoint: regular eventPoint data
|
|
*/
|
|
function getEventY(eventPoint) {
|
|
const yGroup = eventPoint.category;
|
|
return scale.y(yGroup);
|
|
}
|
|
|
|
/*
|
|
* Get x position of eventPoint, considering the time scale
|
|
* @param {object} eventPoint: regular eventPoint data
|
|
*/
|
|
function getEventX(eventPoint) {
|
|
return scale.x(parser(eventPoint.timestamp));
|
|
}
|
|
|
|
function getTimeScaleExtent() {
|
|
return (scale.x.domain()[1].getTime() - scale.x.domain()[0].getTime()) / 60000;
|
|
}
|
|
|
|
/*
|
|
* Given a number of minutes, calculate the width based on current scale.x
|
|
* @param {number} minutes: number of minutes
|
|
*/
|
|
function getWidthOfTime(minutes) {
|
|
const allMins = getTimeScaleExtent();
|
|
return (minutes * WIDTH) / allMins;
|
|
}
|
|
|
|
function highlightZoomLevel(zoom) {
|
|
zoomLevels.forEach((level) => {
|
|
if (level.label === zoom.label) {
|
|
level.active = true;
|
|
} else {
|
|
level.active = false;
|
|
}
|
|
});
|
|
|
|
dom.zooms.selectAll('text')
|
|
.classed('active', level => level.active);
|
|
}
|
|
|
|
/**
|
|
* Apply zoom level to timeline
|
|
* @param {object} zoom: zoom level from zoomLevels
|
|
*/
|
|
function applyZoom(zoom) {
|
|
highlightZoomLevel(zoom);
|
|
|
|
const extent = getTimeScaleExtent();
|
|
const newCentralTime = d3.timeMinute.offset(scale.x.domain()[0], extent / 2);
|
|
|
|
const domain0 = d3.timeMinute.offset(newCentralTime, -zoom.duration / 2);
|
|
const domainF = d3.timeMinute.offset(newCentralTime, zoom.duration / 2);
|
|
|
|
scale.x.domain([domain0, domainF]);
|
|
methods.onUpdateTimerange(scale.x.domain());
|
|
}
|
|
|
|
/**
|
|
* Shift time range by moving forward or backwards
|
|
* @param {String} direction: 'forward' / 'backwards'
|
|
*/
|
|
function moveTime(direction) {
|
|
methods.select();
|
|
const extent = getTimeScaleExtent();
|
|
const newCentralTime = d3.timeMinute.offset(scale.x.domain()[0], extent / 2);
|
|
|
|
// if forward
|
|
let domain0 = newCentralTime;
|
|
let domainF = d3.timeMinute.offset(newCentralTime, extent);
|
|
|
|
// if backwards
|
|
if (direction === 'backwards') {
|
|
domain0 = d3.timeMinute.offset(newCentralTime, -extent);
|
|
domainF = newCentralTime;
|
|
}
|
|
|
|
scale.x.domain([domain0, domainF]);
|
|
methods.onUpdateTimerange(scale.x.domain());
|
|
}
|
|
|
|
function toggleTransition(isTransition) {
|
|
transitionDuration = (isTransition) ? 500 : 0;
|
|
}
|
|
|
|
/**
|
|
* Highlight event circle on hover
|
|
*/
|
|
function handleMouseOver() {
|
|
d3.select(this)
|
|
.attr('r', 7)
|
|
.classed('mouseover', true);
|
|
}
|
|
|
|
/**
|
|
* Unhighlight event when mouse out
|
|
*/
|
|
function handleMouseOut() {
|
|
d3.select(this)
|
|
.attr('r', 5)
|
|
.classed('mouseover', false);
|
|
}
|
|
|
|
/**
|
|
* It automatically sets brush timeline to a domain set by the params
|
|
*/
|
|
function updateTimeRange() {
|
|
scale.x.domain(timerange);
|
|
axis.x0.scale(scale.x);
|
|
axis.x1.scale(scale.x);
|
|
}
|
|
|
|
|
|
/**
|
|
* Display the current time range in the time label above the timeline
|
|
*/
|
|
function renderTimeLabels() {
|
|
dom.axis.label0
|
|
.attr('x', 5)
|
|
.attr('y', 15)
|
|
.text(formatterWithYear(timerange[0]));
|
|
|
|
dom.axis.label1
|
|
.attr('x', WIDTH - 5)
|
|
.attr('y', 15)
|
|
.text(formatterWithYear(timerange[1]))
|
|
.style('text-anchor', 'end');
|
|
}
|
|
|
|
/**
|
|
* Makes a circular rinig mark in one particular location at a time
|
|
* @param {object} eventPoint: object with eventPoint data (time, loc, tags)
|
|
*/
|
|
function renderHighlight() {
|
|
const markers = dom.markers
|
|
.selectAll('circle')
|
|
.data(selected);
|
|
|
|
markers
|
|
.enter()
|
|
.append('circle')
|
|
.attr('class', 'timeline-marker')
|
|
.merge(markers)
|
|
.attr('cy', eventPoint => getEventY(eventPoint))
|
|
.attr('cx', eventPoint => getEventX(eventPoint))
|
|
.attr('r', 10)
|
|
.style('opacity', .9);
|
|
|
|
markers.exit().remove();
|
|
}
|
|
|
|
/**
|
|
* Return event circles of different groups
|
|
*/
|
|
function renderEvents() {
|
|
const eventsDom = dom.events
|
|
.selectAll('.event')
|
|
.data(events, d => d.id);
|
|
|
|
eventsDom
|
|
.exit()
|
|
.remove();
|
|
|
|
eventsDom
|
|
.transition()
|
|
.duration(transitionDuration)
|
|
.attr('cx', eventPoint => getEventX(eventPoint));
|
|
|
|
eventsDom
|
|
.enter()
|
|
.append('circle')
|
|
.attr('class', 'event')
|
|
.attr('cx', eventPoint => getEventX(eventPoint))
|
|
.attr('cy', eventPoint => getEventY(eventPoint))
|
|
.style('fill', eventPoint => getEventPointFillColor(eventPoint))
|
|
.on('click', eventPoint => {
|
|
return methods.select(getAllEventsAtOnce(eventPoint))
|
|
})
|
|
.on('mouseover', handleMouseOver)
|
|
.on('mouseout', handleMouseOut)
|
|
.transition()
|
|
.delay(300)
|
|
.duration(200)
|
|
.attr('r', 5);
|
|
}
|
|
|
|
/**
|
|
* Render axis on timeline and viewbox boundaries
|
|
*/
|
|
function renderAxis() {
|
|
dom.axis.x0
|
|
.call(drag);
|
|
|
|
dom.axis.x1
|
|
.call(drag);
|
|
|
|
dom.axis.x0
|
|
.transition()
|
|
.duration(transitionDuration)
|
|
.call(axis.x0);
|
|
|
|
dom.axis.x1
|
|
.transition()
|
|
.duration(transitionDuration)
|
|
.call(axis.x1);
|
|
|
|
axis.y.tickSize(WIDTH - mg.l);
|
|
|
|
dom.axis.y
|
|
.call(axis.y)
|
|
.call(drag);
|
|
|
|
dom.axis.boundaries
|
|
.attr('x1', (d, i) => scale.x.range()[i])
|
|
.attr('x2', (d, i) => scale.x.range()[i])
|
|
.attr('y1', 10)
|
|
.attr('y2', 20);
|
|
|
|
dom.axis.label1
|
|
.attr('x', scale.x.range()[1] - 5);
|
|
}
|
|
|
|
/**
|
|
* Render left and right time shifting controls
|
|
*/
|
|
function renderTimeControls() {
|
|
const zoomLabels = copy[app.language].timeline.zooms;
|
|
zoomLevels.forEach((level, i) => {
|
|
level.label = zoomLabels[i];
|
|
});
|
|
|
|
// These controls on timeline svg
|
|
dom.backwards.select('circle')
|
|
.attr('transform', `translate(${scale.x.range()[0] + 20}, 62)`)
|
|
.attr('r', 15);
|
|
|
|
dom.backwards.select('path')
|
|
.attr('d', d3.symbol().type(d3.symbolTriangle).size(80))
|
|
.attr('transform', `translate(${scale.x.range()[0] + 20}, 62)rotate(270)`);
|
|
|
|
dom.forward.select('circle')
|
|
.attr('transform', `translate(${scale.x.range()[1] - 20}, 62)`)
|
|
.attr('r', 15);
|
|
|
|
dom.forward.select('path')
|
|
.attr('d', d3.symbol().type(d3.symbolTriangle).size(80))
|
|
.attr('transform', `translate(${scale.x.range()[1] - 20}, 62)rotate(90)`);
|
|
|
|
// These controls on separate svg
|
|
dom.playGroup.select('circle')
|
|
.attr('transform', 'translate(135, 60)rotate(90)')
|
|
.attr('r', 25);
|
|
|
|
dom.play.select('path')
|
|
.attr('d', d3.symbol().type(d3.symbolTriangle).size(260))
|
|
.attr('transform', 'translate(135, 60)rotate(90)');
|
|
|
|
dom.pause.selectAll('rect')
|
|
.attr('transform', (d, i) => `translate(${125 + (i * 15)}, 47)`)
|
|
.attr('height', 25)
|
|
.attr('width', 5);
|
|
|
|
dom.zooms.selectAll('text')
|
|
.text(d => d.label)
|
|
.attr('x', 60)
|
|
.attr('y', (d, i) => (i * 15) + 20)
|
|
.classed('active', level => level.active);
|
|
|
|
dom.forward
|
|
.on('click', () => moveTime('forward'));
|
|
|
|
dom.backwards
|
|
.on('click', () => moveTime('backwards'));
|
|
|
|
dom.playGroup
|
|
.on('click', () => {
|
|
return (isPlaying) ? stopBrushTransition() : playBrushTransition();
|
|
});
|
|
|
|
dom.zooms.selectAll('text')
|
|
.on('click', zoom => applyZoom(zoom));
|
|
}
|
|
|
|
/**
|
|
* Updates data displayed by this timeline, but only render if necessary
|
|
* @param {Object} domain: Redux state domain subtree
|
|
* @param {Object} app: Redux state app subtree
|
|
*/
|
|
function updateAxis(domain) {
|
|
const categories = domain.categories
|
|
const groupStep = (106 - 30) / categories.length;
|
|
let groupYs = Array.apply(null, Array(categories.length));
|
|
groupYs = groupYs.map((g, i) => {
|
|
return 30 + i * groupStep;
|
|
});
|
|
|
|
scale.y = d3.scaleOrdinal()
|
|
.domain(categories)
|
|
.range(groupYs);
|
|
|
|
axis.y =
|
|
d3.axisLeft(scale.y)
|
|
.tickValues(categories);
|
|
}
|
|
|
|
function update(domain, app) {
|
|
updateAxis(domain);
|
|
renderAxis();
|
|
|
|
events = domain.events;
|
|
timerange = app.timerange;
|
|
selected = app.selected.slice(0);
|
|
updateTimeRange();
|
|
}
|
|
|
|
function render() {
|
|
renderAxis();
|
|
renderTimeControls();
|
|
renderTimeLabels();
|
|
|
|
renderEvents();
|
|
renderHighlight();
|
|
}
|
|
|
|
return {
|
|
update,
|
|
render,
|
|
};
|
|
}
|