A parliament chart based on D3js
bower install d3-parliament
/* set up the parliament */
var parliament = d3.parliament();
parliament.width(500).height(500).innerRadiusCoef(0.4);
parliament.enter.fromCenter(true).smallToBig(true);
parliament.exit.toCenter(false).bigToSmall(true);
/* register event listeners */
parliament.on("click", function(d) { alert("You clicked on a seat of " + d.party.name); });
parliament.on("mouseover", function(d) { console.log("mouse on " + d.party.name); });
parliament.on("mouseout", function(d) { console.log("mouse out of " + d.party.name); });
/* add the parliament to the page */
d3.json("data.json", function(d) {
d3.select("svg").datum(d).call(parliament);
});
You can set up the parameters of the parliament passing the values through the function named as the parameter (see the example):
All the mouse and touch events that can be thrown on the circles that will represent the seats are available : click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, touchcancel, touchend, touchmove, touchstart
You can register event listeners calling on. The first parameter given to the event listener is an object containing the following fields:
The data given to datum before calling parliament (see example) should be an array of objects, one object per party in the parliament. These objects should contain the fields:
Then, you can add more data if you want to retrieve them in your event listeners.
MIT License