<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body class="bg-info col-12">
  <header class="header">
    <div class="container col-12">
      <h3 class="font-weight-light text-light title"></h3>
    </div>
  </header>
  <div class="bg-white py-12">
    <select id="selector">
      <option value="expat">UK Expats</option>      
      <option value="patriots">UK Based Citizens</option>
    </select>
  </div>
  <div class="bg-white py-12">
    <div id="chart"></div>
  </div>
  <script
    src="http://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</body>

</html>
body {
  background-color: #a3d5d3;
}
const petitionUrl = "https://petition.parliament.uk/petitions/241584.json"

const getPetitionData = () => {
	fetch(petitionUrl, {
		method: 'GET'
	})
	.then(response => response.json())
	.then(response => {
		if ($("#selector").val() === "expat") {
			loadChartData(response.data.attributes.signatures_by_country, response.data.attributes.signature_count)
		} else if ($("#selector").val() === "patriots") {
			loadChartData(response.data.attributes.signatures_by_constituency, response.data.attributes.signature_count)
		}
	})
}

const loadChartData = (petitionData, total_signatures) => {
	let signatures = [];
	let countries = [];
	
	petitionData.forEach( (e) => {
		if (e.name !== "United Kingdom") {
			countries.push(e.name)
			signatures.push(e.signature_count)
		}
	})

	const reducer = (accumulator, currentValue) => accumulator + currentValue;
	if ($("#selector").val() === "expat") {
		$('.title').html(`Revoke Article 50 British Expats By Country: ${signatures.reduce(reducer)}. Total Signatures: ${total_signatures}`)
	} else if ($("#selector").val() === "patriots") {
		$('.title').html(`Revoke Article 50 UK Based Citizens: ${signatures.reduce(reducer)}. Total Signatures: ${total_signatures}`)
	}
	let data = [{
	  values: signatures,
	  labels: countries,
	  textposition: 'inside',
	  type: 'pie'
	}];

	let layout = {
	  height: 1150,
	  width: 1200,
	  legend: {
	  	sort: false
	  }
	};
		
	Plotly.newPlot('chart', data, layout, {responsive: true});
}

getPetitionData();

$("#selector").change(() => {
	getPetitionData();
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.