Re-usable UK election map visualisation
JavaScript Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
original
src
README.md
Rakefile.rb
uk.electionmap.d3.js
uk.electionmap.d3.min.js
uk.electionmap.raphael.js
uk.electionmap.raphael.min.js

README.md

electionmap

Re-usable UK election map visualisation, compatible with D3 and Raphaël.

Original: Proportional election maps, without Flash

Demos: D3 electionmap, Raphaël electionmap

D3 quick start

var svg = d3.select('#frame').append('svg').attr('width', 330).attr('height', 430);

var map = UK.ElectionMap();

map(svg);

Raphaël quick start

var frame = Raphael('frame', 330, 430);

var map = UK.ElectionMap();

map(frame);

Options

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.