31:T103c,{ const height = Math.max( width / 2, 400 ); const svg = d3.select(DOM.svg(width, height)); // Margin object with four properties const margin = { top: 20, right: 20, bottom: 50, left: 50 }; //create innerWidth and innerHeight for our margin const innerW = width - margin.right - margin.left; const innerH = height - margin.top - margin.bottom; // append a g element to our svg and give it a new origin inside svg const g = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // create group elements for our axes const xAxisG = g.append("g").attr("transform", "translate(0," + innerH + ")"); const yAxisG = g.append("g"); //define couple of linear scales const xScale = d3.scaleLinear(); const yScale = d3.scaleLinear(); const xAxis = d3.axisBottom().scale(xScale); const yAxis = d3.axisLeft().scale(yScale); const max_seats_by_party = 40; const max_probability = 100; //Let's give these scales a domain (actual values) and a range (plotted values) xScale.domain([0, max_seats_by_party]).range([0, innerW]); yScale.domain([0, max_probability]).range([innerH, 0]); const xLabel = xAxisG .append("text") .attr("x", innerW / 2) .attr("y", 30) .attr("font-size", 10) .style("fill", "black") .text("Seat position"); const yLabel = yAxisG .append("text") .attr("x", -innerH / 2) .attr("y", -30) .attr("font-size", 10) .style("fill", "black") .style("text-anchor", "middle") .text( "Probability to be elected (based on " + results.draws + " simulated elections)" ) .attr("transform", "rotate(-90)").attr; xAxisG.call(xAxis); yAxisG.call(yAxis); const lists_g = g .append("g") .attr("id", "parties") .selectAll("g") .data(results.lists) .enter() .append("g") .attr("id", d => d.name); const line = d3 .line() .x((d, i) => xScale(i)) .y(d => yScale(d)) .curve(d3.curveMonotoneX); // apply smoothing to the line lists_g .append("path") .datum(d => d) .attr("d", d => line(d.seat_probability)) .attr("stroke", d => d.color) .style("fill", "none") .style("stroke-width", 1); lists_g .selectAll("circle") .data(d => { console.log(d.name); return d.seat_probability.map(v => { return { value: v, color: d.color }; }); }) .enter() .append("circle") .attr("cx", (d, i) => xScale(i)) .attr("cy", (d, i) => yScale(d.value)) .attr("r", 5) .attr("fill", (d, i) => d.color) .attr("opacity", 0.7); const chosenX = xScale(chosen_position - 1); const chosenY = yScale( results.lists[chosen_list].seat_probability[chosen_position - 1] ); g.append("path") .attr( "d", d3 .arc() .innerRadius(7) .outerRadius(10) .startAngle(0) .endAngle(360) ) .attr("fill", "red") .attr("opacity", 1) .attr("transform", `translate(${chosenX}, ${chosenY})`); // Legend const circleSize = 5; const legend = g .append("g") .attr("transform", (d, idx) => `translate(${xScale(25)}, 50)`); const items = legend .selectAll("g") .data(lists) .enter() .append("g") .attr("transform", (d, idx) => `translate(${idx * 5}, ${idx * 20})`); items .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", circleSize) .attr("fill", (d, i) => d.color); items .append("text") .attr("x", 14) .attr("y", 0) .attr("fill", "black") .style("dominant-baseline", "middle") .style("font-weight", (d, idx) => (idx === +chosen_list ? "600" : "300")) .style("font-size", "0.8em") .style("font-family", "var(--sans-serif)") .text(d => `${d.name} (${d.mean}%)`); items .append("path") .attr("d", (d, idx) => idx === +chosen_list ? d3 .arc() .innerRadius(7) .outerRadius(10) .startAngle(0) .endAngle(360)(d) : "" ) .attr("fill", "red") .attr("opacity", 1); return svg.node(); }32:T4df,md` If my preferred candidate is #${chosen_position} on the list

${
  lists[chosen_list].name
}

, what is his/her probability to be elected, based on the last [IFOP survey](https://www.ifop.com/elections-europeennes-2019/)? Probability to be elected: **${results.lists[chosen_list].seat_probability[ chosen_position - 1 ].toFixed(2)}%** Every party in France presents a list of 79 candidates (because France will have 79 representative in the European parliament). The number of elected candidates for each list is computed from all percentages using the [D'Hondt method](https://en.wikipedia.org/wiki/D%27Hondt_method). The method might be different for other countries, feel free to **Fork** this notebook. Lists that do not reach 5% will not send any member to the parliament. That's why the first member of every list get the same probability to be elected: all of them are elected, or none of them. The probabilities are obtained simulating a lot of elections (${ results.draws } so far), where the score of a list is a random draw from a Gaussian distribution (mean: percentage given by the IFOP survey, standard deviation: 2). `33:[] 2f:{"title":"European elections simulator - France","cells":[{"id":0,"value":"md`# European elections simulator - France\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"viewof chosen_list = select({\n title: \"List\",\n options: lists.map((list, idx) => {\n return { label: list.name, value: idx };\n }),\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"viewof chosen_position = number({\n title: \"Position\",\n value: 9\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`---\n\n### Boring zone\n\n- code is adapted from [Python script](https://www.reddit.com/r/france/comments/b9fis2/simulateur_d%C3%A9lections_europ%C3%A9ennes/) by [Darmagnome](https://www.reddit.com/user/Darmagnome/)\n- survey data are from [IFOP](https://www.ifop.com/elections-europeennes-2019/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"lists = [\n list(\"Rassemblement National\", 24, \"#254671\"),\n list(\"La République en Marche\", 22.5, \"#2abaff\"),\n list(\"Les Républicains\", 13.5, \"#213054\"),\n list(\"France Insoumise\", 9, \"#c9462c\"),\n list(\"Europe Écologie Les Verts\", 6.5, \"#7eb712\"),\n list(\"Place Publique – Parti Socialiste\", 6, \"#e0003c\"),\n list(\"Debout la France\", 4.5, \"#127db3\"),\n list(\"Parti Communiste\", 3.5, \"#ff5252\"),\n list(\"Génération.s\", 2, \"#d9185d\"),\n list(\"Les Patriotes\", 2, \"#ef944e\")\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"std = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"seats = 79","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"max_draws = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"time = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"list = {\n return (name, mean, color) => new List(name, mean, color);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"class List {\n constructor(name, mean, color) {\n this.name = name;\n this.mean = mean;\n this.std = std;\n this.color = color;\n this.seat_probability = new Array(seats).fill(0);\n }\n get draw() {\n return d3.randomNormal(this.mean, this.std);\n }\n update_seat_probability(draw_seats, draws) {\n for (let j = 0; j < seats; j++) {\n if (j < draw_seats) {\n this.seat_probability[j] =\n (100 * ((this.seat_probability[j] * draws) / 100 + 1)) / (draws + 1);\n } else {\n this.seat_probability[j] =\n (100 * ((this.seat_probability[j] * draws) / 100)) / (draws + 1);\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"results = {\n let draws = 0;\n while (draws < max_draws) {\n await Promises.delay(time);\n election().forEach((seats, idx) =>\n lists[idx].update_seat_probability(seats, draws)\n );\n draws++;\n yield { draws, lists };\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"function election() {\n const scores = lists.map(l => {\n const score = l.draw();\n // Scores below 5% don't count\n return score >= 5 ? score : 0;\n });\n\n // attribution de sieges à la proportionnelles à la plus forte moyenne\n // https://droit-finances.commentcamarche.com/faq/31103-proportionnelle-a-la-plus-forte-moyenne-definition\n const sum = scores.reduce((acc, cur) => acc + cur, 0);\n const seats_by_party = scores.map(score => Math.floor((seats * score) / sum));\n let num_seats = seats_by_party.reduce((acc, cur) => acc + cur, 0);\n let idx;\n while (num_seats < seats) {\n // Attribute next seat to...\n num_seats += 1;\n const arr = scores.map(score => score / num_seats);\n idx = arr.indexOf(Math.max(arr));\n seats_by_party[idx] += 1;\n }\n return seats_by_party;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"import {number, select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}