2d:null 2e:["$","title",null,{"children":"Εθνικές Εκλογές - Ιούλιος 2019 | infographeo | Observable"}] 33:T1e8c,partiesRow = { let width = 0.98 * window.innerWidth, height = 200; let boxWidth = 96, boxGap = 10, boxHeight = boxWidth * phi, vGap = (height - boxHeight) / 2 , padding = 10; let duration = 1000; let svg = d3.create("svg").attr("width", width).attr("height", height).style("background", "#FFF"); let container = svg.append("g").attr("class", "container"); let noDataText = svg .append("text") .attr("class", "no-data") .attr("transform", `translate(${[width/2, height/2]})`) .attr("text-anchor", "middle") .text("Δεν υπάρχουν διαθέσιμα αποτελέσματα"); return Object.assign(svg.node(), { update(partiesList) { let allParties = Object.assign([], partiesList); let outsideParties = allParties.filter(d => +d.Perc < 3); let parties = [...allParties.filter(d => +d.Perc >= 3)]; parties.length > 0 && parties.push({ PARTY_ID: 0, VOTES: d3.sum(outsideParties, d => +d.VOTES), Perc: d3.sum(outsideParties, d => +d.Perc), TakesEdres: 0, Edres: 0, EdresEpik: 0, seats: 0, Rank: parties.length, color: "#dae0e5", logo: `https://placehold.co/${boxWidth - 2 * padding}x${boxHeight / phi - padding}/FFF/1b1e23?text=Λοιπά&font=open-sans` }); parties.filter(d => d.PARTY_ID > 0).forEach(d => { d.color = kommata.find(e => e.id === d.PARTY_ID).color; d.logo = `https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/parties/${kommata.find(e => e.id === d.PARTY_ID).logo}` d.seats = d.Edres + d.EdresEpik; }); let margin = (width - parties.length * boxWidth - (parties.length - 1) * boxGap) / 2; svg.select("text.no-data").attr("opacity", parties.length > 0 ? 0 : 1); container .transition() .ease(d3.easeSinOut) .duration(duration) .attr("opacity", 1) .attr("transform", `translate(${[margin, vGap]})`); let boxes = container.selectAll("g.box-container").data(parties, d => d.PARTY_ID); boxes .enter() .append("g") .attr("class", "box-container") .attr("opacity", 0) .attr("transform", (d,i) => `translate(${[width, 0]})`) .transition() .ease(d3.easeSinOut) .duration(duration) .attr("opacity", 1) .attr("transform", (d,i) => `translate(${[i * (boxWidth + boxGap), 0]})`); boxes .transition() .ease(d3.easeSinOut) .duration(duration) .attr("opacity", 1) .attr("transform", (d,i) => `translate(${[i * (boxWidth + boxGap), 0]})`); boxes .exit() .transition() .ease(d3.easeSinOut) .duration(duration) .attr("opacity", 0) .attr("transform", (d,i) => `translate(${[width, 0]})`) .remove(); container.selectAll("g.box-container").selectAll("rect.box") .data(d => [d]) .enter() .append("rect") .attr("class", "box") .attr("width", boxWidth) .attr("height", boxHeight) .attr("stroke", (d,i) => d.color) .attr("fill", "#FFF") .attr("rx", 4) .attr("stroke-width", 2); container.selectAll("g.box-container").selectAll("image.party-image") .data(d => [d]) .enter() .append("image") .attr("class", "party-image") .attr("x", (d,i) => padding) .attr("y", (d,i) => padding) .attr("href", (d,i) => d.logo) .attr("width", boxWidth - 2 * padding) .attr("height", boxHeight / phi - padding); let percentageTexts = container.selectAll("g.box-container").selectAll("text.percentage").data(d => [d]); percentageTexts .enter() .append("text") .attr("class", "percentage") .attr("x", boxWidth / 2) .attr("y", boxHeight / phi + padding) .attr("text-anchor", "middle") .style("fill", "#333") .style("font", "0.9em var(--sans-serif)") .style("font-weight", "bold") .style("pointer-events", "none") .style("pointer", "default") .style("alignment-baseline", "middle") .attr("current", (d,i) => 0) .transition() .duration(duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.Perc / 100); return function(t) { return localeGR.format(".2%")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.Perc / 100); }) percentageTexts .transition() .duration(duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.Perc / 100); return function(t) { return localeGR.format(".2%")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.Perc / 100); }) let seatsTexts = container.selectAll("g.box-container").selectAll("text.seats").data(d => [d]); seatsTexts .enter() .append("text") .attr("class", "seats") .attr("x", boxWidth / 2) .attr("y", boxHeight -3 * padding) .attr("text-anchor", "middle") .style("opacity", d => d.TakesEdres > 0 ? 1 : 0) .style("fill", "#333") .style("font", "0.9em var(--sans-serif)") .style("pointer-events", "none") .style("pointer", "default") .attr("alignment-baseline", "middle") .text((d,i) => d.VOTES) .attr("current", (d,i) => 0) .transition() .duration(duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.seats); return function(t) { return localeGR.format(".0f")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.seats); }) seatsTexts .transition() .duration(duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.seats); return function(t) { return localeGR.format(".0f")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.seats); }) let votesTexts = container.selectAll("g.box-container").selectAll("text.votes").data(d => [d]); votesTexts .enter() .append("text") .attr("class", "votes") .attr("x", boxWidth / 2) .attr("y", boxHeight -1 * padding) .attr("text-anchor", "middle") .style("fill", "#333") .style("font", "0.9em var(--sans-serif)") .style("pointer-events", "none") .style("pointer", "default") .attr("alignment-baseline", "middle") .text((d,i) => d.VOTES) .attr("current", (d,i) => 0) .transition() .duration(duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.VOTES); return function(t) { return localeGR.format(",.6r")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.VOTES); }) votesTexts .transition() .duration(duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.VOTES); return function(t) { return localeGR.format(",.6r")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.VOTES); }) } }); }34:T2713,statisticsTrail = { let iwidth = 0.98 * window.innerWidth, iheight = 350, barHeight = 20, Duration = 1000, logoSize = 2 * 16; let margin = {top: 20, bottom: 20, left: 0, right: 30}; let svg = d3.create("svg").attr("width", iwidth).attr("height", iheight).style("background", "#FFF"); let container = svg.append("g").attr("class", "container").attr("transform", `translate(${[margin.left, margin.top]})`); let width = iwidth - margin.left - margin.right; let height = iheight - margin.top - margin.bottom; // Format the data (instead of using d3.stack()) and filter out 0 values: function groupDataFunc(data) { // use a scale to get percentage values let total = d3.sum(data, d => d.value); let xScale = d3.scaleLinear().domain([0, total]).range([0, width]); const percent = d3.scaleLinear() .domain([0, total]) .range([0, 1]) // filter out data that has zero values // also get mapping for next placement // (save having to format data for d3 stack) let cumulative = 0 const _data = data.map(d => { cumulative += d.value return { id: d.id, value: d.value, logo: d.logo, // want the cumulative to prior value (start of rect) cumulative: cumulative - d.value, label: d.label, percent: percent(d.value), width: xScale(d.value), xPos: xScale(cumulative - d.value), scale: xScale, fill: d.fill } }).filter(d => d.value > 0) return _data }; function renderRectangles(array) { let scaleRows = d3.scaleBand() .domain(array.map(d => d.id)) .range([0, height]) .paddingInner(1/phi) .paddingOuter(0) .align(1) .round(true); const root = d3.hierarchy({ children: array }, d => d.children); let subcontainer = container.selectAll("g.rects-container").data(root.children, d => d.data.id); subcontainer .enter() .append("g") .attr("class", "rects-container") .attr("transform", (d,i) => `translate(${[0, scaleRows(d.data.id)]})`); subcontainer .attr("transform", (d,i) => `translate(${[0, scaleRows(d.data.id)]})`); subcontainer .exit() .remove(); let subcontainerTitle = container.selectAll("g.rects-container").selectAll("text.mode-title").data(d => [d], d => d.data.id); subcontainerTitle .enter() .append("text") .attr("class", "mode-title") .style("font", "0.9em var(--sans-serif)") .attr("transform", (d,i) => `translate(${[-margin.left, -1 * barHeight / 2 + 4]})`) .text(d => d.data.id) subcontainerTitle .attr("transform", (d,i) => `translate(${[-margin.left, -1 * barHeight / 2 + 4 ]})`) .text(d => d.data.id) subcontainerTitle .exit() .remove(); let rects = container.selectAll("g.rects-container").selectAll("rect.bar").data(d => groupDataFunc(d.data.children), d => d.id); rects .enter() .append("rect") .attr("class", "bar") .attr("height", barHeight) .attr("fill", (d,i) => d.fill) .attr("stroke", (d,i) => "#FFF") .attr("stroke-width", phi/2) .attr("rx", 2 * phi) .transition() .duration(Duration) .attr("transform", (d,i) => `translate(${[d.xPos, 0]})`) .attr("width", (d,i) => d.width) rects .transition() .duration(Duration) .attr("transform", (d,i) => `translate(${[d.xPos, 0]})`) .attr("width", (d,i) => d.width) rects .exit() .transition() .duration(Duration) .attr("width", (d,i) => 0) .remove(); // add values on bar let barValues = container.selectAll("g.rects-container").selectAll("text.bar-value").data(d => groupDataFunc(d.data.children), d => d.id); barValues .enter() .append("text") .attr("class", "bar-value") .attr("fill", (d,i) => d3.rgb(d.fill).darker()) .style("font", "0.7em var(--sans-serif)") .attr("text-anchor", "middle") .attr("x", d => d.xPos + d.width/2) .attr("y", barHeight + 15) .attr("current", (d,i) => 0) .transition() .duration(Duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.value); return function(t) { return localeGR.format(",.0f")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.value); }); barValues .attr("x", d => d.xPos + d.width/2) .transition() .duration(Duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.value); return function(t) { return localeGR.format(",.0f")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.value); }); barValues .exit() .remove(); // add percents on bar let barPercents = container.selectAll("g.rects-container").selectAll("text.bar-percent").data(d => groupDataFunc(d.data.children), d => d.id); barPercents .enter() .append("text") .attr("class", "bar-percent") .attr("fill", (d,i) => "#FFF") .style("font", "0.7em var(--sans-serif)") .attr("text-anchor", "middle") .attr("x", d => d.xPos + d.width/2) .attr("y", (barHeight / 2) + 4) .attr("current", (d,i) => 0) .transition() .duration(Duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.percent); return function(t) { return localeGR.format(".2%")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.percent); }); barPercents .attr("x", d => d.xPos + d.width/2) .transition() .duration(Duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.percent); return function(t) { return localeGR.format(".2%")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.percent); }); barPercents .exit() .remove(); // add values on bar let barTitles = container.selectAll("g.rects-container").selectAll("text.bar-title").data(d => groupDataFunc(d.data.children), d => d.id); barTitles .enter() .append("text") .attr("class", "bar-title") .attr("fill", (d,i) => d3.rgb(d.fill).darker()) .style("font", "0.9em var(--sans-serif)") .attr("text-anchor", "middle") .attr("x", d => d.xPos + d.width/2) .attr("y", -5) .attr("opacity", 0) .text((d,i) => d.id) .transition() .duration(Duration) .attr("opacity", (d,i) => d.logo ? 0 : 1); barTitles .attr("x", d => d.xPos + d.width/2) .transition() .duration(Duration) .text((d,i) => d.id) .attr("opacity", (d,i) => d.logo ? 0 : 1); barTitles .exit() .remove(); // add values on bar let barLogos = container.selectAll("g.rects-container").selectAll("image.party-logo").data(d => groupDataFunc(d.data.children), d => d.id); barLogos .enter() .append("image") .attr("class", "party-logo") .attr("x", d => d.xPos + d.width/2 - logoSize / 2) .attr("y", -logoSize / phi - 5) .attr("href", (d,i) => d.logo) .attr("width", logoSize) .attr("height", logoSize / phi) .attr("opacity", 0) .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("opacity", 1); barLogos .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("x", d => d.xPos + d.width/2 - logoSize / 2); barLogos .exit() .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("opacity", 0) .remove(); } return Object.assign(svg.node(), { update(electionData, ekloges_id, aggregation = "epikrateia", id = 1) { //render(elections, ekloges_id, mode) let mode2Id = {...settings.mode2Id, ...{epikrateia: "EPIK_ID"}}; let state = [electionData.find(d => d.ekloges_id === ekloges_id)[aggregation]].flat().find(d => d[mode2Id[aggregation]] === id); let voted = state.Akyra + state.Leyka + state.Egkyra; let parties = state.party.filter(e => +e.TakesEdres > 0).map(d => { return { id: kommata.find(k => k.id === d.PARTY_ID).short_name, value: d.VOTES, fill: kommata.find(k => k.id === d.PARTY_ID).color, logo: `https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/parties/${kommata.find(k => k.id === d.PARTY_ID).logo}` }}); parties.push({id: "Λοιπά", value: d3.sum(state.party.filter(e => +e.TakesEdres < 1), d => +d.VOTES), fill: "#CCC" }); let inparliamentVotes = parties; let inparliamentEdres = state.party.filter(e => +e.TakesEdres > 0).map(d => { return { id: kommata.find(k => k.id === d.PARTY_ID).short_name, value: (+d.Edres + d.EdresEpik), fill: kommata.find(k => k.id === d.PARTY_ID).color, logo: `https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/parties/${kommata.find(k => k.id === d.PARTY_ID).logo}` }}); let array = [ {id: "Ψηφοφορία", children: [{id: "Συμμετοχή", value: voted, fill: "steelblue"}, {id: "Αποχή", value: state.Gramenoi - voted, fill: "#CCC"}]}, {id: "Ψηφοδέλτια", children: [{id: "Έγκυρα", value: state.Egkyra, fill: "steelblue"}, {id: "Άκυρα / Λευκά", value: (state.Akyra + state.Leyka), fill: "#CCC"}]} ]; array.push({id: "Ποσοστά", children: inparliamentVotes}); array.push({id: "Έδρες", children: inparliamentEdres}); renderRectangles(array); } }) }35:Td08,legendList = { let currentParties = epikrateia.find(d => d.ekloges_id === currentElection.id).party.filter(d => +d.Perc >= 1).slice(0,10); let partiesSwatch = Swatches(d3.scaleOrdinal(currentParties.map(d => kommata.find(e => e.id === d.PARTY_ID).short_name_el), currentParties.map(d => kommata.find(e => e.id === d.PARTY_ID).color))); let administrationVals = electionData.find(e => e.ekloges_id === currentElection.id)["koinotites"]; let quantileApoxi = d3.scaleQuantile() .domain((administrationVals.map(e => (e.Gramenoi - (e.Egkyra + e.Akyra + e.Leyka)) / e.Gramenoi))) .range(colorsSpectrum); let quantileInvalids = d3.scaleQuantile() .domain((administrationVals.map(e => (e.Akyra + e.Leyka) / e.Gramenoi))) .range(colorsSpectrum) let ilist = [ {id: "first-party", title: "Πρώτο κόμμα", scale: (level) => scalePartyRank(level,0), legend: partiesSwatch}, {id: "second-party", title: "Δεύτερο κόμμα", scale: (level) => scalePartyRank(level,1), legend: partiesSwatch}, {id: "third-party", title: "Τρίτο κόμμα", scale: (level) => scalePartyRank(level,2), legend: partiesSwatch}, {id: "fourth-party", title: "Τέταρτο κόμμα", scale: (level) => scalePartyRank(level,3), legend: partiesSwatch}, {id: "fifth-party", title: "Πέμπτο κόμμα", scale: (level) => scalePartyRank(level,4), legend: partiesSwatch}, {id: "sixth-party", title: "Έκτο κόμμα", scale: (level) => scalePartyRank(level,5), legend: partiesSwatch}, {id: "absence", title: "Ποσοστό Αποχής", scale: (level) => scaleParticipation(level), legend: Legend(quantileApoxi, {title: "Ποσοστό", tickFormat: ".2%"})}, {id: "invalids", title: "Ποσοστό Λευκών/Άκυρων", scale: (level) => scaleInvalids(level), legend: Legend(quantileInvalids, {title: "Ποσοστό Λευκών/Άκυρων", tickFormat: ".2%"})} ]; currentParties.map(d => d.PARTY_ID).forEach((id) => { let administrationVals = electionData.find(e => e.ekloges_id === currentElection.id)["koinotites"]; let quantile = d3.scaleQuantile() .domain((administrationVals.map(d => (((+d.party.find(e => e.PARTY_ID === id)?.VOTES / d.Egkyra ?? 0)))))) .range(colorsSpectrum); ilist.push({id: `pososta-${id}`, title: `Ποσοστό ${kommata.find(e => e.id === id).short_name_el}`, scale: (level) => scalePartyPercentage(level, id), legend: Legend(quantile, {title: "Ποσοστό επί των εγκύρων", tickFormat: ".2%"})}); }); [[2,4], [4, 106]].forEach((pair) => { let administrationVals = electionData.find(e => e.ekloges_id === currentElection.id)["koinotites"]; let quantile = d3.scaleQuantile() .domain((administrationVals.map(d => ((((+d.party.find(e => e.PARTY_ID === pair[0])?.VOTES - d.party.find(e => e.PARTY_ID === pair[1])?.VOTES) / d.Egkyra ?? 0)))))) .range(colorsSpectrum); ilist.push({id: `diff-pososta-${pair[0]}-${pair[1]}`, title: `Ποσοστιαία Διαφορά ${kommata.find(e => e.id === pair[0]).short_name_el} - ${kommata.find(e => e.id === pair[1]).short_name_el}`, scale: (level) => scaleDiffPartyPercentage(level, pair[0], pair[1]), legend: Legend(quantile, {title: "Ποσοστό επί των εγκύρων", tickFormat: ".2%"})}); }) return ilist; }36:T3085,function choropleth(width = 0.98 * window.innerWidth, height = width / phi, topofilter = (e,j) => e.properties.epikrateia_id === 1) { let Duration = 450; let mapGap = 10; let margin = {gap: 10}; let tooltipFontCoeff = 1.3; let tooltipLineHeight = 11; let tooltipWidth = 50; let tooltipHeight = 30; let toolTipObject = {pos: [0,0], text: "", listings: [], visible: false}; let svg = d3.create("svg").attr("width", width).attr("height", height).style("background", "#FFF"); let topo = topojson.feature(districtsTopojson, districtsTopojson.objects.collection); topo.features = topo.features.filter((d,i) => topofilter(d,i)); let projection = d3.geoMercator().fitExtent([[mapGap, mapGap], [width - mapGap, height - mapGap]],topo); // Create a path generator. let shapeGenerator = d3.geoPath().projection(projection); // Calculate the bounds based on the topojson let landBoundary = topojson.merge(districtsTopojson, districtsTopojson.objects.collection.geometries.filter(topofilter)); let idd = Math.random(); let defs = svg.append("defs"); defs .append("filter") .attr("id", `blur-${idd}`) .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", 5); svg.append("use") .attr("class", "land-glow") .style("fill-opacity", 0.2) .style("filter", `url(#blur-${idd})`) .attr("xlink:href", `#land-${idd}`); svg.append("use") .attr("class", "land-fill") .style("stroke", "#777") .style("fill", "whitesmoke") .attr("xlink:href", `#land-${idd}`); let shapesContainer = svg.append("g").attr("class", "shapes-container"); function renderTooltip(obj) { let { header } = obj.text; let text = header; let textWith = 2 * margin.gap + tooltipFontCoeff * d3.max([header, obj.listings.map(e => `${e.value} ${e.title}`)].flat(), d => measureTextWidth(d)); let boxHeight = 3 * margin.gap + (1.5 * obj.listings.length + 1.5) * tooltipLineHeight; let diffX = d3.max([0, obj.pos[0] + textWith - width + margin.gap]); let diffY = d3.max([0, obj.pos[1] + boxHeight - height]); 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] - diffX, d.pos[1] - diffY]})`) .style("opacity", (d,i) => d.visible ? 1 : 0); tooltipGroup .attr("transform", (d,i) => `translate(${[d.pos[0] - diffX, d.pos[1] - diffY]})`) .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) => textWith) .attr("height", 3 * margin.gap + (1.5 * obj.listings.length + 1.5) * tooltipLineHeight) .attr("fill", "rgb(97, 97, 97)") .attr("fill-opacity", 0.67) tooltipBg .attr("width", (d,i) => textWith) .attr("height", 3 * margin.gap + (1.5 * obj.listings.length + 1.5) * tooltipLineHeight); tooltipBg .exit() .remove(); let tooltipHeaderText = svg.selectAll("g.tooltip").selectAll("text.tooltip-header-text").data(d => [d]); tooltipHeaderText .enter() .append("text") .attr("class", "tooltip-header-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)") .style("font-weight", "bold") .text(d => d.text.header); tooltipHeaderText .text(d => d.text.header); tooltipHeaderText .exit() .remove(); let tooltipHeaderSeparator = svg.selectAll("g.tooltip").selectAll("line.separator").data(d => [d]); tooltipHeaderSeparator .enter() .append("line") .attr("class", "separator") .style("stroke", "#FFF") .style("stroke-width", 1.5) .attr("y1", margin.gap + tooltipLineHeight) .attr("y2", margin.gap + tooltipLineHeight) .attr("x1", margin.gap) .attr("x2", textWith - 2 * margin.gap); tooltipHeaderSeparator .attr("x2", textWith); tooltipHeaderSeparator .exit() .remove(); let tooltipListings = svg.selectAll("g.tooltip").selectAll("text.tooltip-listing").data(d => d.listings, d => d.id); tooltipListings .enter() .append("text") .attr("class", "tooltip-listing") .attr("transform", (d,i) => `translate(${[0, margin.gap + (1.5 * i + 1.5) * tooltipLineHeight]})`) .attr("dy", margin.gap) .attr("dx", margin.gap) .attr("text-anchor", "start") .style("fill", "#FFF") .style("font", "10px/1.5 var(--sans-serif)") .style("font-weight", "bold") .text(d => `${d.value} ${d.title}`); tooltipListings .attr("transform", (d,i) => `translate(${[0, margin.gap + (1.5 * i + 1.5) * tooltipLineHeight]})`) .text(d => `${d.value} ${d.title}`); tooltipListings .exit() .remove(); } return Object.assign(svg.node(), { update(listingsScale, colorScale, aggregationMode = "eklogikes_perifereies", administration = politeia, agggegationMapping = settings.mapping) { let currentZoomScale = 1; let hoveredId = null; let includedAdministrationIds = [...new Set(topo.features.filter((d,i) => topofilter(d,i)).map(d => d.properties[agggegationMapping[aggregationMode]]))]; let filteredAdministrations = administration[aggregationMode].filter((d,i) => includedAdministrationIds.includes(d.id)); toolTipObject = {pos: [0,0], text: {header: ""}, listings: [], visible: false}; let landPath = defs.selectAll("path.land").data([landBoundary]); landPath .enter() .append("path") .attr("class", "land") .style("stroke", "rgb(204, 204, 204)") .style("opacity", 1) .style("stroke-width", 0.85 / currentZoomScale) .attr("id", `land-${idd}`) .attr("d", shapeGenerator); landPath.attr("d", shapeGenerator); landPath .exit() .remove(); let shapes = shapesContainer .selectAll(".shape") .data(filteredAdministrations, (d, i) => d.id); shapes .enter() .append("path") .attr("class", "shape") .attr("data-id", (d,i) => d.id) .attr("opacity", 0) .each((d, i) => { let geometries = districtsTopojson.objects.collection.geometries.filter( (e) => e.properties[agggegationMapping[aggregationMode]] === d.id ); d.order = geometries.length > 0 ? geometries[0].properties.order : i; d.border = topojson.merge(districtsTopojson, geometries); d.centroid = shapeGenerator.centroid(d.border); }) .attr("stroke-width", 0.5 / currentZoomScale) .attr("stroke", "whitesmoke") .attr("fill", "white") .attr("strokeLinecap", "round") .attr("strokeLinejoin", "round") .style("cursor", "pointer") .attr("d", (d, i) => shapeGenerator(d.border)) .on("mouseover", function(e,d) { hoveredId = d.id; d3.select(this) .attr("stroke", "#ff7f0e") .attr("stroke-width", 2 / currentZoomScale) .raise(); toolTipObject.visible = true; toolTipObject.text = {header: d.title_el}; toolTipObject.listings = listingsScale(d.id).data.party.slice(0,10).map(k => { return {id: k.PARTY_ID, value: localeGR.format(".2%")(+k.VOTES/listingsScale(d.id).data.Egkyra), title: kommata.find(m => m.id === k.PARTY_ID)?.short_name_el }}); renderTooltip(toolTipObject); }).on("mousemove", function(e, d) { toolTipObject.visible = true; hoveredId = d.id; d3.select(this) .attr("stroke", "#ff7f0e") .attr("stroke-width", 2 / currentZoomScale) .raise(); toolTipObject.pos = [e.offsetX + 5, e.offsetY - tooltipLineHeight]; toolTipObject.text = {header: d.title_el}; toolTipObject.listings = listingsScale(d.id).data.party.slice(0,10).map(k => { return {id: k.PARTY_ID, value: localeGR.format(".2%")(+k.VOTES/listingsScale(d.id).data.Egkyra), title: kommata.find(m => m.id === k.PARTY_ID)?.short_name_el }}); renderTooltip(toolTipObject); }).on("mouseout", function(e, d) { hoveredId = null; d3.select(this).attr("stroke", "whitesmoke").attr("stroke-width", 0.5 / currentZoomScale); toolTipObject.visible = false; toolTipObject.listings = []; renderTooltip(toolTipObject); }) .transition() .duration(Duration) .ease(d3.easeSinInOut) .delay((d, i) => { return (i + d.order) / 100.0; }) .attr("d", (d, i) => shapeGenerator(d.border)) .attr("opacity", 1) .attr("fill", (d, i) => listingsScale(d.id).data.party[0].VOTES > 0 ? colorScale(d.id) || "white" : "#CCC"); shapes .attr("stroke-width", 0.5 / currentZoomScale) .on("mouseover", function(e,d) { hoveredId = d.id; d3.select(this) .attr("stroke", "#ff7f0e") .attr("stroke-width", 2 / currentZoomScale) .raise(); toolTipObject.visible = true; toolTipObject.text = {header: d.title_el}; toolTipObject.listings = listingsScale(d.id).data.party.slice(0,10).map(k => { return {id: k.PARTY_ID, value: localeGR.format(".2%")(+k.VOTES/listingsScale(d.id).data.Egkyra), title: kommata.find(m => m.id === k.PARTY_ID)?.short_name_el }}); renderTooltip(toolTipObject); }).on("mousemove", function(e, d) { toolTipObject.visible = true; hoveredId = d.id; d3.select(this) .attr("stroke", "#ff7f0e") .attr("stroke-width", 2 / currentZoomScale) .raise(); toolTipObject.pos = [e.offsetX + 5, e.offsetY - tooltipLineHeight]; toolTipObject.text = {header: d.title_el}; toolTipObject.listings = listingsScale(d.id).data.party.slice(0,10).map(k => { return {id: k.PARTY_ID, value: localeGR.format(".2%")(+k.VOTES/listingsScale(d.id).data.Egkyra), title: kommata.find(m => m.id === k.PARTY_ID)?.short_name_el }}); renderTooltip(toolTipObject); }).on("mouseout", function(e, d) { hoveredId = null; d3.select(this).attr("stroke", "whitesmoke").attr("stroke-width", 0.5 / currentZoomScale); toolTipObject.visible = false; toolTipObject.listings = []; renderTooltip(toolTipObject); }) .transition() .duration(Duration) .ease(d3.easeSinInOut) .delay((d, i) => { return (i + d.order) / 100.0; }) .attr("d", (d, i) => shapeGenerator(d.border)) .attr("opacity", 1) .attr("fill", (d, i) => listingsScale(d.id).data.party[0].VOTES > 0 ? colorScale(d.id) || "white" : "#CCC"); shapes .exit() .transition() .duration(Duration) .ease(d3.easeSinInOut) .delay((d, i) => { return (i + d.order) / 100.0; }) .attr("opacity", 0) .remove(); let zoom = d3.zoom() .scaleExtent([1,8]) .translateExtent([[0,0],[width, height]]) .on("zoom", (e) => { currentZoomScale = e.transform.k shapesContainer.attr("transform", e.transform); shapesContainer.selectAll("path.shape").attr("stroke-width", 0.5 / currentZoomScale); shapesContainer.selectAll("path.shape").filter(k => k.id === hoveredId).attr("stroke-width", 2 / currentZoomScale); svg.select("path.land").attr("transform", e.transform).style("stroke-width", 0.85 / currentZoomScale); } ); svg.call(zoom); } }); }37:T1c11,electionTrail = () => { let width = 0.98 * window.innerWidth, height = 150, radius = 16, barHeight = 6.6, logoSize = 2 * radius; let svg = d3.create("svg").attr("width", width).attr("height", height).style("background", "#FFF"); let container = svg.append("g").attr("class", "legend-board").attr("transform", `translate(${[0, height/2]})`); let electionData = JSON.parse(JSON.stringify(ekloges)); let Duration = 1000; let current = electionData[0]; let highlighted = current; svg.node().value = current; svg.node().dispatchEvent(new Event("input", {bubbles: true})); let defs = svg.append("defs"); defs .append("filter") .attr("id", "blur") .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", 0); let scale = d3.scalePoint() .domain(ekloges.map(d => d.id)) .range([0, width]) .padding(0.6); container.append("rect") .attr("x", 1.01 * width) .attr("y", - barHeight / 2) .attr("width", width) .attr("height", barHeight) .attr("fill", "whitesmoke") .attr("stroke", d3.rgb("whitesmoke").darker(0.1)) .attr("rx", barHeight / 2) .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("x", scale(ekloges[0].id) - scale.step() / 3); function render(data) { let groups = svg.select("g.legend-board").selectAll("g.election").data(data, d => d.id); groups .enter() .append("g") .attr("class", "election") .attr("transform", (d,i) => `translate(${[width, 0]})`) .style("pointer-events", "bounding-box") .style("cursor", "pointer") .on("click", function(e,d) { current = d; svg.node().value = d; svg.node().dispatchEvent(new Event("input", {bubbles: true})); render(electionData); }) .on("mouseover", function(e,d) { highlighted = d; render(electionData); }) .on("mouseout", function(e,d) { highlighted = null; render(electionData); }) .transition() .duration(Duration) .ease(d3.easeSinInOut) .delay((d,i) => 100 * i) .attr("transform", (d,i) => `translate(${[scale(d.id), 0]})`); let circlesBorder = svg.select("g.legend-board").selectAll("g.election").selectAll("circle.border").data(d => [d]); circlesBorder .enter() .append("circle") .attr("class", "border") .attr("r", 1.1 * radius) .attr("fill", (d,i) => "#FFF") .attr("stroke", (d,i) => "#FFF") .attr("opacity", 0) .attr("stroke-width", 12) .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("opacity", 1); let circlesBg = svg.select("g.legend-board").selectAll("g.election").selectAll("circle.bg").data(d => [d]); circlesBg .enter() .append("circle") .attr("class", "bg") .attr("r", 1.1 * radius) .attr("fill", (d,i) => "#FFF") .attr("stroke", (d,i) => d.id === current.id ? "#FF7F0E" : highlighted && d.id === highlighted.id ? "#333" : d3.rgb("whitesmoke").darker()) .attr("opacity", 1) .attr("stroke-width", 3) .attr("opacity", 0) .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("opacity", 1); circlesBg .attr("stroke", (d,i) => d.id === current.id ? "#FF7F0E" : highlighted && d.id === highlighted.id ? "#333" : d3.rgb("whitesmoke").darker()); let textDates = svg.select("g.legend-board").selectAll("g.election").selectAll("text.date").data(d => [d]); textDates .enter() .append("text") .attr("class", "date") .attr("dy", - 1.618 * radius) .attr("text-anchor", "middle") .attr("fill", (d,i) => d.id === current.id ? "#FF7F0E" : "#333") .style("font", "0.9em var(--sans-serif)") .style("font-weight", (d,i) => d.id === current.id || d.id === highlighted.id ? "bold" : "normal") .text((d,i) => new Intl.DateTimeFormat('el-GR', { year: "numeric", month: "long"}).format(new Date(d.date))) .attr("opacity", 0) .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("opacity", 1); textDates .attr("fill", (d,i) => d.id === current.id ? "#FF7F0E" : "#333") .style("font-weight", (d,i) => d.id === current.id || highlighted && d.id === highlighted.id ? "bold" : "normal"); svg.select("g.legend-board").selectAll("g.election").selectAll("image.election-type") .data(d => [d]) .enter() .append("image") .attr("class", "election-type") .attr("x", (d,i) => - radius * Math.cos(Math.PI/4)) .attr("y", (d,i) => - radius * Math.cos(Math.PI/4)) .attr("href", (d,i) => d.type === "parliament" ? greece_url : europe_url) .attr("width", 2 * radius * Math.cos(Math.PI/4)) .attr("height", 2 * radius * Math.cos(Math.PI/4)) .attr("preserveAspectRatio", "xMidYMid slice") .attr("opacity", 0) .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("opacity", 1); let winPartyImages = svg.select("g.legend-board").selectAll("g.election").selectAll("image.win-party").data(d => [d]); winPartyImages .enter() .filter((d) => epikrateia.find(y => y.ekloges_id === d.id).WIN_ID > 0) .append("image") .attr("class", "win-party") .attr("x", (d,i) => - logoSize / 2) .attr("y", (d,i) => 2 * radius * Math.cos(Math.PI/4)) .attr("href", (d,i) => `https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/parties/p${epikrateia.find(y => y.ekloges_id === d.id).WIN_ID}.svg`) .attr("width", logoSize) .attr("height", logoSize / phi) .attr("preserveAspectRatio", "xMidYMid slice") .attr("opacity", 0) .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("opacity", 1); winPartyImages .attr("href", (d,i) => `https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/parties/p${epikrateia.find(y => y.ekloges_id === d.id).WIN_ID}.svg`); winPartyImages .exit() .remove(); let winPartyPerc = svg.select("g.legend-board").selectAll("g.election").selectAll("text.perc").data(d => [d]); winPartyPerc .enter() .filter((d) => epikrateia.find(y => y.ekloges_id === d.id).WIN_ID > 0) .append("text") .attr("class", "perc") .attr("y", 2 * radius * Math.cos(Math.PI/4) + logoSize / phi) .attr("dy", (2 * radius * Math.cos(Math.PI/4) + logoSize / phi) / phi) .attr("text-anchor", "middle") .attr("fill", "#333") .style("font", "0.9em var(--sans-serif)") .style("pointer-events", "none") .style("pointer", "default") .text((d,i) => localeGR.format(".2%")(+epikrateia.find(y => y.ekloges_id === d.id).party[0].Perc/100)) .attr("opacity", 0) .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("opacity", 1); winPartyPerc.text((d,i) => localeGR.format(".2%")(+epikrateia.find(y => y.ekloges_id === d.id).party[0].Perc/100)); winPartyPerc .exit() .remove(); } render(electionData); return svg.node(); }38:T2714,statisticsTrailGraph = (iwidth = 0.98 * window.innerWidth, iheight = 350) => { let barHeight = 20, Duration = 1000, logoSize = 2 * 16; let margin = {top: 20, bottom: 20, left: 100, right: 30}; let svg = d3.create("svg").attr("width", iwidth).attr("height", iheight).style("background", "#FFF"); let container = svg.append("g").attr("class", "container").attr("transform", `translate(${[margin.left, margin.top]})`); let width = iwidth - margin.left - margin.right; let height = iheight - margin.top - margin.bottom; // Format the data (instead of using d3.stack()) and filter out 0 values: function groupDataFunc(data) { // use a scale to get percentage values let total = d3.sum(data, d => d.value); let xScale = d3.scaleLinear().domain([0, total]).range([0, width]); const percent = d3.scaleLinear() .domain([0, total]) .range([0, 1]) // filter out data that has zero values // also get mapping for next placement // (save having to format data for d3 stack) let cumulative = 0 const _data = data.map(d => { cumulative += d.value return { id: d.id, value: d.value, logo: d.logo, // want the cumulative to prior value (start of rect) cumulative: cumulative - d.value, label: d.label, percent: percent(d.value), width: xScale(d.value), xPos: xScale(cumulative - d.value), scale: xScale, fill: d.fill } }).filter(d => d.value > 0) return _data }; function renderRectangles(array) { let scaleRows = d3.scaleBand() .domain(array.map(d => d.id)) .range([0, height]) .paddingInner(1/phi) .paddingOuter(0) .align(1) .round(true); const root = d3.hierarchy({ children: array }, d => d.children); let subcontainer = container.selectAll("g.rects-container").data(root.children, d => d.data.id); subcontainer .enter() .append("g") .attr("class", "rects-container") .attr("transform", (d,i) => `translate(${[0, scaleRows(d.data.id)]})`); subcontainer .attr("transform", (d,i) => `translate(${[0, scaleRows(d.data.id)]})`); subcontainer .exit() .remove(); let subcontainerTitle = container.selectAll("g.rects-container").selectAll("text.mode-title").data(d => [d], d => d.data.id); subcontainerTitle .enter() .append("text") .attr("class", "mode-title") .style("font", "0.9em var(--sans-serif)") .attr("transform", (d,i) => `translate(${[-margin.left, barHeight / 2 + 4]})`) .text(d => d.data.id) subcontainerTitle .attr("transform", (d,i) => `translate(${[-margin.left, barHeight / 2 + 4 ]})`) .text(d => d.data.id) subcontainerTitle .exit() .remove(); let rects = container.selectAll("g.rects-container").selectAll("rect.bar").data(d => groupDataFunc(d.data.children), d => d.id); rects .enter() .append("rect") .attr("class", "bar") .attr("height", barHeight) .attr("fill", (d,i) => d.fill) .attr("stroke", (d,i) => "#FFF") .attr("stroke-width", phi/2) .attr("rx", 2 * phi) .transition() .duration(Duration) .attr("transform", (d,i) => `translate(${[d.xPos, 0]})`) .attr("width", (d,i) => d.width) rects .transition() .duration(Duration) .attr("transform", (d,i) => `translate(${[d.xPos, 0]})`) .attr("width", (d,i) => d.width) rects .exit() .transition() .duration(Duration) .attr("width", (d,i) => 0) .remove(); // add values on bar let barValues = container.selectAll("g.rects-container").selectAll("text.bar-value").data(d => groupDataFunc(d.data.children), d => d.id); barValues .enter() .append("text") .attr("class", "bar-value") .attr("fill", (d,i) => d3.rgb(d.fill).darker()) .style("font", "0.7em var(--sans-serif)") .attr("text-anchor", "middle") .attr("x", d => d.xPos + d.width/2) .attr("y", barHeight + 15) .attr("current", (d,i) => 0) .transition() .duration(Duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.value); return function(t) { return localeGR.format(",.0f")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.value); }); barValues .attr("x", d => d.xPos + d.width/2) .transition() .duration(Duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.value); return function(t) { return localeGR.format(",.0f")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.value); }); barValues .exit() .remove(); // add percents on bar let barPercents = container.selectAll("g.rects-container").selectAll("text.bar-percent").data(d => groupDataFunc(d.data.children), d => d.id); barPercents .enter() .append("text") .attr("class", "bar-percent") .attr("fill", (d,i) => "#FFF") .style("font", "0.7em var(--sans-serif)") .attr("text-anchor", "middle") .attr("x", d => d.xPos + d.width/2) .attr("y", (barHeight / 2) + 4) .attr("current", (d,i) => 0) .transition() .duration(Duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.percent); return function(t) { return localeGR.format(".2%")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.percent); }); barPercents .attr("x", d => d.xPos + d.width/2) .transition() .duration(Duration) .textTween(function(d) { const i = d3.interpolate(+d3.select(this).attr("current") || 0, +d.percent); return function(t) { return localeGR.format(".2%")(this._current = i(t)); }; }).on("end", function(d,i) { d3.select(this).attr("current", (d,i) => +d.percent); }); barPercents .exit() .remove(); // add values on bar let barTitles = container.selectAll("g.rects-container").selectAll("text.bar-title").data(d => groupDataFunc(d.data.children), d => d.id); barTitles .enter() .append("text") .attr("class", "bar-title") .attr("fill", (d,i) => d3.rgb(d.fill).darker()) .style("font", "0.9em var(--sans-serif)") .attr("text-anchor", "middle") .attr("x", d => d.xPos + d.width/2) .attr("y", -5) .attr("opacity", 0) .text((d,i) => d.id) .transition() .duration(Duration) .attr("opacity", (d,i) => d.logo ? 0 : 1); barTitles .attr("x", d => d.xPos + d.width/2) .transition() .duration(Duration) .text((d,i) => d.id) .attr("opacity", (d,i) => d.logo ? 0 : 1); barTitles .exit() .remove(); // add values on bar let barLogos = container.selectAll("g.rects-container").selectAll("image.party-logo").data(d => groupDataFunc(d.data.children), d => d.id); barLogos .enter() .append("image") .attr("class", "party-logo") .attr("x", d => d.xPos + d.width/2 - logoSize / 2) .attr("y", -logoSize / phi - 5) .attr("href", (d,i) => d.logo) .attr("width", logoSize) .attr("height", logoSize / phi) .attr("opacity", 0) .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("opacity", 1); barLogos .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("x", d => d.xPos + d.width/2 - logoSize / 2); barLogos .exit() .transition() .duration(Duration) .ease(d3.easeSinInOut) .attr("opacity", 0) .remove(); } return Object.assign(svg.node(), { update(electionData, ekloges_id, aggregation = "epikrateia", id = 1) { //render(elections, ekloges_id, mode) let mode2Id = {...settings.mode2Id, ...{epikrateia: "EPIK_ID"}}; let state = [electionData.find(d => d.ekloges_id === ekloges_id)[aggregation]].flat().find(d => d[mode2Id[aggregation]] === id); let voted = state.Akyra + state.Leyka + state.Egkyra; let parties = state.party.filter(e => +e.TakesEdres > 0).map(d => { return { id: kommata.find(k => k.id === d.PARTY_ID).short_name, value: d.VOTES, fill: kommata.find(k => k.id === d.PARTY_ID).color, logo: `https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/parties/${kommata.find(k => k.id === d.PARTY_ID).logo}` }}); parties.push({id: "Λοιπά", value: d3.sum(state.party.filter(e => +e.TakesEdres < 1), d => +d.VOTES), fill: "#CCC" }); let inparliamentVotes = parties; let inparliamentEdres = state.party.filter(e => +e.TakesEdres > 0).map(d => { return { id: kommata.find(k => k.id === d.PARTY_ID).short_name, value: (+d.Edres + d.EdresEpik), fill: kommata.find(k => k.id === d.PARTY_ID).color, logo: `https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/parties/${kommata.find(k => k.id === d.PARTY_ID).logo}` }}); let array = [ {id: "Ψηφοφορία", children: [{id: "Συμμετοχή", value: voted, fill: "steelblue"}, {id: "Αποχή", value: state.Gramenoi - voted, fill: "#CCC"}]}, {id: "Ψηφοδέλτια", children: [{id: "Έγκυρα", value: state.Egkyra, fill: "steelblue"}, {id: "Άκυρα / Λευκά", value: (state.Akyra + state.Leyka), fill: "#CCC"}]} ]; array.push({id: "Ποσοστά", children: inparliamentVotes}); array.push({id: "Έδρες", children: inparliamentEdres}); renderRectangles(array); } }) }39:[{"id":"f9fb5937df25d23e9f8c999059ac4e66295822433274aa27d0a08c0d67d442f8f8adc137beb1493eeaec7402d0ed0930cb23a673466ab2a9ebff039fc48dc90f","href":"https://static.observableusercontent.com/files/f9fb5937df25d23e9f8c999059ac4e66295822433274aa27d0a08c0d67d442f8f8adc137beb1493eeaec7402d0ed0930cb23a673466ab2a9ebff039fc48dc90f","name":"greece-flag.png","type":"image/png","lastModified":1683276270148.731,"size":20199},{"id":"6a88c69dd1f145e6133121161ced03635f6a9b4b7e1f35c312b65fbb27eaf4caec07d0c460126b0b762e7f093f5a6ec4296471f87617c212172bd7aca0ec1750","href":"https://static.observableusercontent.com/files/6a88c69dd1f145e6133121161ced03635f6a9b4b7e1f35c312b65fbb27eaf4caec07d0c460126b0b762e7f093f5a6ec4296471f87617c212172bd7aca0ec1750","name":"european-union-flag.png","type":"image/png","lastModified":1683276270230.261,"size":27956}] 31:{"id":"135df92f6d4eea2c","slug":"ekloges","title":"Εθνικές Εκλογές - Ιούλιος 2019","thumbnail":"af03551590593cd0b840f6740c5c298201b7a9d469e99d73994011926117e5ce","access_level":"public","create_time":"$D2023-04-22T19:53:43.177Z","update_time":"$D2024-06-09T17:08:41.943Z","view_time":null,"first_public_time":"$D2023-04-22T19:53:43.177Z","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":2071,"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":true,"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":"Εθνικές Εκλογές - Ιούλιος 2019","cells":[{"id":1135,"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":1778,"value":"Τελευταία ενημέρωση: ${electionData.find(e => e.ekloges_id === currentElection.id).epikrateia.Updated === 0 ? \"Δεν υπάρχουν διαθέσιμα δεδομένα στην επικράτεια\" : new Intl.DateTimeFormat('el-GR', { year: \"numeric\", month: \"long\", day: \"numeric\", hour: \"numeric\", minute: \"numeric\"}).format(new Date(electionData.find(e => e.ekloges_id === currentElection.id).epikrateia.Updated))}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1131,"value":"Επιλέξτε την εκλογική αναμέτρηση για να δείτε την επίδοση των κομματικών σχηματισμών και την προβολή τους σε επίπεδο επικράτειας, εκλογικών περιφερειών, καλλικρατικών δήμων και κοινοτήτων.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":710,"value":"viewof currentElection = electionTrail()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"### Συμμετοχή & Κατανομή στην Επικράτεια","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":820,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"Επιλέξτε με βάση ποιο πρότυπο θέλετε να χρωματίζεται ο εκλογικός χάρτης","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1449,"value":"viewof legendId = Inputs.select(new Map(legendList.map(d => [d.title, d.id])), {label: htl.html`Προβολή κατά`, value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1684,"value":"currentLegend = legendList.find(d => d.id === legendId).legend.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"---\n## Επικράτεια\n\nΤα παρακάτω γραφήματα απεικονίζουν τον εκλογικό χάρτη της χώρας σε επίπεδο εκλογικής περιφέρειας, δήμων, και κοινοτήτων με βάση την επιλογή προβολής","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":532,"value":"htl.html`\n

\n ${pleths.map((d,i) => htl.html`

${d.title} - ${legendList.find(d => d.id === legendId).title}

${currentLegend.cloneNode(true)}${d.graph}

`)}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"---\n## Αττική\n\nΤα παρακάτω γραφήματα απεικονίζουν τον χάρτη της Aττικής / Πειραιώς σε επίπεδο εκλογικής περιφέρειας, δήμων, και κοινοτήτων με βάση τον νικητή \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1145,"value":"htl.html`\n

\n ${attikiPleths.map((d,i) => htl.html`

${d.title} - ${legendList.find(d => d.id === legendId).title}

${currentLegend.cloneNode(true)}${d.graph}

`)}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1168,"value":"---\n## Θεσσαλονίκη\n\nΤα παρακάτω γραφήματα απεικονίζουν τον χάρτη της Θεσσαλονίκης σε επίπεδο εκλογικής περιφέρειας, δήμων, και κοινοτήτων με βάση τον νικητή ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1162,"value":"htl.html`\n

\n ${thessalonikiPleths.map((d,i) => htl.html`

${d.title} - ${legendList.find(d => d.id === legendId).title}

${currentLegend.cloneNode(true)}${d.graph}

`)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"---\n## Επικράτεια - Αναλυτικά\n\nΕπιλέξτε την εκλογική περιφέρεια για να δείτε την κατανομή σε επίπεδο Καλλικρατικών δήμων και Καποδιστριακών κοινοτήτων","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1352,"value":"viewof perifereiaId = Inputs.select(new Map(politeia.eklogikes_perifereies.map(d => [d.title_el, d.id])), {label: htl.html`Εκλογική Περιφέρεια`, value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"htl.html`${currentLegend.cloneNode(true)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"htl.html`\n

${politeia.eklogikes_perifereies.find(d => d.id === perifereiaId).title_el}
${legendList.find(d => d.id === legendId).title}

\n ${perifereiaPleths.map((d,i) => htl.html`

${d.title}

${d.graph}

`)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1411,"value":"---\n## Παράρτημα\n\nΟ κώδικας των γραφημάτων διατίθεται παρακάτω.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2023,"value":"refreshRate = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"perifereiaPleths = settings.modes.map(d => {\n let c = choropleth(0.98* window.innerWidth/3, 500, function(e,j) {return e.properties.eklogiki_perifereia_id === perifereiaId});\n return {graph: c, title: translations[d]};\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1429,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"scalePartyRank = (administrationLevel, rank = 0) => {\n let administration = electionData.find(e => e.ekloges_id === currentElection.id)[administrationLevel];\n return d3.scaleOrdinal()\n .domain(administration.map(e => e[settings.mode2Id[administrationLevel]]))\n .range(administration.map(e => kommata.find(k => k.id === e.party[rank].PARTY_ID)?.color || \"#CCC\"))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"scalePartyPercentage = (administrationLevel, party_id) => {\n let administration = electionData.find(e => e.ekloges_id === currentElection.id)[administrationLevel];\n let administrationVals = electionData.find(e => e.ekloges_id === currentElection.id)[\"koinotites\"];\n let quantile = d3.scaleQuantile()\n .domain((administrationVals.map(d => 100 * d.party.find(e => e.PARTY_ID === party_id).VOTES / +d.Egkyra)))\n .range(colorsSpectrum)\n return d3.scaleOrdinal()\n .domain(administration.map(e => e[settings.mode2Id[administrationLevel]]))\n .range(administration.map(e => quantile(100 * e.party.find(k => k.PARTY_ID === party_id).VOTES / e.Egkyra)))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1986,"value":"scaleDiffPartyPercentage = (administrationLevel, party_id1, party_id2) => {\n let administration = electionData.find(e => e.ekloges_id === currentElection.id)[administrationLevel];\n let administrationVals = electionData.find(e => e.ekloges_id === currentElection.id)[\"koinotites\"];\n let quantile = d3.scaleQuantile()\n .domain((administrationVals.map(d => 100 * (d.party.find(e => e.PARTY_ID === party_id1).VOTES - d.party.find(e => e.PARTY_ID === party_id2).VOTES) / +d.Egkyra)))\n .range(colorsSpectrum)\n return d3.scaleOrdinal()\n .domain(administration.map(e => e[settings.mode2Id[administrationLevel]]))\n .range(administration.map(e => quantile(100 * (e.party.find(k => k.PARTY_ID === party_id1).VOTES - e.party.find(k => k.PARTY_ID === party_id2).VOTES) / e.Egkyra)))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1485,"value":"scaleParticipation = (administrationLevel) => {\n let administration = electionData.find(e => e.ekloges_id === currentElection.id)[administrationLevel];\n let administrationVals = electionData.find(e => e.ekloges_id === currentElection.id)[\"koinotites\"];\n let quantile = d3.scaleQuantile()\n .domain((administrationVals.map(e => (e.Gramenoi - (e.Egkyra + e.Akyra + e.Leyka)) / e.Gramenoi)))\n .range(colorsSpectrum)\n return d3.scaleOrdinal()\n .domain(administration.map(e => e[settings.mode2Id[administrationLevel]]))\n .range(administration.map(e => quantile((e.Gramenoi - (e.Egkyra + e.Akyra + e.Leyka)) / e.Gramenoi)))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1554,"value":"scaleInvalids = (administrationLevel) => {\n let administration = electionData.find(e => e.ekloges_id === currentElection.id)[administrationLevel];\n let administrationVals = electionData.find(e => e.ekloges_id === currentElection.id)[\"koinotites\"];\n let quantile = d3.scaleQuantile()\n .domain((administrationVals.map(e => (e.Akyra + e.Leyka) / e.Gramenoi)))\n .range(colorsSpectrum)\n return d3.scaleOrdinal()\n .domain(administration.map(e => e[settings.mode2Id[administrationLevel]]))\n .range(administration.map(e => quantile((e.Akyra + e.Leyka) / e.Gramenoi)))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"settings.modes.forEach((d,i) => perifereiaPleths[i].graph.update(\n d3.scaleOrdinal().domain(electionData.find(e => e.ekloges_id === currentElection.id)[d].map(e => e[settings.mode2Id[d]])).range(electionData.find(e => e.ekloges_id === currentElection.id)[d].map(e => {return {id: e[settings.mode2Id[d]], data: e}})),\n legendList.find(k => k.id === legendId).scale(d)\n ,\n d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"statisticsTrail.update(electionData, currentElection.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"pleths = settings.modes.map(d => {\n let c = choropleth(window.innerWidth, window.innerWidth/phi);\n return {graph: c, title: translations[d]};\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"attikiPleths = settings.modes.map(d => {\n let c = choropleth(window.innerWidth, window.innerWidth / phi, function(e,j) {return e.properties.perifereia_id === 9 && ![9210, 9213, 9214, 9212, 9209].includes(e.properties.kallikratis_id)});\n return {graph: c, title: translations[d]};\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":" settings.modes.forEach((d,i) => pleths[i].graph.update(\n d3.scaleOrdinal().domain(electionData.find(e => e.ekloges_id === currentElection.id)[d].map(e => e[settings.mode2Id[d]])).range(electionData.find(e => e.ekloges_id === currentElection.id)[d].map(e => {return {id: e[settings.mode2Id[d]], data: e}})),\n legendList.find(k => k.id === legendId).scale(d),\n d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"thessalonikiPleths = settings.modes.map(d => {\n let c = choropleth(window.innerWidth, 500, function(e,j) {return e.properties.nomos_id === 54});\n return {graph: c, title: translations[d]};\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"settings.modes.forEach((d,i) => attikiPleths[i].graph.update(\n d3.scaleOrdinal().domain(electionData.find(e => e.ekloges_id === currentElection.id)[d].map(e => e[settings.mode2Id[d]])).range(electionData.find(e => e.ekloges_id === currentElection.id)[d].map(e => {return {id: e[settings.mode2Id[d]], data: e}})),\n legendList.find(k => k.id === legendId).scale(d),d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"settings.modes.forEach((d,i) => thessalonikiPleths[i].graph.update(\n d3.scaleOrdinal().domain(electionData.find(e => e.ekloges_id === currentElection.id)[d].map(e => e[settings.mode2Id[d]])).range(electionData.find(e => e.ekloges_id === currentElection.id)[d].map(e => {return {id: e[settings.mode2Id[d]], data: e}})),\n legendList.find(k => k.id === legendId).scale(d),d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"partiesRow.update(epikrateia.find(d => d.ekloges_id === currentElection.id).party)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"localeGR = d3.formatLocale({\n decimal: \",\",\n thousands: \".\",\n grouping: [3],\n currency: [\"\", \"\\u00a0€\"],\n minus: \"\\u2212\",\n percent: \"\\u202f%\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"ekloges = fetch(\"https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/ekloges.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"kommata = fetch(\"https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/kommata.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"epikrateia = electionData.map(d => {return {ekloges_id: d.ekloges_id, ...d.epikrateia}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"europe_url = FileAttachment(\"european-union-flag.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"greece_url = FileAttachment(\"greece-flag.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"phi = (1 + Math.sqrt(5)) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1823,"value":"electionData = [[{ekloges_id: ekloges[0].id, ...latestElection}], pastElections].flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1818,"value":"pastElections = {\n let past = ekloges.filter((d,i) => i > 0);\n const electionData = await Promise.all(\n past.map(d => `https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/${d.id}.json`).map(url => d3.json(url))\n );\n // any code that relies on data\n return electionData.map((d,i) => {return {ekloges_id: past[i].id, ...d}});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1789,"value":"latestElection = {\n let intervalSeconds = refreshRate * 60;\n while (true) {\n yield (await (await fetch(\n `https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/${ekloges[0].id}.json`, {cache: \"no-store\"}\n )).json());\n await Promises.delay(+intervalSeconds * 1000);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"districtsTopojson = fetch(\"https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/kapodistrias.topojson.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"settings = fetch(\"https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/settings.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"politeia = fetch(\"https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/politeia.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"translations = {\n return {\n \"eklogikes_perifereies\": \"Εκλογικές Περιφέρειες\",\n \"kallikratikoi_dhmoi\": \"Καλλικρατικοί Δήμοι\",\n \"koinotites\": \"Καποδιστριακές Κοινότητες\"\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"measureTextWidth = (text) => document.createElement(\"canvas\").getContext(\"2d\").measureText(text).width;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1493,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"colorsSpectrum = ['#f2f0f7','#cbc9e2','#9e9ac8','#6a51a3'];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1993,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"