2d:null 2e:["$","title",null,{"children":"Εκλογικές μετατοπίσεις | infographeo | Observable"}] 33:T1328,descriptions = { return { v2023b: { 2: "Η Νέα Δημοκρατία διατηρεί τα ίδια περίπου ποσοστά σε κάθε εκλογική περιφέρεια, όπως και στις εκλογές του Μαΐου 2023, χάνει όμως σε ψήφους και ειδικά στις μεγάλες εκλογικές περιφέρειες.", 4: "Ο Σύριζα χάνει ακόμη μεγαλύτερη μάζα ψηφοφόρων από το 2019 σε όλη την επικράτεια" }, v2023a: { 2: "Η Νέα Δημοκρατία καταφέρνει να επικρατήσει και σε παραδοσιακά κεντροαριστερές περιφέρειες και να ενισχύσει ακόμα περισσότερο το ποσοστό της", 4: "Ο Σύριζα χάνει μια μεγάλη μάζα των ψηφοφόρων του από το 2019 σε όλη την επικράτεια" }, e2014: { 2: "Η Νέα Δημοκρατία έρχεται δεύτερη στις Ευρωεκλογές του 2014, χάνοντας όλα τα μεγάλα αστικά κέντρα και επικρατώντας όμως μόνο στα παραδοσιακά της \"κάστρα\" στην περιφέρεια.", 4: "Στις ευρωεκλογές του 2014, ο Σύριζα πετυχαίνει την πρώτη του εκλογική νίκη, κερδίζοντας όλα τα μεγάλα αστικά κέντρα, χάνοντας ωστόσο αρκετές περιφέρειες στην επαρχία."}, v2015a: { 2: "Στις εθνικές εκλογές η Νέα Δημοκρατία βλέπει μαζί με τα μεγάλα αστικά κέντρα και παραδοσικά της \"κάστρα\", όπως η Χαλκιδική και η Ευρυτανία να αλλάζουν χέρια. Κρατά τα υψηλά της στην επαρχία σε περιφέρειες με σχετικά λίγες έδρες.", 4: "Ο Σύριζα πετυχαίνει το μεγαλύτερο ιστορικά ποσοστό του, κερδίζοντας πλέον και τα αστικά κέντρα και την περιφέρεια, ακόμα και παραδοσιακά κάστρα της ΝΔ. Ακόμα και στις περιφέρειες που δεν επικρατεί, πετυχαίνει συχνά ποσοστά άνω του 30%."}, v2015b: { 2: "Αν και η επίδοση της ΝΔ σε εθνικό επίπεδο δεν διαφέρει σημαντικά από την αντίστοιχη στις εκλογές του Ιανουαρίου 2015, αυξάνει τα ποσοστά της σε αστικά κέντρα με κεντροδεξιά ερίσματα (Α΄Αθηνών, Βόρειος Τομέας Αθηνών, Β' Θεσσαλονίκης).", 4: "Ο Σύριζα επικρατεί με ποσοστό ελάχιστα χαμηλότερο των εκλογών του Ιανουαρίου 2015, κρατώντας τα μεγάλα αστικά κέντρα καθώς και την περιφέρεια, χάνοντας όμως έδαφος σε περιφέρειες που παραδοσιακά η ΝΔ έχει ερίσματα."}, e2019: { 2: "Η Νέα Δημοκρατία καταφέρνει να επαναφέρει στις τάξεις της τα μεγάλα αστικά κέντρα και κερδίζει και παραδοσιακά κεντροαριστερά \"κάστρα\" στην περιφέρεια (Ρέθυμνο, Λασίθι).", 4: "Πέντε χρόνια μετά τις προηγούμενες Ευρωεκλογές, η εικόνα για τον Σύριζα αντιστρέφεται: Χάνει τα μεγάλα αστικά κέντρα καθώς και μεγάλο τμήμα της περιφέρειας, μεταξύ των οποίων και παραδοσιακά \"κάστρα\" της κεντροαριστεράς."}, v2019: { 2: "Σε σχέση με τις ευρωεκλογές του ίδιου έτους, η Νέα Δημοκρατία χάνει μεν ορισμένες περιφέρειες στην επαρχία, καταφέρνει όμως να ενισχύσει τα ποσοστά της σε όλες τις περιφέρειες.", 4: "O Σύριζα συσπειρώνει τις δυνάμεις του κοντά στο εθνικό του ποσοστό στα μεγάλα αστικά κέντρα, παρά την απώλειά τους. Παραδοσιακά \"κάστρα\" του επιστρέφουν στην παράταξη, δίνοντας μάλιστα και τα κομματικά του υψηλά."}, } }34:Tb99,function prepareNodes(dataArray, xScale, width, height, padding = 4, maxRadius = 60) { // Map the basic node data to d3-friendly format. var nodes = dataArray.map((node, index) => { return { id: node.id, input: node.input, idealradius: node.size, radius: 0, // Give each node a random color. color: node.color, // Set the node's gravitational centerpoint. idealcx: xScale(node.value), idealcy: 0.6 * height, value: node.value, x: xScale(node.value), // Add some randomization to the placement; // nodes stacked on the same point can produce NaN errors. y: 0.6 * height + Math.random() }; }); var force = d3.layout.force().nodes(nodes).size([width, height]).gravity(0).charge(0).on('tick', tick).start(); /** * On a tick, apply custom gravity, collision detection, and node placement. */ function tick(e) { for (i = 0; i < nodes.length; i++) { var node = nodes[i]; /* * Animate the radius via the tick. * * Typically this would be performed as a transition on the SVG element itself, * but since this is a static force layout, we must perform it on the node. */ node.radius = node.idealradius - node.idealradius * e.alpha * 10; node = gravity(.2 * e.alpha)(node); node = collide(.5)(node); node.cx = node.x; node.cy = node.y; } } /** * On a tick, move the node towards its desired position, * with a preference for accuracy of the node's x-axis placement * over smoothness of the clustering, which would produce inaccurate data presentation. */ function gravity(alpha) { return function (d) { d.y += (d.idealcy - d.y) * alpha; d.x += (d.idealcx - d.x) * alpha * 3; return d; }; } /** * On a tick, resolve collisions between nodes. */ function collide(alpha) { var quadtree = d3.geom.quadtree(nodes); return function (d) { var r = d.radius + maxRadius + padding, nx1 = d.x - r, nx2 = d.x + r, ny1 = d.y - r, ny2 = d.y + r; quadtree.visit(function (quad, x1, y1, x2, y2) { if (quad.point && quad.point !== d) { var x = d.x - quad.point.x, y = d.y - quad.point.y, l = Math.sqrt(x * x + y * y), r = d.radius + quad.point.radius + padding; if (l < r) { l = (l - r) / l * alpha; d.x -= x *= l; d.y -= y *= l; quad.point.x += x; quad.point.y += y; } } return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); return d; }; } // Run the layout a fixed number of times. // The ideal number of times scales with graph complexity. // Of course, don't run too long—you'll hang the page! force.start(); for (var i = 200; i > 0; --i) { force.tick(); } force.stop(); return nodes; }35:T2532,function bubbleChart( iwidth = 0.98 * window.innerWidth, iheight = iwidth / phi ) { let margin = { top: 50, right: 20, bottom: 50, left: 90, gap: 5 }, width = iwidth - margin.left - margin.right, height = iheight - margin.top - margin.bottom, tooltipFontCoeff = 1.2, tooltipLineHeight = 11, Duration = 1450; let container = html``; let toolTipObject = {x: -100, y: -100, text: "", visible: false}; let svg = d3 .select(container) .attr("width", iwidth) .attr("height", iheight) .style("background", "#FFF") .style("font", "10px/1.5 var(--sans-serif)"); let loading = svg.append('text') .attr("x", iwidth / 2) .attr("y", iheight / 2) .attr("dy", '.35em') .style("text-anchor", "middle") .text("Φόρτωση δεδομένων..."); let axisContainer = svg .append("g") .attr("class", "x axis") .attr("transform", `translate(${[0, margin.top + height]})`); let bubblesContainer = svg.append("g") .attr("class", "bubbles-container"); function renderTooltip(obj) { let textWith = 2 * margin.gap + tooltipFontCoeff * measureTextWidth(obj.text); let diff = d3.max([0, obj.pos[0] + textWith - iwidth]); let tooltipGroup = svg.selectAll("g.tooltip").data([obj]); tooltipGroup .enter() .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .attr("transform", (d,i) => `translate(${[d.pos[0] - diff, d.pos[1]]})`) .style("opacity", (d,i) => d.visible ? 1 : 0); tooltipGroup .attr("transform", (d,i) => `translate(${[d.pos[0] - diff, d.pos[1]]})`) .style("opacity", (d,i) => d.visible ? 1 : 0); tooltipGroup .exit() .remove(); let tooltipBg = svg.selectAll("g.tooltip").selectAll("rect.tooltip-bg").data(d => [d]); tooltipBg .enter() .append("rect") .attr("class", "tooltip-bg") .attr("rx", 5) .attr("ry", 5) .attr("y", -margin.gap) .attr("width", (d,i) => 2 * margin.gap + tooltipFontCoeff * measureTextWidth(d.text)) .attr("height", 2 * margin.gap + tooltipLineHeight) .attr("fill", "rgb(97, 97, 97)") .attr("fill-opacity", 0.97) tooltipBg .attr("width", (d,i) => 2 * margin.gap + tooltipFontCoeff * measureTextWidth(d.text)); tooltipBg .exit() .remove(); let tooltipText = svg.selectAll("g.tooltip").selectAll("text.tooltip-text").data(d => [d]); tooltipText .enter() .append("text") .attr("class", "tooltip-text") .attr("dy", margin.gap + tooltipLineHeight / 2) .attr("dx", margin.gap) .attr("text-anchor", "start") .style("fill", "#FFF") .style("font", "12px/1.5 var(--sans-serif)") .text(d => d.text); tooltipText .text(d => d.text); tooltipText .exit() .remove(); } function renderGraph(dataArray, valueExtent, percentage) { let x = d3.scale.linear() .domain(valueExtent) .range([margin.left, width + margin.left]) .nice() let nodes = prepareNodes(dataArray, x, width, height); let xAxis = d3.svg.axis().scale(x); svg.select(".x.axis") .call(xAxis); svg .select(".x.axis .domain") .style("fill", "none") .style("stroke", "#000") .style("shape-rendering", "crispEdges"); let partyPercentGroup = svg.selectAll("g.party-percent-container").data([percentage]); partyPercentGroup .enter() .append("g") .attr("class", "party-percent-container") .attr("transform", `translate(${[-10, margin.top]})`) .transition() .duration(Duration) .attr("transform", (d,i) => `translate(${[x(d),margin.top]})`); partyPercentGroup .transition() .duration(Duration) .attr("transform", (d,i) => `translate(${[x(d),margin.top]})`); partyPercentGroup .exit() .remove(); partyPercentGroup.selectAll("line") .data(d => [d]) .enter() .append("line") .attr("y1", - margin.top) .attr("y2", height + 0.5 * margin.bottom) .attr("stroke-width", 1) .attr("stroke", "#333") .attr("stroke-dasharray", [2, 2]); let partyPercentText = partyPercentGroup.selectAll("text.party-percent").data(d => [d]); partyPercentText .enter() .append("text") .attr("class", "party-percent") .attr("fill", "#333") .attr("text-anchor", "middle") .style("font", "10px/1.5 bold var(--sans-serif)") .style("font-weight", "bold") .attr("y", height) .attr("dy", 0.75 * margin.bottom) .attr("current", (d,i) => 0) .transition() .duration(Duration) .tween("text", function(d) { let i = d3.interpolate(+d3.select(this).attr("current") || 0, +d); return function(t) { d3.select(this).text(localeGR.format(".2f")(this._current = i(t))); }; }).each("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d); }); partyPercentText .transition() .duration(Duration) .tween("text", function(d) { let i = d3.interpolate(+d3.select(this).attr("current") || 0, +d); return function(t) { d3.select(this).text(localeGR.format(".2f")(this._current = i(t))); }; }).each("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d); }); partyPercentText .exit() .remove(); let circlesContainer = svg.select(".bubbles-container") .selectAll("g.circle-group") .data(nodes, d => d.id); circlesContainer .enter() .append("g") .attr("class", "circle-group") .attr("transform", (d,i) => `translate(${[d.x, -d.y]})`) .transition() .duration(Duration) .ease("elastic") .delay((d, i) => 1.5 * d.x) .attr("transform", (d,i) => `translate(${[d.x, d.y]})`); circlesContainer .transition() .duration(Duration) .ease("elastic") .delay((d, i) => 1.5 * d.x) .attr("transform", (d,i) => `translate(${[d.x, d.y]})`); circlesContainer .exit() .transition() .duration(Duration) .remove(); let circles = bubblesContainer.selectAll("g.circle-group").selectAll("circle.node").data(d => [d], d => d.id); circles .enter() .append("circle") .attr("class", "node") .attr("r", (d,i) => 0) .on("mouseover", function (d,i) { d3.select(this).attr("stroke", "#ff7f0e").attr("stroke-width", 2); toolTipObject.visible = true; toolTipObject.text = d.title; renderTooltip(toolTipObject); }).on('mousemove', function (d, i) { let pos = d3.mouse(svg.node()); toolTipObject.pos = [pos[0] + 5, pos[1] - tooltipLineHeight]; toolTipObject.text = d.title + ": " + localeGR.format(Number.isInteger(+d.value) ? "," : ".2f")(+d.value); renderTooltip(toolTipObject); }).on('mouseout', function (d, i) { d3.select(this).attr("stroke", d3.rgb(d.color).darker(0.5)).attr("stroke-width", 1); toolTipObject.visible = false; renderTooltip(toolTipObject); }) .transition() .duration(1.5 * Duration) .ease("elastic") .attr("r", (d,i) => d.radius) .attr("fill", (d,i) => d.color) .attr("stroke", (d,i) => d3.rgb(d.color).darker(0.5)) .attr("stroke-width", 1) circles .transition() .duration(1.5 * Duration) .ease("elastic") .attr("fill", (d,i) => d.color) .attr("r", (d,i) => d.radius) .attr("stroke", (d,i) => d3.rgb(d.color).darker(0.5)) .attr("stroke-width", 1); circles .exit() .transition() .duration(Duration) .remove(); let circleTexts = bubblesContainer.selectAll("g.circle-group").selectAll("text.title").data(d => [d]); circleTexts .enter() .append("text") .attr("text-anchor", "middle") .style("pointer-events", "none") .each((d,i) => { d.title = politeia.eklogikes_perifereies.find(e => e.id === d.id).title_el; d.lines = calculateTextLines(d.title); d.textRadius = textRadius(d.lines); d.lineHeight = 12; }) .attr("class", "title") .style("fill", "#FFF") .attr("transform", (d,i) => `scale(${d.radius / d.textRadius})`); circleTexts .each((d,i) => { d.title = politeia.eklogikes_perifereies.find(e => e.id === d.id).title_el; d.lines = calculateTextLines(d.title); d.textRadius = textRadius(d.lines); d.lineHeight = 12; }) .attr("transform", (d,i) => `scale(${d.radius / d.textRadius})`); circleTexts .exit() .remove(); let tspans = bubblesContainer.selectAll("g.circle-group").selectAll("text.title").selectAll("tspan").data((d,i) => d.lines); tspans .enter() .append("tspan") .attr("x", 0) .attr("y", (d, i) => (i - d.length / 2 + 0.8) * d.lineHeight) .text(d => d.text); tspans .attr("y", (d, i) => (i - d.length / 2 + 0.8) * d.lineHeight) .text(d => d.text); tspans .exit() .remove(); loading.remove(); } return Object.assign(svg.node(), { update(dataArray, valueExtent, percentage) { // Use a timeout to allow the rest of the page to load first. setTimeout(renderGraph(dataArray, valueExtent, percentage), 10); } }) } 36:T2529,function bubbleChart2( iwidth = 0.98 * window.innerWidth, iheight = iwidth / phi, margin = { top: 50, right: 50, bottom: 50, left: 50, gap: 5 } ) { let width = iwidth - margin.left - margin.right, height = iheight - margin.top - margin.bottom, tooltipFontCoeff = 1.2, tooltipLineHeight = 11, Duration = 1450; let container = html``; let toolTipObject = {x: -100, y: -100, text: "", visible: false}; let svg = d3 .select(container) .attr("width", iwidth) .attr("height", iheight) .style("background", "#FFF") .style("font", "10px/1.5 var(--sans-serif)"); let loading = svg.append('text') .attr("x", iwidth / 2) .attr("y", iheight / 2) .attr("dy", '.35em') .style("text-anchor", "middle") .text("Φόρτωση δεδομένων..."); let axisContainer = svg .append("g") .attr("class", "x axis") .attr("transform", `translate(${[0, margin.top + height]})`); let bubblesContainer = svg.append("g") .attr("class", "bubbles-container"); function renderTooltip(obj) { let textWith = 2 * margin.gap + tooltipFontCoeff * measureTextWidth(obj.text); let diff = d3.max([0, obj.pos[0] + textWith - iwidth]); let tooltipGroup = svg.selectAll("g.tooltip").data([obj]); tooltipGroup .enter() .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .attr("transform", (d,i) => `translate(${[d.pos[0] - diff, d.pos[1]]})`) .style("opacity", (d,i) => d.visible ? 1 : 0); tooltipGroup .attr("transform", (d,i) => `translate(${[d.pos[0] - diff, d.pos[1]]})`) .style("opacity", (d,i) => d.visible ? 1 : 0); tooltipGroup .exit() .remove(); let tooltipBg = svg.selectAll("g.tooltip").selectAll("rect.tooltip-bg").data(d => [d]); tooltipBg .enter() .append("rect") .attr("class", "tooltip-bg") .attr("rx", 5) .attr("ry", 5) .attr("y", -margin.gap) .attr("width", (d,i) => 2 * margin.gap + tooltipFontCoeff * measureTextWidth(d.text)) .attr("height", 2 * margin.gap + tooltipLineHeight) .attr("fill", "rgb(97, 97, 97)") .attr("fill-opacity", 0.97) tooltipBg .attr("width", (d,i) => 2 * margin.gap + tooltipFontCoeff * measureTextWidth(d.text)); tooltipBg .exit() .remove(); let tooltipText = svg.selectAll("g.tooltip").selectAll("text.tooltip-text").data(d => [d]); tooltipText .enter() .append("text") .attr("class", "tooltip-text") .attr("dy", margin.gap + tooltipLineHeight / 2) .attr("dx", margin.gap) .attr("text-anchor", "start") .style("fill", "#FFF") .style("font", "12px/1.5 var(--sans-serif)") .text(d => d.text); tooltipText .text(d => d.text); tooltipText .exit() .remove(); } function renderGraph(dataArray, valueExtent, percentage) { let x = d3.scale.linear() .domain(valueExtent) .range([margin.left, width + margin.left]) .nice() let nodes = prepareNodes(dataArray, x, width, height); let dataFormat = dataArray.length > 0 ? dataArray[0].input.format : ".0%" let xAxis = d3.svg.axis().scale(x).tickFormat(d3.format(dataFormat)); svg.select(".x.axis") .call(xAxis); svg .select(".x.axis .domain") .style("fill", "none") .style("stroke", "#000") .style("shape-rendering", "crispEdges"); let partyPercentGroup = svg.selectAll("g.party-percent-container").data([percentage]); partyPercentGroup .enter() .append("g") .attr("class", "party-percent-container") .attr("transform", `translate(${[-10, margin.top]})`) .transition() .duration(Duration) .attr("transform", (d,i) => `translate(${[x(d),margin.top]})`); partyPercentGroup .transition() .duration(Duration) .attr("transform", (d,i) => `translate(${[x(d),margin.top]})`); partyPercentGroup .exit() .remove(); partyPercentGroup.selectAll("line") .data(d => [d]) .enter() .append("line") .attr("y1", - margin.top) .attr("y2", height + 0.5 * margin.bottom) .attr("stroke-width", 1) .attr("stroke", "#333") .attr("stroke-dasharray", [2, 2]); let partyPercentText = partyPercentGroup.selectAll("text.party-percent").data(d => [d]); partyPercentText .enter() .append("text") .attr("class", "party-percent") .attr("fill", "#333") .attr("text-anchor", "middle") .style("font", "10px/1.5 bold var(--sans-serif)") .style("font-weight", "bold") .attr("y", height) .attr("dy", 0.75 * margin.bottom) .attr("current", (d,i) => 0) .transition() .duration(Duration) .tween("text", function(d) { let i = d3.interpolate(+d3.select(this).attr("current") || 0, +d); return function(t) { d3.select(this).text(d3.format(".1%")(this._current = i(t))); }; }).each("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d); }); partyPercentText .transition() .duration(Duration) .tween("text", function(d) { let i = d3.interpolate(+d3.select(this).attr("current") || 0, +d); return function(t) { d3.select(this).text(d3.format(".1%")(this._current = i(t))); }; }).each("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d); }); partyPercentText .exit() .remove(); let circlesContainer = svg.select(".bubbles-container") .selectAll("g.circle-group") .data(nodes, d => d.id); circlesContainer .enter() .append("g") .attr("class", "circle-group") .attr("transform", (d,i) => `translate(${[d.x, -d.y]})`) .transition() .duration(Duration) .ease("elastic") .delay((d, i) => 1.5 * d.x) .attr("transform", (d,i) => `translate(${[d.x, d.y]})`); circlesContainer .transition() .duration(Duration) .ease("elastic") .delay((d, i) => 1.5 * d.x) .attr("transform", (d,i) => `translate(${[d.x, d.y]})`); circlesContainer .exit() .transition() .duration(Duration) .remove(); let circles = bubblesContainer.selectAll("g.circle-group").selectAll("circle.node").data(d => [d], d => d.id); circles .enter() .append("circle") .attr("class", "node") .attr("r", (d,i) => 0) .on("mouseover", function (d,i) { d3.select(this).attr("stroke", "#ff7f0e").attr("stroke-width", 2); toolTipObject.visible = true; toolTipObject.text = d.title; renderTooltip(toolTipObject); }).on('mousemove', function (d, i) { let pos = d3.mouse(svg.node()); toolTipObject.pos = [pos[0] + 5, pos[1] - tooltipLineHeight]; toolTipObject.text = d.title + ": " + d3.format(Number.isInteger(+d.value) ? "," : ".1%")(+d.value); renderTooltip(toolTipObject); }).on('mouseout', function (d, i) { d3.select(this).attr("stroke", d3.rgb(d.color).darker(0.5)).attr("stroke-width", 1); toolTipObject.visible = false; renderTooltip(toolTipObject); }) .transition() .duration(1.5 * Duration) .ease("elastic") .attr("r", (d,i) => d.radius) .attr("fill", (d,i) => d.color) .attr("stroke", (d,i) => d3.rgb(d.color).darker(0.5)) .attr("stroke-width", 1) circles .transition() .duration(1.5 * Duration) .ease("elastic") .attr("fill", (d,i) => d.color) .attr("r", (d,i) => d.radius) .attr("stroke", (d,i) => d3.rgb(d.color).darker(0.5)) .attr("stroke-width", 1); circles .exit() .transition() .duration(Duration) .remove(); let circleTexts = bubblesContainer.selectAll("g.circle-group").selectAll("text.title").data(d => [d]); circleTexts .enter() .append("text") .attr("text-anchor", "middle") .style("pointer-events", "none") .each((d,i) => { d.title = d.input.title; d.lines = calculateTextLines(d.title); d.textRadius = textRadius(d.lines); d.lineHeight = 12; }) .attr("class", "title") .style("fill", "#FFF") .attr("transform", (d,i) => `scale(${d.radius / d.textRadius})`); circleTexts .each((d,i) => { d.title = d.input.title; d.lines = calculateTextLines(d.title); d.textRadius = textRadius(d.lines); d.lineHeight = 12; }) .attr("transform", (d,i) => `scale(${d.radius / d.textRadius})`); circleTexts .exit() .remove(); let tspans = bubblesContainer.selectAll("g.circle-group").selectAll("text.title").selectAll("tspan").data((d,i) => d.lines); tspans .enter() .append("tspan") .attr("x", 0) .attr("y", (d, i) => (i - d.length / 2 + 0.8) * d.lineHeight) .text(d => d.text); tspans .attr("y", (d, i) => (i - d.length / 2 + 0.8) * d.lineHeight) .text(d => d.text); tspans .exit() .remove(); loading.remove(); } return Object.assign(svg.node(), { update(dataArray, valueExtent, percentage) { // Use a timeout to allow the rest of the page to load first. setTimeout(renderGraph(dataArray, valueExtent, percentage), 10); } }) } 37:[] 31:{"id":"5df490572a66347a","slug":"election-shifts","title":"Εκλογικές μετατοπίσεις","thumbnail":"5083b02ddccbe96c529ba206a85f82b1f374fcd0d58c45c04e0bcce87c83ff93","access_level":"public","create_time":"$D2023-05-06T20:18:45.657Z","update_time":"$D2023-06-25T21:03:12.952Z","view_time":null,"first_public_time":"$D2023-05-06T20:18:45.657Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"25b70a872b3828dd","login":"infographeo","name":"infographeo","avatar_url":"https://avatars-next.observableusercontent.com/16798d7c40be0311619918097a95e283dd1c432e23392674264f3e2194d225fa","tier":"starter_2024"},"version":784,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1dd636c4a6dd2c5c","login":"infographeo","name":"infographeo","avatar_url":"https://avatars-next.observableusercontent.com/16798d7c40be0311619918097a95e283dd1c432e23392674264f3e2194d225fa","tier":null}],"members":[{"type":"individual","id":"1dd636c4a6dd2c5c","login":"infographeo","name":"infographeo","avatar_url":"https://avatars-next.observableusercontent.com/16798d7c40be0311619918097a95e283dd1c432e23392674264f3e2194d225fa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d9a72db102cbfe91","slug":"elections","title":"Elections","owner":{"id":"25b70a872b3828dd","login":"infographeo","name":"infographeo"}},"type":"notebook","body":{"title":"Εκλογικές μετατοπίσεις","cells":[{"id":0,"value":"# Εκλογικές μετατοπίσεις","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"Από τις Ευρωεκλογές του 2014 μέχρι σήμερα, η πλάστιγγα έχει γύρει πότε με την Νέα Δημοκρατία και πότε με τον Σύριζα. Πίσω όμως από τα στεγνά ποσοστά νικητή και ηττημένου, κρύβονται τεκτονικές αλλαγές σε επίπεδο της κάθε εκλογικής περιφέρειας.\n\nΣτο παρακάτω γράφημα, το μέγεθος κάθε κύκλου είναι ανάλογο του πλήθους των εγγεγραμμένων ψηφοφόρων και η θέση του στον οριζόντιο άξονα το ποσοστό της επιλεγμένης παράταξης, συγκριτικά με την κομματική επίδοση στην επικράτεια. Οι κύκλοι χρωματίζονται, όταν η επιλεγμένη παράταξη έρχεται πρώτη σε ποσοστό.\n\nΕπιλέξτε την εκλογική αναμέτρηση και δείτε πώς και πόσο μετατοπίστηκε το εκλογικό σώμα στα μεγάλα αστικά κέντρα όσο και στην περιφέρεια.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"viewof currentElection = electionTrail();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"viewof settings = Inputs.form(\n {\n party_id: Inputs.radio(kommata.filter(d => [2,4].includes(d.id)).map(d => d.id), {value: 2, label: html`παράταξη:`, format: x => html`

`}),\n mode: Inputs.radio(new Map([[\"μέγεθος ποσοστού\", \"Perc\"], [\"πλήθος ψήφων\", \"VOTES\"]]), {value: \"Perc\", label: html`ταξινόμηση κατά:`})\n },\n {\n template: (inputs) => htl.html`

\n ${Object.values(inputs)}\n

`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"## ${currentElection.type === \"parliament\" ? \"Εθνικές Εκλογές\": \"Ευρωεκλογές\"} - ${new Intl.DateTimeFormat('el-GR', { year: \"numeric\", month: \"long\"}).format(new Date(currentElection.date))}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"$${descriptions[currentElection.id][settings.party_id]}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"b1 = bubbleChart(0.98 * window.innerWidth,600)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"---\n## Παράρτημα\n\nΟ κώδικας των γραφημάτων διατίθεται παρακάτω.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":605,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"valueExtent = d3.extent(electionData.map(k => k.eklogikes_perifereies.filter((e, j) => ![39, 42].includes(e.EP_ID))).flat().map(d => d.party.find(k => k.PARTY_ID === settings.party_id)[settings.mode]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"data = electionData.find(e => e.ekloges_id === currentElection.id).eklogikes_perifereies.filter((e, j) => ![39, 42].includes(e.EP_ID)).map((d,i) => {\n return {id: d.EP_ID, value: d.party.find(k => k.PARTY_ID === settings.party_id)[settings.mode], size: scaleRadius(d.Gramenoi), color: d.WIN_ID === settings.party_id ? kommata.find(e => e.id === settings.party_id).color : \"#CCC\", input: d };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"party_percentage = electionData.find(e => e.ekloges_id === currentElection.id).epikrateia.party.find(d => d.PARTY_ID === settings.party_id)[settings.mode]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"b1.update(data, valueExtent, party_percentage)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"calculateTextLines = (text, lineHeight = 12) => {\n let words = (txt) => {\n const words = txt.split(/\\s+/g); // To hyphenate: /\\s+|(?<=-)/\n if (!words[words.length - 1]) words.pop();\n if (!words[0]) words.shift();\n return words;\n };\n let targetWidth = Math.sqrt(measureTextWidth(text.trim()) * lineHeight);\n let lines = (wrds) => {\n let line;\n let lineWidth0 = Infinity;\n const lines = [];\n for (let i = 0, n = wrds.length; i < n; ++i) {\n let lineText1 = (line ? line.text + \" \" : \"\") + wrds[i];\n let lineWidth1 = measureTextWidth(lineText1);\n if ((lineWidth0 + lineWidth1) / 2 < targetWidth) {\n line.width = lineWidth0 = lineWidth1;\n line.text = lineText1;\n } else {\n lineWidth0 = measureTextWidth(wrds[i]);\n line = {width: lineWidth0, text: wrds[i]};\n lines.push(line);\n }\n }\n return lines;\n }\n let response = lines(words(text));\n return lines(words(text)).map(d => {return {...d, length: response.length, lineHeight }});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"measureTextWidth = (text) => document.createElement(\"canvas\").getContext(\"2d\").measureText(text).width;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"textRadius = (lines, lineHeight = 12) => {\n let radius = 0;\n for (let i = 0, n = lines.length; i < n; ++i) {\n const dy = (Math.abs(i - n / 2 + 0.5) + 0.5) * lineHeight;\n const dx = lines[i].width / 2;\n radius = Math.max(radius, Math.sqrt(dx ** 2 + dy ** 2));\n }\n return radius;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"scaleRadius = d3.scale.sqrt().domain(d3.extent(electionData.find(e => e.ekloges_id === currentElection.id).eklogikes_perifereies.filter((e, j) => ![39, 42].includes(e.EP_ID)), d => d.Gramenoi)).range([10,60]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3@3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {electionTrail, kommata, electionData, phi, politeia, localeGR} from \"@infographeo/ekloges\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"