31:T54d,chart = { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const {nodes, links} = sankey(data); svg.append("g") .attr("stroke", "#000") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => colors[d.name] || '#ccc') .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => colors[d.target.name]) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name); return svg.node(); }32:T45a,md`## Notes Data: [Wikipedia](https://en.wikipedia.org/wiki/2014_European_Parliament_election), [EuroParl](https://www.europarl.europa.eu/elections2014-results/en/election-results-2014.html) Map: built with [Tilegrams](https://github.com/PitchInteractiveInc/tilegrams) and a lot of tweaking ## Challenges: Collecting the data and formatting it so it worked with the full country results most nations report and the regionally divided results that the UK, France, Ireland and Belgium reported. I left Poland out as they vote as a block and then divide up the regional seats after the election, and I couldn't find the data at the time. Keeping this aspect of the data in mind ended up being quite fiddly, and also quite a manual process to create the map which had the split between country level region and NUTS level regions, which was then fed into Tilegrams to generate a hex version. ## Limitations: The UK and France party representations look more disjointed because of the seats being allocated at regional level, it loses the cohesion of the other countries. The sankey addresses this to some extent.`33:T4e9,render = { function render(results) { var partyTotals = { "EPP": 0, "SD": 0, "ECR": 0, "ALDE": 0, "GUE_NGL": 0, "G_EFA": 0, "EFDD": 0, "NI": 0 }; for(var i = 0; i < singleCountries.length; i++) { const countryId = singleCountries[i].length < 5 ? singleCountries[i].slice(0, 2) : singleCountries[i]; const mapId = singleCountries[i]; addResult(results, countryId, mapId, i, partyTotals); } } function addResult(results, countryId, mapId, id, partyTotals) { var resultsArr = []; for(var i = 0; i < ids.length; i++) { if(results.results[id][ids[i]][0] !== null) { var column = document.querySelector('div.' + ids[i]); for(var j = 0; j < results.results[id][ids[i]].length; j++) { if(results.results[id][ids[i]][j] !== null) { for(var k = 0; k < results.results[id][ids[i]][j].meps; k++) { resultsArr.push(ids[i]); } partyTotals[ids[i]] += results.results[id][ids[i]][j].meps; } } } } d3.selectAll('g#' + mapId + ' polygon').each(function(d, i) { d3.select(this).attr('fill', colors[resultsArr[i]]); }); } return render; }34:T75a,html``35:[] 2f:{"title":"EU Parliament Hex Map","cells":[{"id":0,"value":"md`# EU Parliament Hex Map\nSummary: 2014 EU coalition hex map, country-level sankey and tabular view of the MEP party/coalition distribution.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"viewof country = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"html`

${ids.map(id => {\n const parties = countryParties(id)\n return `\n

${id} \n (${parties.reduce((a, b) => b ? a + b.meps : 0, 0)})\n

\n ${parties.map(d => {\n if(d) {\n return `${emojis[country]} ${d.party} (${d.meps})`\n }\n }).join('')\n }\n

`}\n )}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"colors = ({\n EPP: '#39f',\n SD: '#F0001C',\n ECR: '#0054A5',\n ALDE: 'gold',\n GUE_NGL: 'darkRed',\n G_EFA: '#32CD32',\n EFDD: '#24B9B9',\n NI: '#999'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"sankeyData = ({\n\"nodes\": nodes.map(d => ({name: d })),\n\"links\": processedParties.map(d => {\n let sourceIdx = nodes.indexOf(d[0]);\n if(sourceIdx === -1) {\n sourceIdx = nodes.indexOf(d[0].slice(0, 2));\n }\n return {\n \"source\": sourceIdx,\n \"target\": nodes.indexOf(d[1]),\n \"value\": d[2]\n}})})","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"nodes = ids.concat([country])","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"processedParties = {\n const output = [];\n ids.map(id => {\n output.push([\n country,\n id,\n countryParties(id).reduce((a, b) => b ? a + b.meps : a, 0)\n ])\n })\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return name => color(name.replace(/ .*/, \"\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeAlign(d3.sankeyJustify)\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 5], [width - 1, 450 - 5]]);\n return ({nodes, links}) => {\n console.log(nodes, links)\n return sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n })\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"edgeColor = 'target'","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"data = sankeyData //d3.json(\"https://gist.githubusercontent.com/mbostock/ca9a0bb7ba204d12974bca90acc507c0/raw/398136b7db83d7d7fd89181b080924eb76041692/energy.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"format = d => d","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"countryParties = function(id) {\n const filtered = results.results\n .filter(d => d.countryCode ? d.countryCode === country : d.country === country);\n console.log(filtered)\n \n const allParties = {\n ALDE: [],\n ECR: [],\n EFDD: [],\n EPP: [],\n GUE_NGL: [],\n G_EFA: [],\n NI: [],\n SD: []\n };\n \n filtered.map(d => {\n ids.map(id => {\n allParties[id] = allParties[id].concat(d[id])\n })\n })\n\n const entries = Object.entries(allParties);\n const countryParties = {};\n \n entries.filter(d => d[0] === id)[0][1].map(d => {\n if(d) {\n if(countryParties[d.party]) {\n countryParties[d.party] += d.meps;\n }\n else {\n countryParties[d.party] = d.meps;\n }\n }\n })\n \n return Object.entries(countryParties).map(d => ({ party: d[0], meps: d[1]}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"graphic = {\n const svg = d3.select('.container');\n svg.node().innerHTML = map;\n render(results)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"map = d3.text('https://raw.githubusercontent.com/joshrayman/joshrayman.github.io/master/vis/eu/map.svg')","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"singleCountries = [\"Germany\",\"Spain\",\"Poland\",\"Romania\",\"Netherlands\",\"CzechRepublic\",\"Greece\",\"Hungary\",\"Portugal\",\"Sweden\",\"Austria\",\"Bulgaria\",\"Finland\",\"Denmark\",\"Slovakia\",\"Croatia\",\"Lithuania\",\"Latvia\",\"Slovenia\",\"Cyprus\",\"Estonia\",\"Luxembourg\",\"Malta\", \"Italy\", \"IE03\",\"IE01\",\"IE02\",\"BE1\",\"BE2\",\"BE3\",\"FR3\",\"FR5\",\"FR4\",\"FR7\",\"FR6\",\"FR2\",\"FR1\",\"FRA\",\"UKI\",\"UKJ\",\"UKK\",\"UKG\",\"UKD\",\"UKC\",\"UKE\",\"UKF\",\"UKH\",\"UKN\",\"UKM\",\"UKL\"\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"emojis = ({ \"Austria\" : '🇦🇹',\n \"BE\": '🇧🇪', \n \"Bulgaria\": '🇧🇬', \"Cyprus\": '🇨🇾',\"Croatia\": '🇭🇷', \"CzechRepublic\": '🇨🇿', \"Denmark\": '🇩🇰', \"Estonia\": '🇪🇪', \"Finland\": '🇫🇮', \"FR\": '🇫🇷', \"Germany\": '🇩🇪', \"Hungary\": '🇭🇺', \"IE\": '🇮🇪', \"Italy\": '🇮🇹', \"Latvia\": '🇱🇻', \"Lithuania\": '🇱🇹', \"Luxembourg\": '🇱🇺', \"Malta\": '🇲🇹', \"Netherlands\": '🇳🇱', \"Poland\": '🇵🇱', \"Portugal\": '🇵🇹', \"Romania\": '🇷🇴', \"Slovakia\": '🇸🇰', \"Slovenia\": '🇸🇮', \"Sweden\": '🇸🇪', \"Spain\": '🇪🇸', \"UK\": '🇬🇧', \"Greece\": '🇬🇷'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"ids = [\"EPP\",\"SD\",\"ECR\",\"ALDE\",\"GUE_NGL\",\"G_EFA\",\"EFDD\",\"NI\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"results = d3.json(\n \"https://raw.githubusercontent.com/joshrayman/joshrayman.github.io/master/vis/eu/2014-results.json?v=2\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"selectedCountry = {\n return html`\n `\n\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}