// Load the d3-parliament library // Create an svg element to hold the chart // Define the data as an array of objects, one per party // Each object should have an id, a seats property (number or array), and a color var data = [ {id: "Conservative", seats: 365, color: "#0087DC"}, {id: "Labour", seats: 202, color: "#DC241f"}, {id: "SNP", seats: 48, color: "#FDF38E"}, {id: "Liberal Democrat", seats: 11, color: "#FAA61A"}, {id: "DUP", seats: 8, color: "#D46A4C"}, {id: "Sinn Féin", seats: 7, color: "#008800"}, {id: "Plaid Cymru", seats: 4, color: "#008142"}, {id: "SDLP", seats: 2, color: "#99FF66"}, {id: "Green", seats: 1, color: "#6AB023"}, {id: "Alliance", seats: 1, color: "#F6CB2F"}, {id: "Speaker", seats: 1, color: "#FFFFFF"} ]; // Create a parliament chart instance and set some parameters var parliament = d3.parliament() .width(500) // The width of the chart .height(500) // The height of the chart .innerRadiusCoef(0.4) // The coefficient for the inner radius .enter.fromCenter(true) // The animation for entering seats .smallToBig(true) // The order of entering seats .on("click", function(d) { // The event listener for clicking on a seat alert("You clicked on a seat of " + d.party.id); }); // Select the svg element and bind the data to the chart d3.select("#chart") .datum(data) .call(parliament);