// Load the d3-parliament library
<script src="d3-parliament.js"></script>

// Create an svg element to hold the chart
<svg id="chart" width="500" height="500"></svg>

// 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);
