31:T706,legend ={ const svg = d3.select(DOM.svg(width, 20)) svg.call(tRef); let color = tRef.url(); var defs = d3.select("svg").append('defs'); var gradient = defs.append("linearGradient") .attr("id", "svgGradient") .attr("x1", "0%") .attr("x2", "100%") .attr("y1", "0%") .attr("y2", "0%"); gradient.append("stop") .attr('class', 'start') .attr("offset", "20%") .attr("stop-color", "#9480cf") .attr("stop-opacity", 1); gradient.append("stop") .attr('class', 'end') .attr("offset", "80%") .attr("stop-color", "#d17da0") .attr("stop-opacity", 1); svg.append("circle").attr("cx", 10).attr("cy",10).attr("r", 7).style("fill", "#9480cf") svg.append("circle").attr("cx", 120).attr("cy",10).attr("r", 7).style("fill", "#d17da0") svg.append("circle").attr("cx", 520).attr("cy",10).attr("r", 7).style("fill", "#a7a7a7") svg.append("circle").attr("cx", 645).attr("cy",10).attr("r", 7).style("fill", color) svg.append("circle").attr("cx", 220).attr("cy",10).attr("r", 7).style("fill", "url(#svgGradient)") svg.append("text").attr("x", 23).attr("y", 10).text("Parliament").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 133).attr("y", 10).text("President").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 535).attr("y", 10).text("Referendum").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 660).attr("y", 10).text("Date is not confirmed").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 235).attr("y", 10).text("Both, presidential & parliamentarian").style("font-size", "15px").attr("alignment-baseline","middle") return svg.node() }32:Te2c,chart = { const svg = d3.select(DOM.svg(width, height)) const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("text-align", "center") .style("display", "block") .style("position", "absolute") .style("visibility", "hidden") .style("font-size", "1rem") .style('font-family', 'Montaga') .style("background", "rgba(255,255,255,0.9)") .style("padding", "0.1rem 0.5rem") .style("color", "grey") .style("border-radius", "5px") .style("border", "1px solid grey") .style("transform", "translate(-50%, -100%)") .style("pointer-events", "none") svg.call(tParl) svg.call(tBoth) svg.call(tPres) svg.call(tRef) svg.selectAll('line') .data(uniqueMonths) .join('line') .attr('x1', margin.left) .attr('x2', width - margin.right) .attr('y1', d => yScale(d)) .attr('y2', d => yScale(d)) .attr('stroke', '#bebebe') svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(yAxisGen) .call(g => g.selectAll(".tick line").remove()) .call(g => g.select(".domain").remove()) svg.append('g') .attr('transform', `translate(0,${height - margin.bottom + 10})`) .call(xAxisGen) .call(g => g.selectAll(".tick line").remove()) .call(g => g.select(".domain").remove()) svg.node().drawData = function(myData) { const t = svg.transition().duration(500) const circles = svg.selectAll('circle') .data(myData, d => d.date) .join( enter => { const circle = enter.append('circle') .attr('cx', d => d.days) .attr('cy', d => d.month) .attr('r', 11) .attr('opacity', 0) .attr('stroke', d => d.dateParsed === today ? '#bebebe': null) circle.on("click", (event,d) => { if (d.numCountries === 1 && d.dateParsed < today) { window.open(d.url, "_blank") } else if (d.numCountries > 1 && d.dateParsed < today) { var locs = d.url for (let i = 0; i < locs.length; i++) { window.open(locs[i]) } } }) circle.on("mouseout", (event,d) => { const current = event.currentTarget; d3.select(current).transition().attr('r', 11); tooltip.style("visibility", "hidden") }) .on("mouseover", (event, d) => { const current = event.currentTarget; d3.select(current).transition().attr('r', 13); tooltip .style("visibility", "visible") .style("top", (d.month + 222) + "px") .style("left", (d.days + 11) + "px") .html( `

${d.electionTypeConcat}

` ) }) return circle }, update => update, exit=> { exit.transition(t) .attr('opacity', 0) .remove() }) .transition(t) .attr('opacity', d => d.dateParsed > today ? 1 : 0.6) .attr('fill', d => d.color) } // add gradient const g = svg .append("g"); var defs = d3.select("svg").append('defs') var gradient = defs.append("linearGradient") .attr("id", "svgGradient") .attr("x1", "0%") .attr("x2", "100%") .attr("y1", "0%") .attr("y2", "0%") gradient.append("stop") .attr('class', 'start') .attr("offset", "20%") .attr("stop-color", "#9480cf") .attr("stop-opacity", 1) gradient.append("stop") .attr('class', 'end') .attr("offset", "80%") .attr("stop-color", "#d17da0") .attr("stop-opacity", 1) return svg.node() }33:T47a,calculateData = (data) => { return _.map(data, (d, i) => { let color if (d.numCountries === 1 && d.status[0] === 'Date not confirmed' && d.electionType[0] === 'parliament') { color = tParl.url() } else if (d.numCountries === 1 && d.status[0] === 'Date not confirmed' && d.electionType[0] === 'president') { color = tPres.url() } else if (d.numCountries === 1 && d.status[0] === 'Date not confirmed' && d.electionType[0] === 'both') { color = tBoth.url() } else if (d.numCountries > 1) { color = '#f6c776' } else if (d.numCountries === 1 && d.status[0] === 'Date not confirmed' && d.electionType[0] === 'referendum') { color = tRef.url() } else { color = colorScale(d.electionType) } return { month: yScale(d.month), days: xScale(d.day), numCountries: d.numCountries, country: d.country, electionType: d.electionType, electionTypeConcat: d.electionTypeConcat, color: color, dateParsed: d.dateParsed, status: d.status, continent: d.continent, date: d.date, url: d.url } }) }34:T4b8,data = _.chain(dataFiltered) .groupBy('date') .map((dates, date)=> { const parseTime = d3.timeParse("%d.%m.%y"); const dateParsed = parseTime(date); const formatDay= d3.timeFormat("%d"); const dayF = formatDay(dateParsed); const formatMonth = d3.timeFormat("%B"); const month = formatMonth(dateParsed); const countryCount = _.countBy(dates, ({country}) => country); const electionType = _.map(dates, 'electionType'); const electionTypeConcat = _.map(dates, 'electionTypeConcat'); return { date: date, day: +dayF, month: month, country: _.map(dates, 'country'), numCountries: d3.sum(_.values(countryCount)), electionType: electionType, electionTypeConcat: electionTypeConcat, dateParsed: dateParsed, status: _.map(dates, 'status'), continent: _.map(dates, 'continent'), url: _.map(dates, 'url'), test: _.map(dates, ({country, electionType}) => { return { tada: electionType, country: country } }) } }).value()35:[] 2f:{"title":"Electoral Calendar 2021","cells":[{"id":0,"value":"md`# Electoral Calendar 2021`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"viewof choice = checkbox({options:continents, value:continents, description: 'Select continent(s)'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1626,"value":"md ` *For the past elections, lick on the circle to see the election results*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1448,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1418,"value":"chart.drawData(drawingData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":984,"value":"tRef = textures.lines()\n .size(6)\n .strokeWidth(2)\n .stroke(\"white\")\n .background(\"#a7a7a7\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":986,"value":"tParl = textures.lines()\n .size(6)\n .strokeWidth(2)\n .stroke(\"white\")\n .background(\"#9480cf\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":988,"value":"tBoth = textures.lines()\n .size(6)\n .strokeWidth(2)\n .stroke(\"white\")\n .background(\"url(#svgGradient)\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":990,"value":"tPres = textures.lines()\n .size(6)\n .strokeWidth(2)\n .stroke(\"white\")\n .background(\"#d17da0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":846,"value":"today = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"listElectionType = _.chain(dataRaw)\n .map('electionType')\n .uniq('electionType')\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"colors = ['#9480cf', 'url(#svgGradient)','#d17da0', '#a7a7a7']","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"drawingData = calculateData(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"colorScale = d3.scaleOrdinal()\n .domain(listElectionType)\n .range(colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"xScale = d3.scaleLinear()\n .domain([1,31])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"yScale = d3.scaleBand().paddingInner(1)\n .domain(uniqueMonths)\n .range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"yAxisGen = d3.axisLeft()\n .scale(yScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"xAxisGen = d3.axisBottom()\n .scale(xScale)\n .ticks(31)","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"uniqueDays = _.chain(data)\n .map('day')\n .uniq('day')\n .sortBy()\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"continents = _.chain(dataRaw)\n .map('continent')\n .uniq('continent')\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"uniqueMonths = [\"January\",\"February\", \"March\", \"April\",\"May\",\"June\",\"July\",\"August\", \"September\", \"October\", \"November\", \"December\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"height = width - 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"margin = ({top: 20, right: 60, bottom: 50, left: 80})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md `### ~ utilities ~\n\nData source: [electionguide](https://www.electionguide.org/elections/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1363,"value":"dataFiltered = dataRaw.filter(({ continent }) => choice.includes(continent));","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"textures = require('textures')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1212,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1427,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"dataRaw = d3.csv(\"https://docs.google.com/spreadsheets/d/e/2PACX-1vQL8b0GKPS9mN2vfPwJJFizaOZ-CcRKs9Hs_DVYOJIyutMOgWgxYPUasDp8VnrWctunFt2mx8zCgb8g/pub?gid=0&single=true&output=csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1532,"value":"style = html`\n\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}