|
function ready(geo, userData) { |
|
/** |
|
* Build legend. |
|
* @param {Object} legendKey Selection to mount legend on. |
|
* @param {number} max Value maximum. |
|
* @param {function} scale Colour scale. |
|
* @param {string} legendText Legend title. |
|
* @return {undefined} DOM side effects. |
|
*/ |
|
function buildKey(legendKey, max, scale, legendText) { |
|
const x = d3.scaleLinear() |
|
.domain([1, max]) |
|
.range([0, 120]); |
|
|
|
const xAxis = d3.axisBottom(x) |
|
.tickSize(13) |
|
.tickValues(scale.domain()); |
|
|
|
const g = legendKey.call(xAxis); |
|
|
|
g.select('.domain').remove(); |
|
|
|
const data = scale.range().map(color => { |
|
const d = scale.invertExtent(color); |
|
if (d[0] == null) d[0] = x.domain()[0]; |
|
if (d[1] == null) d[1] = x.domain()[1]; |
|
return d; |
|
}); |
|
|
|
g.selectAll('rect') |
|
.data( |
|
scale.range().map(color => { |
|
const d = scale.invertExtent(color); |
|
if (d[0] == null) d[0] = x.domain()[0]; |
|
if (d[1] == null) d[1] = x.domain()[1]; |
|
return d; |
|
}) |
|
) |
|
.enter() |
|
.insert('rect', '.tick') |
|
.attr('height', 8) |
|
.attr('x', d => x(d[0])) |
|
.attr('width', d => x(d[1]) - x(d[0])) |
|
.attr('fill', d => scale(d[0])); |
|
|
|
g.append('text') |
|
.attr('fill', '#000') |
|
.attr('font-weight', 'bold') |
|
.attr('text-anchor', 'start') |
|
.attr('y', -6) |
|
.text(legendText); |
|
} |
|
|
|
// Set up SVG. |
|
const margin = { top: 30, right: 30, bottom: 30, left: 30 }, |
|
width = 900 - margin.left - margin.right, |
|
height = 500 - margin.top - margin.bottom; |
|
|
|
const svg = d3.select('#container') |
|
.append('svg') |
|
.attr('width', width + margin.left + margin.top) |
|
.attr('height', height + margin.top + margin.bottom) |
|
.append('g') |
|
.attr('transform', `translate(${margin.left} ${margin.top})`); |
|
|
|
// Projection and path. |
|
const projection = d3.geoConicEqualArea() |
|
.fitSize([width, height], geo) |
|
.parallels([36, 66]); |
|
const geoPath = d3.geoPath().projection(projection); |
|
|
|
// Prep user data. |
|
userData.forEach(site => { |
|
const coords = projection([+site.lng, +site.lat]); |
|
site.x = coords[0]; |
|
site.y = coords[1]; |
|
}); |
|
|
|
// Confine the global points to Europe. |
|
const poly = d3.geoPolygon(geo, projection); |
|
userData = d3.polygonPoints(userData, poly); |
|
|
|
// Set up clip paths. |
|
svg |
|
.append('defs') |
|
.append('clipPath') |
|
.attr('id', 'clip-it') |
|
.append('path') |
|
.attr('d', geoPath(geo)); |
|
|
|
svg |
|
.append('g') |
|
.attr('id', 'world') |
|
.append('path') |
|
.attr('d', geoPath(geo)) |
|
.attr('stroke', '#000') |
|
.attr('fill', 'none'); |
|
|
|
// Hexgrid generator. |
|
const hexgrid = d3.hexgrid() |
|
.extent([width, height]) |
|
.geography(geo) |
|
.projection(projection) |
|
.pathGenerator(geoPath) |
|
.hexRadius(7) |
|
.edgePrecision(1) |
|
.gridExtend(2) |
|
.geoKeys(['lng', 'lat']); |
|
|
|
// Hexgrid instance. |
|
const hex = hexgrid(userData); |
|
|
|
// Calculate Ckmeans based colour scale. |
|
const counts = hex.grid.layout |
|
.map(el => el.datapointsWt) |
|
.filter(el => el > 0); |
|
const ckBreaks = ss.ckmeans(counts, 4).map(clusters => clusters[0]); |
|
const colourScale = d3 |
|
.scaleThreshold() |
|
.domain(ckBreaks) |
|
.range(['#fff', '#e7e7e7', '#aaa', '#777', '#555']); |
|
|
|
// Clip. |
|
const gHex = svg |
|
.append('g') |
|
.attr('id', 'hexes') |
|
.attr('clip-path', 'url(#clip-it)'); |
|
|
|
// Draw. |
|
gHex |
|
.selectAll('.hex') |
|
.data(hex.grid.layout) |
|
.enter() |
|
.append('path') |
|
.attr('class', 'hex') |
|
.attr('transform', d => `translate(${d.x}, ${d.y})`) |
|
.attr('d', hex.hexagon()) |
|
.style('fill', d => colourScale(d.datapointsWt)) |
|
.style('stroke', '#999') |
|
.style('stroke-opacity', 0.4); |
|
|
|
// Build and mount legend. |
|
const legendKey = svg |
|
.append('g') |
|
.attr('class', 'legend') |
|
.attr('transform', `translate(${width - 120}, ${height})`) |
|
.call( |
|
buildKey, |
|
hex.grid.extentPointsWeighted[1], |
|
colourScale, |
|
'Number of disputes' |
|
); |
|
} |
|
|
|
// Data load. |
|
const geoData = d3.json( |
|
'https://raw.githubusercontent.com/larsvers/map-store/master/europe_geo.json' |
|
); |
|
const points = d3.csv( |
|
'https://raw.githubusercontent.com/larsvers/data-store/master/military_disputes_world.csv' |
|
); |
|
|
|
Promise.all([geoData, points]).then(res => { |
|
let [geoData, userData] = res; |
|
ready(geoData, userData); |
|
}); |
