Election influence

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }
    
    body {
      font-family: arial;
    }
    
    #content, #overview {
      width: 600px;
    }
    
    #overview {
      display: flex;
      flex-wrap: wrap;
    }

#content .party {
      margin-top: 32px;
    }
    
    .blockContainer {
      display: flex;
      flex-wrap: wrap;
    }
    
    .block { 
      width: 18px; 
      height: 18px;
    }
    
    .party .influence {
      margin-top: 8px;
    }
    
    .party .influence span {
    }
    
    .numberWrapper {
      width: 100%;
      display: flex;
     	justify-content: center;
    }
    
    .numberWrapper div {
    	text-align: center;
      margin: 16px;
      font-size: 24px;
    }
    
    .numberWrapper span {
      display: block;
      font-size: 16px;
    }
    
    .subtitle {
      font-size: 0.8em;
      font-weight: normal;
    }
    
  </style>
</head>

<body>
  <h1> Sveriges inflytande på Europa </h1>
  <h2>Europa parlamentet - 751 ledamöter
    <div class='subtitle'>Svergie har 20 ledamöter i parlamentet</div>
  </h2>
  <div id="overview"></div>
  <div id="content"></div>
  <script>
    
    const assemblyTotal = 751;
    
    
    data = [
      	{ 
          party: 'EPP',
          partyLong: "Europeiska folkpartiets grupp (kristdemokrater)",
          total: 182,
          color: '#2b4b8e',
          countries: [ { name: 'sweden', value: 6} ],
        },
      	{
          party: 'S&D',
          partyLong: 'Gruppen Progressiva förbundet av Socialdemokrater i Europaparlamentet',
          total: 146,
          color: '#c01717',
          countries: [ { name: 'sweden', value: 5} ],
        }, 
        {
          party: 'ECR',
          partyLong: 'Gruppen Europeiska konservativa och reformister',
          total: 59,
          color: '#0574a1',
          countries: [ { name: 'sweden', value: 3} ],
        },
        {
          party: 'ALDE+R',
          partyLong: 'Gruppen Alliansen liberaler och demokrater för Europa + Renaissance + USR PLUS',
          total: 109,
          color: '#e30d7e',
          countries: [ { name: 'sweden', value: 3} ],
        },
        {
          party: 'GUE/NGL',
          partyLong: 'Gruppen Europeiska enade vänstern/Nordisk grön vänster',
          total: 39,
          color: '#8a1811',
          countries: [ { name: 'sweden', value: 1} ],
        },
        {
          party: 'Gröna/EFA',
          partyLong: 'Gruppen De gröna/Europeiska fria alliansen',
          total: 69,
          color: '#0b7332',
          countries: [ { name: 'sweden', value: 2} ],
        },
        {
          party: 'EFDD',
          partyLong: 'Gruppen Frihet och direktdemokrati i Europa',
          total: 54,
          color: '#2fbbc0',
          countries: [ { name: 'sweden', value: 0} ],
        },
        {
          party: 'ENF',
          partyLong: ' Gruppen Nationernas och friheternas Europa',
          total: 58,
          color: '#0c6eb4',
          countries: [ { name: 'sweden', value: 0} ],
        },
        {
          party: 'NI',
          partyLong: 'Grupplösa',
          total: 8,
          color: '#aaaaa9',
          countries: [ { name: 'sweden', value: 0} ],
        },
        {
          party: 'Övriga',
          partyLong: 'Nyvalda ledamöter som inte tillhör någon politisk grupp i det avgående parlamentet',
          total: 29,
          color: '#e7e4df',
          countries: [ { name: 'sweden', value: 0} ],
        }
    ]; 
    
    const drawWaffle = function(d, party) {       
      const blockContainer = party.append("div").classed("blockContainer", true);
      
      for( let i=0; i<d.total; i++) {
        const block = blockContainer.append("div").classed("block", true);

if (d.total - d.countries[0].value > i) {
          block
            .style("background", d.color)
            .style("opacity", 0.5)
           	.style("border", "1px solid white")
          
        } else  {
          block
            .style("background", d.color)
            .style("opacity", 1)
           	.style("border", "1px solid black")
          
        }
      } 
    }
    
    /* overview */
    const overview = d3.select("#overview");
    data.forEach(d => {
      for(let i=0; i<d.total; i++) {
        if (d.total - d.countries[0].value > i) {
          overview.append("div").classed("block", true)
            .style("background-color", d.color)
            .style("opacity", 0.5)
            .style("border", "1px solid white")

} else {
           overview.append("div").classed("block", true)
            .style("background-color", d.color)
           	.style("border", "1px solid black")
            .style("opacity", 1);
        }
      } 
    });
    
    /* parties */
  	const parties = d3.select("#content").selectAll(".party")
    	.data(data)
			.enter()
    	.append("div")
    		.classed("party", true)
     
		parties.each(function(d) { 
      const elem = d3.select(this);
      
      // draw title
     	const title = elem
        .append("h2").classed("title", true)
        .html(d => `${d.party} - ${d.partyLong}`);
      
      title
        .append("div").classed("subtitle", true)
        .html(d => `${d.total} ledamöter`);
      
      drawWaffle(d, elem); 
      
      const numWrapper = elem.append("div").classed("numberWrapper", true);
      
       numWrapper
      	.append("div").classed("influence", true)
      	.html(d => `<span>Svenska ledamöter</span> ${d.countries[0].value}`)
      
      numWrapper
      	.append("div").classed("influence", true)
      	.html(d => `<span>Andel av gruppen</span> ${((d.countries[0].value / d.total) * 100).toFixed(1)}%`)
      
      numWrapper
      	.append("div").classed("influence", true)
      	.html(d => `<span>Andel i parlamentet</span> ${((d.countries[0].value / assemblyTotal) * 100).toFixed(1)}%`)
    });  
      
   
  </script>
</body>

https://d3js.org/d3.v4.min.js