var width = 800,
height = 500;
var center_width = width / 2,
center_height = height / 2;
var formatTickDate = d3.timeFormat('%x');
var formatHandleDate = d3.timeFormat('%e %b');
var animationStopped = false;
var startDate = new Date(2017, 0, 1);
var endDate = new Date(2018, 0, 1);
var stepTime = 800;
var mute = true;
var playBtn;
var playCode = "▶";
var stopCode = "⏸";
var STATION_INIT_MS = 10;
var ZOOM_DURATION = 750;
var initial_center = [11.6, 55.9];
var projection =
d3.geoMercator()
.scale(6000)
.center(initial_center);
;
var path = d3.geoPath().projection(projection);
var svg = d3.select("#wrapper").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var other_countries_group = g.append("g");
var denmark_group = g.append("g");
var logo = {
"width": 341,
"height": 343,
"margin": 10,
"scale": 0.4,
}
var infobox = {
"width": logo.width * logo.scale + 250,
"height": logo.height * logo.scale + logo.margin * 2,
"text_offset_x": logo.width * logo.scale + logo.margin * 2,
}
var info_group = svg.append("g")
.attr("class", "info_group")
.attr("transform", "translate(-2, " + (height - infobox.height + 2) + ")")
.attr("opacity", 0)
.style("display", "none");
function drawLogo() {
var link = svg.append("a")
.attr("class", "logo")
.attr("href", "https://www.dsrs.dk")
.attr("target", "_blank");
var logo_el = link.append("image")
.attr("xlink:href", "https://projects.haukeluebbers.de/dsrs/dsrs.png")
.attr("x", logo.margin)
.attr("y", height - logo.margin - logo.height * logo.scale)
.attr("height", logo.height * logo.scale)
.attr("width", logo.height * logo.scale);
}
var slider_margin = {right: 40, left: 40},
slider_width = +svg.attr("width") - slider_margin.left - slider_margin.right,
slider_height = +svg.attr("height");
var time_axis = d3.scaleTime()
.domain([startDate, endDate])
.range([0, slider_width])
.clamp(true);
var handle;
var handle_label;
var drawTopoJSON = function(className, objectName, stroke) {
return function(error, data) {
if (error) throw(error);
var target = other_countries_group;
if (className === "denmark") {
target = denmark_group;
}
target.append('path')
.attr('class', 'country ' + className)
.datum(topojson.feature(data, data.objects[objectName]))
.attr('d', path)
.attr('stroke', stroke)
if (className === 'denmark') {
drawStations();
}
};
};
var callData;
var stations;
var info_box;
var stationData = [{
'name': 'Helsingør',
'className': 'hel',
'position': [12.612147, 56.041674],
'url': 'http://dsrs.dk/dsrs-helsingor',
}, {
'name': 'København',
'className': 'kbh',
'position': [12.618775, 55.688998],
'url': 'http://dsrs.dk/dsrs-lynetten',
}, {
'name': 'Lynæs',
'className': 'lyn',
'position': [11.864938, 55.942653],
'url': 'http://dsrs.dk/dsrs-lynas',
}, {
'name': 'Vordingborg',
'className': 'vor',
'position': [11.889508, 54.995355],
'url': 'http://dsrs.dk/dsrs-vordingborg',
}, {
'name': 'Køge',
'className': 'koe',
'position': [12.194541, 55.470542],
'url': 'http://dsrs.dk/dsrs-koege',
}, {
'name': 'Bregnør',
'className': 'bre',
'position': [10.597825, 55.485642],
'url': 'http://dsrs.dk/dsrs-bregnor',
}, {
'name': 'Kerteminde',
'className': 'ker',
'position': [10.665135, 55.451884],
'url': 'http://dsrs.dk/dsrs-kerteminde',
}, {
'name': 'Rudkøbing',
'className': 'rud',
'position': [10.712846, 54.942311],
'url': 'http://dsrs.dk/dsrs-rudkobing',
}, {
'name': 'Årø Havn',
'className': 'aah',
'position': [9.731210, 55.260784],
'url': 'http://dsrs.dk/dsrs-aro-havn',
}]
var drawStations = function() {
g.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("opacity", 0);
stations = g.selectAll("circle")
.data(stationData)
.enter()
.append("circle");
stations
.attr("class", function(d) { return "station ready " + d.className; })
.attr("cx", function(d) { return projection(d.position)[0]; })
.attr("cy", function(d) { return projection(d.position)[1]; })
.attr("r", 5)
.attr("fill", "#f00")
.on("click", zoomIn);
info_box = info_group.append("rect")
.attr("class", "infobox")
.attr("x", 0)
.attr("y", 0)
.attr("height", infobox.height)
.attr("width", infobox.width);
info_text_div = info_group.selectAll("text")
.data(stationData)
.enter()
.append("g")
.attr("class", function(d) { return "station_info " + d.className; })
.style("visibility", "hidden")
.attr("x", infobox.text_offset_x)
.attr("y", 30)
.attr("height", infobox.height)
.attr("width", infobox.width);
info_text_div.append("text")
.attr("y", 30)
.attr("x", infobox.text_offset_x)
.attr("height", 15)
.attr("width", infobox.width)
.text(function (d) { return "Station: " + d.name });
info_text_div.append("a")
.attr("href", function(d) { return d.url })
.attr("target", "_blank")
.append("text")
.attr("y", 50)
.attr("x", infobox.text_offset_x)
.attr("height", 15)
.attr("width", infobox.width)
.text(function (d) { return "Aktioner og Aktivitæter"});
info_group.append("text")
.attr("x", infobox.text_offset_x)
.attr("y", 120)
.text("Frivillig søredning.")
info_group.append("text")
.attr("x", infobox.text_offset_x)
.attr("y", 140)
.text("Støt os og bliv medlem.")
};
var zoomIn = function() {
var target = d3.select(this);
svg.selectAll('.station').style('cursor', 'pointer');
info_group.selectAll('.station_info').style('visibility', 'hidden');
target.style('cursor', 'default');
g.transition()
.duration(ZOOM_DURATION)
.attr(
"transform",
"translate(" + center_width + "," + center_height + ")" +
"scale(2)" +
"translate(" + -target.attr("cx") + "," + -target.attr("cy") + ")"
);
var className = target.datum().className;
info_text = info_group.selectAll(".station_info." + className)
.style("visibility", "visible");
info_group.style("display", "inline")
info_group
.transition()
.duration(ZOOM_DURATION)
.attr("opacity", 0.95);
g.on("click", zoomOut);
d3.event.stopPropagation();
};
var zoomOut = function() {
g.on('click', false);
info_group
.transition()
.duration(ZOOM_DURATION)
.attr("opacity", 0)
.on("end", function(d) { info_group.style("display", "none"); });
svg.selectAll('.station').style('cursor', 'pointer');
g.transition()
.duration(ZOOM_DURATION)
.attr(
"transform",
"translate(" + center_width + "," + center_height + ")" +
"scale(1)" +
"translate(" + -center_width + ", " + -center_height + ")"
);
};
var drawSlider = function() {
var slider = svg.append("g")
.attr("class", "slider")
.attr("transform", "translate(" + slider_margin.left + ", 20)");
slider.append("line")
.attr("class", "track")
.attr("x1", time_axis.range()[0])
.attr("x2", time_axis.range()[1])
.select(function() {
return this.parentNode.appendChild(this.cloneNode(true));
})
.attr("class", "track-inset")
.select(function() {
return this.parentNode.appendChild(this.cloneNode(true));
})
.attr("class", "track-overlay")
.call(d3.drag()
.on("start.interrupt", function() { slider.interrupt(); })
.on("start drag", function() {
moveSlider(time_axis.invert(d3.event.x));
})
.on("end", function() {
if (window.animationStopped) {
animate(callData, true);
}
})
);
handle = slider.insert("circle", ".track-overlay")
.attr("class", "handle")
.attr("r", 2);
handle_label = slider.append('text')
.text(formatHandleDate(startDate))
.attr("text-anchor", "middle")
.attr("transform", "translate(0, 16)")
.attr('class', 'handle_label');
// mute button
svg.append("text")
.style("cursor", "pointer")
.on("click", function() {
window.mute = !window.mute;
if (window.mute) {
d3.select(this).html("🔊");
} else {
d3.select(this).html("🔇")
}
})
.attr("x", time_axis.range()[1] + slider_margin.left + 10)
.attr("y", 20 + 5)
.attr("width", 100).attr("height", 30)
.html("🔊");
// play/pause button
playBtn = svg.append("text")
.style("cursor", "pointer")
.on("click", function() {
if (window.animationStopped) {
window.animationStopped = false;
var currentDate = time_axis.invert(handle.attr("cx"));
if (currentDate >= endDate) {
currentDate = startDate;
}
animate(callData, false);
d3.select(this).html(stopCode);
} else {
window.animationStopped = true;
d3.select(this).html(playCode);
animate(callData, true);
}
})
.attr("x", slider_margin.left - 25)
.attr("y", 20 + 5)
.attr("width", 100).attr("height", 30)
.html(stopCode);
d3.json('https://projects.haukeluebbers.de/dsrs/calls.json',
function(error, callDat) {
window.callData = callDat;
if (error) throw(error);
animate();
},
);
}
function moveSlider(h) {
handle.attr("cx", time_axis(h));
handle_label
.attr("transform", "translate(" + time_axis(h) + ", 16)")
.text(formatHandleDate(h));
}
function animate(callData, static) {
if (window.animationStopped && !static) {
return;
}
g.selectAll("a.static").remove();
var currentDate = time_axis.invert(handle.attr("cx"));
if (currentDate < startDate) {
currentDate = startDate;
}
var nextDate = new Date(currentDate.getTime() + (24 * 60 * 60 * 1000));
if (formatISO(currentDate) in window.callData) {
var todays_calls = window.callData[formatISO(currentDate)];
todays_calls.forEach(function(call, i) {
// number of calls for that station for the day
var stations_daily_calls = todays_calls.filter(function(d) {
return d.station === call.station;
});
var call_position = stations_daily_calls.length - stations_daily_calls.indexOf(call) - 1;
animateCall(call, call_position, static);
});
}
if (nextDate < endDate && !window.animationStopped) {
setTimeout(function() { requestAnimationFrame(function() {
var currentDate = time_axis.invert(handle.attr("cx"));
var nextDate = new Date(currentDate.getTime() + (24 * 60 * 60 * 1000));
moveSlider(nextDate);
animate(callData, false);
}); }, stepTime);
} else {
window.animationStopped = true;
window.playBtn.html(playCode);
}
}
function animateCall(call, stations_daily_call, static) {
console.log(call);
var called_station = g.selectAll(".station." + call.station);
called_station
.attr("stroke-width", 1)
.attr("r", 5)
.transition()
.attr("stroke-width", 5)
.attr("r", 9)
.duration(300)
.transition()
.duration(700)
.attr("r", 5)
.attr("stroke-width", 1);
if (!window.mute) {
beep.play();
}
var y_offset = 15 * (stations_daily_call + 1);
var call_text = g
.append("a")
.classed("static", static)
.attr("href", call.url)
.attr("target", "_blank")
.append("text")
.attr("x", called_station.attr("cx"))
.attr("y", called_station.attr("cy") - y_offset)
.attr("class", "call_text")
.attr("opacity", 0.2)
.attr("text-anchor", "middle")
.text(call.title)
.transition()
.duration(200)
.attr("opacity", 0.95)
if (!static) {
call_text
.transition()
.duration(1500)
.attr("y", called_station.attr("cy") - 50 - y_offset)
.attr("opacity", 0)
.remove();
}
}
function formatISO(input) {
return (
input.getFullYear() + '-' +
('0' + (input.getMonth() + 1)).slice(-2) + '-' +
('0' + input.getDate()).slice(-2)
);
}
var github_url = 'https://raw.githubusercontent.com';
var denmarkMap = github_url + '/ok-dk/dagi/master/topojson/regioner.topojson';
var swedenMap = github_url + '/caspg/datamaps.co/master/public/data/topo/sweden.json';
germanyMap = github_url + '/caspg/datamaps.co/master/public/data/topo/germany.json';
d3.json(swedenMap, drawTopoJSON('sweden', 'sweden', '#222'));
d3.json(germanyMap, drawTopoJSON('germany', 'germany', '#222'));
d3.json(denmarkMap, drawTopoJSON('denmark', 'regioner', '#ddd'));
setTimeout(drawSlider, 500);
setTimeout(drawLogo, 500);
var beep = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=");
!
