Re-usable UK election map visualisation, compatible with D3 and Raphaël.
Original: Proportional election maps, without Flash
Demos: D3 electionmap, Raphaël electionmap
var svg = d3.select('#frame').append('svg').attr('width', 330).attr('height', 430);
var map = UK.ElectionMap();
map(svg);
var frame = Raphael('frame', 330, 430);
var map = UK.ElectionMap();
map(frame);
Use the fill setter to specify the fill function. The first argument to the fill function is the name of the constituency. For example:
map.fill(function (constituency) {
// return colour representing political party for this constituency
});
Use the stroke setter to specify the stroke colour, which defaults to
#AAAAAA
. For example:
map.stroke('#333');
Use the origin setter to control the position of the map, passing an
object with x
and y
properties. By default the map is positioned in the
bottom left corner of its parent. Counter-intuitively, the origin specifies
the coordinates of the top left corner of the hexagonal tile that represents
the St. Ives constituency. For example:
map.origin({x: 55, y: 395});
Use the edgeLength setter to specify the length of the hexagonal tiles (defaults to 5 pixels). For example:
javascript
map.edgeLength(3);
All options/setters exist for both D3 and Raphaël.