2d:null 2e:["$","title",null,{"children":"Οι Εθνικές Εκλογές σε πραγματικό χρόνο | infographeo | Observable"}] 33:T3205,racingGraph = (iwidth = 0.98 * window.innerWidth, iheight = width/1.618, margins = {top: 40, bottom: 20, left: 60, right:50, gap: 10}) => { let width = iwidth - margins.left - margins.right; let height = iheight - margins.top - margins.bottom; let minSize = d3.min([width, height]); let bgColor = "#FEFEFE"; let Duration = 1000; 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", iwidth) .attr("height", iheight) .style("background", bgColor) .style("cursor", "pointer"); let headerTextContainer = svg.append("g").attr("class", "header-text-container").attr('transform', `translate(${margins.left}, ${margins.top/2})`); headerTextContainer .append("text") .attr("id", "header-text-current") .attr("fill", "#333") .attr("dy", 5) .style("font", "0.66em var(--sans-serif)") .text(""); let nodesContainer = svg.append("g").attr("class", "nodes-container").attr('transform', `translate(${margins.left}, ${margins.top})`); let previousLinesContainer = svg.append("g").attr("class", "previous-lines-container").attr('transform', `translate(${margins.left}, ${margins.top})`); return Object.assign(svg.node(), { update(t, currentData, previousData, mode = "percentages", xaxisMode = "ingestion") { let scaleEgkyra = d3.scaleLinear().domain(currentData.map(d => d.ingestion)).range(currentData.map(d => d.total_egkyra)); let previousLinesData = Object.keys(previousData[0][mode]).map((partyId) => { return { id: `partyIdPrevious${partyId}`, partyId: +partyId, color: kommata.find(e => e.id === +partyId).color, points: { ingestion: previousData.map(e => [e.ingestion, e[mode][partyId]]), updated: previousData.map(e => [new Date(e.updated), e[mode][partyId]]) } }; }); let currentLinesData = Object.keys(currentData[0][mode]).map((partyId) => { return { id: `partyIdCurrent${partyId}`, partyId: +partyId, color: kommata.find(e => e.id === +partyId).color, points: { ingestion: currentData.map(e => [e.ingestion, e[mode][partyId]]), updated: currentData.map(e => [new Date(e.updated), e[mode][partyId]]) } }; }); let xScale = { ingestion: d3.scaleLinear().domain([0,1]).range([0, width]), updated: d3.scaleTime().domain(d3.extent(currentData, d => new Date(d.updated))).range([0, width]).nice() }; let xScaleBefore = { ingestion: d3.scaleLinear().domain([0,1]).range([0, width]), updated: d3.scaleTime().domain(d3.extent(previousData, d => new Date(d.update))).range([0, width]).nice() }; let yScaleFormat = { "votes": ",.6r", "percentages": ".2%" } let xScaleFormat = { "updated": d3.timeFormat("%H:%M"), "ingestion": localeGR.format(".2%") } let yDomain = previousData.map(d => Object.values(d[mode])).flat(); let yScale = d3.scaleLinear() .domain(d3.extent(yDomain)) .range([height, 0]) .nice(); let line = d3.line() .x((d) => xScale[xaxisMode](d[0])) .y((d) => yScale(d[1])) .curve(d3.curveBasis); let lineBefore = d3.line() .x((d) => xScaleBefore[xaxisMode](d[0])) .y((d) => yScale(d[1])) .curve(d3.curveBasis); const xAxisGrid = d3.axisBottom(xScale[xaxisMode]).tickSize(-height).tickFormat('').ticks(20); const yAxisGrid = d3.axisLeft(yScale).tickSize(-width).tickFormat('').ticks(20); const xAxis = d3.axisBottom(xScale[xaxisMode]).tickFormat(xScaleFormat[xaxisMode]).ticks(20); const yAxis = d3.axisLeft(yScale).tickFormat(localeGR.format(yScaleFormat[mode])).ticks(20); // Create grids. nodesContainer.append('g') .attr('class', 'x axis-grid') .attr('transform', 'translate(0,' + height + ')') .call(xAxisGrid); nodesContainer.append('g') .attr('class', 'y axis-grid') .call(yAxisGrid); // Create axes. nodesContainer.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(xAxis); nodesContainer.append('g') .attr('class', 'y axis') .call(yAxis); let egkyraValue = { percentages: 0.03, votes: scaleEgkyra(t) * 0.03 } let borderline = nodesContainer .append("line") .attr("class", "borderline") .attr("stroke-width", 2) .attr("stroke", "#333") .attr("transform", `translate(${[0, yScale(egkyraValue[mode])]})`) .attr("stroke-dasharray",[5,5]) .attr("x2", width); let borderlineText = nodesContainer .append("text") .attr("class", "borderline") .attr("fill", "#333") .attr("dy", 3) .attr("dx", 3) .style("font", "0.66em var(--sans-serif)") .style("font-weight", "bold") .style("pointer-events", "none") .attr("transform", `translate(${[width, yScale(egkyraValue[mode])]})`) .text(localeGR.format(yScaleFormat["percentages"])(egkyraValue["percentages"])); let previousLinesCharts = previousLinesContainer.selectAll("path.line-before").data(previousLinesData, d => d.id); previousLinesCharts .enter() .append("path") .attr("id", (d) => `line-before-${d.id}`) .attr("class", "line-before") .attr("d", (d) => lineBefore(d.points[xaxisMode])) .attr("stroke-width", 2) .style("fill", "none") .attr("stroke", (d) => d.color) .attr("stroke-opacity", (d) => 0.33) .style("mix-blend-mode", "multiply") .attr("stroke-dasharray", function(d,i) { let length = d3.select(this).node().getTotalLength(); return `${length} ${length}`;}) .attr("stroke-dashoffset", function(d,i) {let length = d3.select(this).node().getTotalLength(); return (1 - t) * length;}) previousLinesCharts .attr("d", (d) => lineBefore(d.points[xaxisMode])) .attr("stroke", (d) => d.color) .attr("stroke-dasharray", function(d,i) { let length = d3.select(this).node().getTotalLength(); return `${length} ${length}`;}) .attr("stroke-dashoffset", function(d,i) {let length = d3.select(this).node().getTotalLength(); return (1 - t) * length;}) previousLinesCharts .exit() .remove(); let currentLinesCharts = nodesContainer.selectAll("path.line").data(currentLinesData, d => d.id); currentLinesCharts .enter() .append("path") .attr("id", (d) => `line-${d.id}`) .attr("class", "line") .attr("stroke-width", 2) .style("fill", "none") .attr("stroke", (d) => d.color) .style("mix-blend-mode", "multiply") .attr("stroke-dasharray", function(d,i) { let length = d3.select(this).node().getTotalLength(); return `${length} ${length}`;}) .attr("stroke-dashoffset", function(d,i) {let length = d3.select(this).node().getTotalLength(); return (1 - t) * length;}) .attr("d", (d) => line(d.points[xaxisMode])) currentLinesCharts .attr("d", (d) => line(d.points[xaxisMode])) .attr("stroke", (d) => d.color) .attr("stroke-dasharray", function(d,i) { let length = d3.select(this).node().getTotalLength(); return `${length} ${length}`;}) .attr("stroke-dashoffset", function(d,i) {let length = d3.select(this).node().getTotalLength(); return (1 - t) * length;}) currentLinesCharts .exit() .remove(); // let circleLeads = nodesContainer.selectAll("circle.lead").data(previousLinesData, d => d.id); // circleLeads // .enter() // .append("circle") // .attr("class", "lead") // .attr("transform", function(d) { // let path = d3.select(`#line-${d.id}`).node(); // let len = path?.getTotalLength(); // let point = path?.getPointAtLength(t * len); // return `translate(${[point?.x,point?.y]})`} // ) // .attr("r", 3) // .attr("stroke-width", 1) // .style("stroke", "#FFF") // .attr("fill", (d) => d.color); // circleLeads // .attr("transform", function(d) { // let path = d3.select(`#line-${d.id}`).node(); // let len = path.getTotalLength(); // let point = path.getPointAtLength(t * len); // return `translate(${[point.x,point.y]})`} // ) // .attr("r", 3) // .attr("stroke-width", 1) // .style("stroke", "#FFF") // .attr("fill", (d) => d.color) // circleLeads // .exit() // .remove(); // circleLeads // .attr("transform", function(d) { // let p = d3.select(`#line-${d.id}`).node().getPointAtLength(t); // return `translate(${[p.x,p.y]})`} // ) // .attr("r", 3) // .attr("stroke-width", 1) // .style("fill", "#FFF") // .attr("stroke", (d) => {return kommata.find(e => e.id === d.partyId).color}) // circleLeads // .exit() // .remove(); // let dat = data.map((d,i) => {return {t: new Date(d.updated), id4: d.percentages[4]}}); // let regressionGenerator0 = d3.regressionExp() // .x(d => d.t) // .y(d => d.id4) // .domain(d3.extent(dat, d => d.id)); // let regressionGenerator = d3.regressionLoess() // .x(d => d.t) // .y(d => d.id4) // .bandwidth(0.1); // let linearRegression = d3.regressionLinear() // .x(d => d[0]) // .y(d => d[1]) // .domain([0,1]); // let filteredData = linesData[0].points.filter(d => d[0] < t); // let regressionData = linearRegression(filteredData); // nodesContainer.append("line") // .attr("class", "regression") // .attr("stroke", "red") // .datum(regressionData) // .attr("x1", d => xScale(d[0][0])) // .attr("x2", d => xScale(d[1][0])) // .attr("y1", d => yScale(d[0][1])) // .attr("y2", d => yScale(d[1][1])); // //nodesContainer.append("text").attr("transform", `translate(${[100,100]})`).text(regressionData.rSquared.toFixed(3)) // let regressionGenerator = d3.regressionPoly() // .x(d => d[0]) // .y(d => d[1]) // .order(3); // let regressionGeneratorData = regressionGenerator(filteredData); // nodesContainer.append("path") // .attr("class", "regression") // .datum(regressionGeneratorData) // .attr("d", d3.line().x(d => d3.scaleLinear().domain([0, 1]).range([0, width])(d[0])).y(d => yScale(d[1]))) // .style('fill', 'none') // .attr('stroke', '#333'); // nodesContainer.append("text").attr("transform", `translate(${[100,100]})`).text(regressionGeneratorData.predict(1)) svg.on("mousemove", move).call(move); function move(e) { let x = e.offsetX - margins.left; let xValue = xScale[xaxisMode].invert(x); let lineDotsData = []; currentLinesData.forEach((d,i) => { let path = d3.select(`#line-${d.id}`).node(); if (path) { let solver = solve(path); let y = xValue >= xScale[xaxisMode].domain()[0] && xValue <= xScale[xaxisMode].domain()[1] ? solver(x) : -1000; lineDotsData.push({id: d.id, x: x, y: y, partyId: d.partyId, text: `${kommata.find(e => e.id === +d.partyId).short_name_el}: ${localeGR.format(yScaleFormat[mode])(yScale.invert(y))}`}); } }); let headerText = ""; if (xValue >= xScale[xaxisMode].domain()[0] && xValue <= xScale[xaxisMode].domain()[1]) { headerText = `${xScaleFormat[xaxisMode](xValue)} - ${lineDotsData.map(d => d.text).join(" ")}`; } d3.select("#header-text-current").text(headerText); let lineDots = nodesContainer.selectAll("circle.line-dot").data(lineDotsData, d => d.id); lineDots .enter() .append("circle") .attr("class", "line-dot") .attr("transform", (d) => `translate(${[d.x, d.y]})`) .attr("r", 3) .attr("stroke-width", 1) .style("stroke", "#FFF") .attr("fill", (d) => 'gray'); lineDots .attr("transform", (d) => `translate(${[d.x, d.y]})`) lineDots .exit() .remove(); } } }); return svg.node() }34:[{"id":"1edf3b05aa2e380e8385cbc40a23ba536b0123c83da6e0abeb60fdcc9af6f8267bfa11b8577e74e77da7bf47f7ee87241415698fbae934cb63bc3b0ea3799c00","href":"https://static.observableusercontent.com/files/1edf3b05aa2e380e8385cbc40a23ba536b0123c83da6e0abeb60fdcc9af6f8267bfa11b8577e74e77da7bf47f7ee87241415698fbae934cb63bc3b0ea3799c00","name":"v2023a@3.history.json","type":"application/json","lastModified":1687555552563.993,"size":35110}] 31:{"id":"7c83de607beb27fb","slug":"elections-in-real-time","title":"Οι Εθνικές Εκλογές σε πραγματικό χρόνο","thumbnail":"14f3dd1d3131400234fc75085061d3cbc02b2f3abbc4cadb8dce62391a7399cb","access_level":"public","create_time":"$D2023-06-20T14:27:22.063Z","update_time":"$D2023-06-25T23:14:15.244Z","view_time":null,"first_public_time":"$D2023-06-20T14:27:22.063Z","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":669,"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":404,"value":"viewof election = Inputs.radio(new Map([[\"25 Ιουνίου\", \"v2023b\"], [\"21 Mαΐου\", \"v2023a\"]]), {value: \"v2023b\", label: \"Αναμέτρηση\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"viewof modeType = Inputs.radio(new Map([[\"Ψήφοι\", \"votes\"], [\"Ποσοστό\", \"percentages\"]]), {value: \"votes\", label: \"Προβολή\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"viewof xaxisType = Inputs.radio(new Map([[\"Χρόνος καταγραφής\", \"updated\"], [\"Ποσοστό ενσωμάτωσης\", \"ingestion\"]]), {value: \"updated\", label: \"Οριζόντιος Άξονας\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"{let chart1 = racingGraph(); chart1.update(1, history, previousHistory.slice(0,previousHistory.length -1), modeType, xaxisType); return chart1;}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"htl.html`

${Swatches(d3.scaleOrdinal(Object.keys(latestHistory[latestHistory.length -1].percentages).sort((a,b) => d3.descending(latestHistory[latestHistory.length -1].percentages[a],latestHistory[latestHistory.length -1].percentages[b])).map(d => kommata.find(e => e.id === +d).short_name_el), Object.keys(latestHistory[latestHistory.length -1].percentages).sort((a,b) => d3.descending(latestHistory[latestHistory.length -1].percentages[a],latestHistory[latestHistory.length -1].percentages[b])).map(d => kommata.find(e => e.id === +d).color)))}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"htl.html`

Εκλογές 21^ης Μαϊου: ${Swatches(d3.scaleOrdinal(Object.keys(previousHistory[previousHistory.length -1].percentages).sort((a,b) => d3.descending(previousHistory[previousHistory.length -1].percentages[a],previousHistory[previousHistory.length -1].percentages[b])).map(d => kommata.find(e => e.id === +d).short_name_el), Object.keys(previousHistory[previousHistory.length -1].percentages).sort((a,b) => d3.descending(previousHistory[previousHistory.length -1].percentages[a],previousHistory[previousHistory.length -1].percentages[b])).map(d => d3.color(kommata.find(e => e.id === +d).color).copy({ opacity: 0.33 }).toString())))}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"---\n## Παράρτημα\n\nΟ κώδικας των γραφημάτων διατίθεται παρακάτω.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"Generators.observe(notify => {\n notify(ts);\n let interval = setInterval(() => mutable ts = ts >= 0.9999 ? 0 : ts + 0.001, 500000);\n return () => clearInterval(interval);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"mutable ts = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require.alias({\n \"d3-array\": \"d3-array@2\",\n \"d3-axis\": \"d3-axis@3\",\n \"d3-time-format\": \"d3-time-format@4\",\n \"d3-regression\": \"d3-regression@1\",\n \"d3-scale\": \"d3-scale@3\",\n \"d3-shape\": \"d3-shape@1\",\n \"d3-selection\": \"d3-selection@2\",\n \"d3-color\": \"d3-color@3\"\n})(\"d3-array\", \"d3-axis\", \"d3-regression\", \"d3-scale\", \"d3-shape\", \"d3-selection\", \"d3-time-format\", \"d3-color\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"history = election === \"v2023b\" ? latestHistory : previousHistory.slice(0,previousHistory.length - 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"latestHistory = {\n let intervalSeconds = 15 * 60;\n while (true) {\n yield (await (await fetch(\n `https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/v2023b.history.json`, {cache: \"no-store\"}\n )).json());\n await Promises.delay(+intervalSeconds * 1000);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"previousHistory = fetch(\"https://raw.githubusercontent.com/xanthopoulakis/observablehq/main/ekloges/v2023a.history.json\", {cache: \"no-store\"}).then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"regression = require('regression');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"import {kommata, phi, politeia, localeGR, measureTextWidth} from \"@infographeo/ekloges\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"// the solver looks for the closest to the `x` point on the `path` and returns its `y`\nsolve = path => {\n const array = d3.range(path.getTotalLength())\n const bisect = d3.bisector(d => path.getPointAtLength(d).x)\n const len = x => bisect.right(array, x)\n return x => path.getPointAtLength(len(x)).y\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"hoursDiff = (updated, target) => {\n let timeDifference = new Date(updated).getTime() - target.getTime();\n let hoursDifference = Math.floor(timeDifference / (1000 * 60 * 60));\n return timeDifference;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"