GitNoise/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>