You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
4.4 KiB
117 lines
4.4 KiB
(function() {
|
|
function loadMap() {
|
|
var projection = d3.geo.mercator();
|
|
var path = d3.geo.path().projection(projection);
|
|
var tooltip = document.getElementById('tooltip');
|
|
|
|
var initialScale = 3.5;
|
|
var initialPosition = [-100, -175];
|
|
|
|
var zoom = d3.behavior.zoom()
|
|
.scaleExtent([1, 20])
|
|
.scale(initialScale).translate(initialPosition)
|
|
.on("zoom", function() {
|
|
setZoom(d3.event.translate, d3.event.scale);
|
|
});
|
|
|
|
function setZoom(translate, scale) {
|
|
container.attr("transform", "translate(" + translate + ") scale(" + scale + ")").attr('data-scale', scale);
|
|
}
|
|
|
|
var container = d3.select('#map').call(zoom).insert('g', ':first-child').attr('class', 'map');
|
|
|
|
setZoom(initialPosition, initialScale);
|
|
|
|
container.append("path")
|
|
.datum(d3.geo.graticule())
|
|
.attr("class", "graticule")
|
|
.attr("d", path);
|
|
|
|
d3.selection.prototype.moveToFront = function() {
|
|
return this.each(function(){
|
|
this.parentNode.appendChild(this);
|
|
});
|
|
};
|
|
|
|
d3.json('/assets/world-110m.json', function(error, world) {
|
|
if (error) {
|
|
throw error;
|
|
}
|
|
|
|
container.selectAll('path')
|
|
.data(topojson.feature(world, world.objects.countries).features)
|
|
.enter()
|
|
.append('path')
|
|
.attr('d', path)
|
|
.attr('class', 'country');
|
|
|
|
var year = (new Date()).getFullYear();
|
|
var conferences = document.querySelectorAll('#conferences .conference');
|
|
var conference_path = []
|
|
|
|
for (var i = 0; i < conferences.length; i++) {
|
|
var d = conferences[i];
|
|
if (d.getAttribute('data-t') === 'annual') {
|
|
var coords = projection([d.getAttribute('data-o'), d.getAttribute('data-a')]);
|
|
if (conference_path.length) {
|
|
conference_path[conference_path.length - 1].x2 = coords[0];
|
|
conference_path[conference_path.length - 1].y2 = coords[1];
|
|
}
|
|
conference_path.push({
|
|
x1: coords[0],
|
|
y1: coords[1]
|
|
});
|
|
}
|
|
}
|
|
|
|
container.append('defs').html('<filter id="svg-gooey-filter"><feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"></feGaussianBlur><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="svg-gooey-filter"></feColorMatrix><feComposite in="SourceGraphic" in2="svg-gooey-filter" operator="atop"></feComposite></filter>')
|
|
|
|
var regionalConferences = container.append('g').attr('filter', 'url(#svg-gooey-filter)').attr('class', 'cities regional-conferences');
|
|
var annualConferences = container.append('g').attr('filter', 'url(#svg-gooey-filter)').attr('class', 'cities annual-conferences');
|
|
|
|
function mouseover(e) {
|
|
c = document.getElementById('conference-' + d3.event.target.getAttribute('data-c'));
|
|
tooltip.innerHTML = '<h3>' + c.querySelector('.title').innerHTML + '</h3>' +
|
|
'<div class="conference-details">' + c.querySelector('.conference-details').innerHTML + '</div>';
|
|
tooltip.className = 'open';
|
|
}
|
|
|
|
function mouseout(e) {
|
|
tooltip.className = '';
|
|
}
|
|
|
|
function click(e) {
|
|
l = document.querySelector('#conference-' + d3.event.target.getAttribute('data-c') + ' .conference-link');
|
|
window.location.href = l.getAttribute('href');
|
|
}
|
|
|
|
for (var i = conferences.length - 1; i >= 0; i--) {
|
|
var c = conferences[i];
|
|
var type = c.getAttribute('data-t');
|
|
var coords = projection([c.getAttribute('data-o'), c.getAttribute('data-a')]);
|
|
|
|
(type === 'annual' ? annualConferences : regionalConferences)
|
|
.append('circle')
|
|
.attr('class', 'city type-' + type)
|
|
.attr('data-c', c.id.replace(/^conference\-/, ''))
|
|
.attr('cx', function(d) { return coords[0]; })
|
|
.attr('cy', function(d) { return coords[1]; })
|
|
.attr('r', Math.max(3,
|
|
(15 - (
|
|
(year - parseInt(c.getAttribute('data-y'))) * 2.5)) * 1.125)
|
|
)
|
|
.on('mouseover', mouseover)
|
|
.on('mouseout', mouseout)
|
|
.on('click', click);
|
|
}
|
|
});
|
|
|
|
d3.select("#map").attr('class', 'loaded');
|
|
}
|
|
|
|
document.onreadystatechange = function () {
|
|
if (document.readyState == 'complete') {
|
|
loadMap();
|
|
}
|
|
};
|
|
})();
|
|
|