|
<!DOCTYPE html> |
|
<meta charset='utf-8'> |
|
<style> |
|
body { |
|
/*text-align: center;*/ |
|
} |
|
svg { |
|
font: 12px sans-serif; |
|
background: #ddd; |
|
pointer-events: all; |
|
} |
|
.heading text { |
|
font: 16px sans-serif; |
|
} |
|
.tick line { |
|
stroke: black; |
|
fill: none; |
|
stroke-width: .5; |
|
} |
|
.domain { |
|
stroke: none; |
|
fill: none; |
|
} |
|
</style> |
|
<body> |
|
<script src="//d3js.org/d3.v3.min.js"></script> |
|
<script src="d3.hexbin.min.js"></script> |
|
<script> |
|
|
|
var parties = [ |
|
{ x:-180, y: 255, id: '1' }, // xS - Samfylking |
|
{ x:-220, y: -55, id: '2' }, // xF - |
|
{ x: 290, y: -73, id: '3' }, // xD - Sjálfstæðisfl. |
|
{ x:-263, y: 5, id: '4' }, // x? - Húmanistar |
|
{ x: 16, y: 295, id: '5' }, // xA - Björt Framtíð |
|
{ x:-223, y: 5, id: '6' }, // x? - Dögun |
|
{ x: 55, y:-310, id: '7' }, // x? - Þjóðfylkingin |
|
{ x:-312, y: -20, id: '8' }, // x? - Alþýðufylkingin |
|
{ x: -73, y: 150, id: '9' }, // xÞ - Píratapartíið |
|
{ x:-290, y: 75, id: '10' }, // xV - VG |
|
{ x: -56, y:-185, id: '11' }, // xB - Framsókn |
|
{ x: 127, y: 237, id: '12' }, // xC - Viðreisn |
|
]; |
|
|
|
var margin = { top: 60, right: 60, bottom: 60, left: 60 }, |
|
html = document.documentElement, |
|
sqsize = Math.min( html.clientWidth, html.clientHeight ), |
|
width = sqsize - margin.left - margin.right, |
|
height = sqsize - margin.top - margin.bottom, |
|
y = d3.scale.linear().range([ height - 10, 10 ]), |
|
x = d3.scale.linear().range([ 10, width - 10 ]); |
|
|
|
var axis_placement = { |
|
top: { a: 'y2', t: [1, 0, 0], m: [0, -1], p: [0, 0] }, |
|
left: { a: 'x2', t: [0, 1, -90], m: [-1, 0], p: [0, 0] }, |
|
right: { a: 'x2', t: [0, 1, 90], m: [1, 0], p: [1, 0] }, |
|
bottom: { a: 'y2', t: [1, 0, 0], m: [0, 1], p: [0, 1] }, |
|
}; |
|
|
|
function addAxis ( root, scale, orient, labels, title ) { |
|
var or = axis_placement[orient], |
|
flip = orient.length > 4 ? -1 : 1; |
|
|
|
var svgAxis = d3.svg.axis() |
|
.scale(scale) |
|
.orient(orient).tickSize(2) |
|
.tickFormat(labels ? String : '' ); |
|
|
|
var axg = svg.append('g') |
|
.attr('class', `x axis ${orient}`) |
|
.attr('transform', `translate(${[ or.p[0] * width, or.p[1] * height ]})`) |
|
.call(svgAxis); |
|
axg.selectAll('.tick line').attr(or.a, flip * 8); |
|
if (title) { |
|
axg.append('text') |
|
.attr('transform', `translate(${[ (or.t[0] * width / 2) + ((~~labels * 48) || 12) * or.m[0], |
|
(or.t[1] * height / 2) + ((~~labels * 28) || 12) * or.m[1] ]}) rotate(${ or.t[2] })`) |
|
.attr('text-anchor', 'middle') |
|
.attr('dy', '.4em') |
|
.text(title); |
|
} |
|
} |
|
|
|
var svg = d3.select('body').append('svg') |
|
.attr('width', width + margin.left + margin.right) |
|
.attr('height', height + margin.top + margin.bottom) |
|
.append('g') |
|
.attr('transform', `translate(${[ margin.left, margin.top ]})`); |
|
|
|
svg.append('rect') |
|
.attr('class', 'frame') |
|
.attr('width', width) |
|
.attr('height', height) |
|
.style({ 'stroke': 'black', 'fill': 'white' }); |
|
|
|
svg.append('g') |
|
.attr('class', 'heading') |
|
.attr('transform', `translate(${[ width/2, -margin.top/2 + 5 ]})`) |
|
.append('text') |
|
.attr('text-anchor', 'middle') |
|
.text('Hexbin heatmap of a political compass result data'); |
|
|
|
y.domain([ -350, 350 ]); |
|
x.domain([ -350, 350 ]); |
|
|
|
addAxis( svg, x, 'bottom', true, '← Socialism –vs– Capitalism →' ); |
|
addAxis( svg, x, 'top', false ); |
|
addAxis( svg, y, 'left', true, '← Nationalism –vs– Internationalism →' ); |
|
addAxis( svg, y, 'right', false ); |
|
|
|
|
|
d3.csv('kosningaviti-15102016.csv', (r => [+r.x, +r.y]), data => { |
|
|
|
var hexbin = d3.hexbin() |
|
.x(d => x(d[0])) |
|
.y(d => y(d[1])) |
|
.radius(width*0.035); |
|
|
|
var color = d3.scale.linear() |
|
.domain([0, 750]) |
|
.range(['white', 'steelblue']) |
|
.interpolate(d3.interpolateLab); |
|
|
|
svg.append("g") |
|
.selectAll(".hexagon") |
|
.data(hexbin(data)) |
|
.enter().append("path") |
|
.attr("class", "hexagon") |
|
.attr("d", hexbin.hexagon()) |
|
.attr("transform", d => "translate("+[d.x, d.y]+")") |
|
.style("fill", d => color(d.length)); |
|
|
|
var z = ~~(width*0.05); |
|
svg.selectAll(".logo") |
|
.data(parties) |
|
.enter().append("image") |
|
.attr('class', 'logo') |
|
.attr('xlink:href', d => `${d.id}.png`) |
|
.attr("x", d => x(d.x) - (z/2)) |
|
.attr("y", d => y(d.y) - (z/2)) |
|
.attr("width", z) |
|
.attr("height", z); |
|
|
|
}); |
|
</script> |