2c:null 2d:["$","title",null,{"children":"LIVE: Geo-Analytic Displayr | Misha Tsvelik | Observable"}] 32:T494,dynamicStyle = html`` 33:Tba6,chart = { const container = d3.create("div") .style("width", width) .style("height", height) const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", width) .style("height", height) const tooltip = container .append("div") .attr("class", "svg-tooltip") .style("position", "relative") .style("bottom", "20px") .style("top", "-140px") .style("width", "250px") .style("background-color", "#ffffff") .style("padding", "10px") .style("border", "1px solid") .style("border-radius", "10px") .html(totalLegendPlaceholder) const startingSparkline = sparkAreaTweaked(tooltip, AggregateId, { x: groupByRegion.get(AggregateId).map(d => parseDate(d.date)), y: groupByRegion.get(AggregateId).map(d => Math.max(0, d.ode)), sparkXdomain }) const path = d3.geoPath(projection) // countries regions or topojson const country = svg .append("g") .selectAll("path") .data(countries.features) .join("path") .attr("id", d => toId(d.properties.name)) .classed("region", true) .classed("active", d => groupByRegion.has(d.properties.name)? true: false) .attr("fill", colorFillFunction) .attr("stroke", "#2e2e2e") .attr("stroke-width", 0.2) .attr("d", path) .style("cursor", "pointer") .call(interactions); const legend = createLegend(svg) const percentileLegend = heatmap? createPercentileLegend(svg, d3.scaleOrdinal(["<10", "10-19", "20-29", "30-39", "40-49", "50-59", "60-69", "70-79","80-89","≥90"], (d3.quantize(d3.interpolateRgbBasis(["red", "white", "green"]), 10))), {title: `Countries by Percentile`, tickSize: 0} ): "" let marker = createMarker(svg) return Object.assign( container.node() , { update(data) { marker = marker .data( data .filter(([id, value]) => centroidsMap.has(id) && !isNaN(value)) .sort(([, a], [, b]) => d3.descending(a, b)), ([id]) => id ) .join( enter => markerType == "Spike"? enter.append("path") .attr("transform", ([id]) => `translate(${projection( [centroidsMap.get(id).Long, centroidsMap.get(id).Lat] )})`) .call(interactions) : enter.append("circle") .attr("cx", ([id]) => projection( [centroidsMap.get(id).Long, centroidsMap.get(id).Lat] )[0]) .attr("cy", ([id]) => projection( [centroidsMap.get(id).Long, centroidsMap.get(id).Lat] )[1]) .call(interactions) ) .attr(markerType == "Spike"? "d": "r", ([, value]) => markerType == "Spike"? spike(length(value*(comparison.shift == 0? 1: kpiUnitDivider))): circleScale(value) ) .attr( "fill", markerColor ) .attr( "stroke", markerStrokeColor ) .classed("marker", true) } }); }34:Td27,interactions = (country) => country.on("click", d => { const tooltip = d3.select(".svg-tooltip") const region = Array.isArray(d)? d[0]: d.properties.name //an array means the hovered element is a marker rahter than region set(viewof countrySelected, countrySelected != region? region: AggregateId) d3.selectAll(".region.selected").classed("selected", false) countrySelected != AggregateId? d3.select(`#${toId(region)}`).classed("selected", true): "" }).on("mouseover", d => { const tooltip = d3.select(".svg-tooltip") const hoveredRegion = Array.isArray(d)? d[0]: d.properties.name const region = countrySelected != AggregateId? countrySelected: hoveredRegion if(groupByRegion.has(/*region*/hoveredRegion)){ const flag = `

` const country = region == AggregateId? region: customCountriesReverseMap.get(region).x const periodDescription = comparison.shift == 0? dateMappedToStrings[date]: `${dateMappedToStrings[date]} v ${dateMappedToStrings[getComparedDate(date)]}` const separator = `${compareDatesMap.get(region)? " : ": " : no comparison"}` const kpi = `${d3.format(comparison.shift == 0? format.period: format.deltas)(comparison.shift == 0?compareDatesMap.get(region): compareDatesMap.get(region)*kpiUnitDivider)}` tooltip.html(`${flag}${country}
${kpiMetricDescription}
${periodDescription}${separator}${compareDatesMap.get(region)? kpi : ""}
`) sparkAreaTweaked(tooltip, region, { x: groupByRegion.get(region).map(d => parseDate(d.date) ), y: groupByRegion.get(region).map(d => Math.max(0, d.ode)), sparkXdomain }) } //end if }) .on("mousemove", function(d){ const hoveredRegion = Array.isArray(d)? d[0]: d.properties.name const region = countrySelected != AggregateId? countrySelected: hoveredRegion if(groupByRegion.has(/*region*/hoveredRegion)){ let el = d3.select(this).classed("marker")? d3.select(`#${toId(d[0])}`): d3.select(this) el.attr("stroke-width", 1.5) d3.select(this).classed("marker")? d3.select(this) .attr("stroke", markerType == "Bubble"? "#444": "black"): "" } //end if }) .on("mouseleave", function(d){ const tooltip = d3.select(".svg-tooltip") //const hoveredRegion = Array.isArray(d)? d[0]: d.properties.name const region = countrySelected /*AggregateId*//*countrySelected != AggregateId? countrySelected: hoveredRegion*/ tooltip.html(totalLegendPlaceholder) sparkAreaTweaked(tooltip, region, { x: groupByRegion.get(region).map(d => parseDate(d.date) ), y: groupByRegion.get(region).map(d => Math.max(0, d.ode)), sparkXdomain }) let el = d3.select(this).classed("marker")? d3.select(`#${toId(d[0])}`).attr("stroke-width", 0.2): d3.select(this).attr("stroke-width", 0.2) d3.select(this).classed("marker")? d3.select(this) .attr("stroke", markerType == "Bubble"? "#e1e1e1": "black"): "" })35:T53c,createLegend = function(svg) { const data = length.ticks(4).slice(0).reverse() const legend = svg.append("g") .attr("fill", "#777") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => `translate(${width - 50 - (i + 1) * /*(selectedMetric.core_unit == "million"? 1: 1.5) **/ 30},${height - 75})`); const marker = markerType == "Spike"? legend.append("path") .attr("fill", markerColorLegend) .attr("fill-opacity", 0.3) .attr("stroke", markerColorLegend) .attr("d", d => spike(length(d)) ): legend.append("circle") .attr("fill", markerColorLegend) .attr("fill-opacity", 0.8) .attr("stroke", "#e1e1e1") .attr("cy", (d) => -circleScale(d)) .attr("r", circleScale) let legendText = legend.append("text") .attr("dy", "1.3em") .text( length.tickFormat(6,`${comparison.shift == 0? format.period: format.deltas}`) ) let footnote = legend.append("text") .attr("dy", "2.5em") .attr("dx", "2.5em") .text( (d,i) => i == (data.length-1)? comparison.shift == 0? "": kpiUnitDescription.deltas: "") return legend.node() }36:T1120,// adapted from https://observablehq.com/@d3/color-legend function createPercentileLegend(svg, color, { title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { function ramp(color, n = 256) { const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node() }37:Ta5c,//Tweaked from https://observablehq.com/@mbostock/covid-cases-by-state function sparkAreaTweaked(htmlEl, region, { x: X, y: Y, xdomain = d3.extent(X), ydomain = [(d3.extent(Y)).map(metricDomainMapper)[0],d3.extent(Y)[1]], width = 240, height = 20 }) { const x = d3.scaleUtc(xdomain, [0, width]); const y = d3.scaleLinear(ydomain, [height, 0]); const area = d3.area() .x((d, i) => x(X[i])) .y1((d, i) => y(Y[i])) .y0(height) .defined((d, i) => !isNaN(X[i]) && !isNaN(Y[i])); let el = htmlEl? htmlEl.append("svg"): d3.create("svg") comparison.shift == 0? el .attr("width", width) .attr("height", height) .style("vertical-align", "middle") .style("margin", "5px 0 0 0") .call(g => g.append("path") .attr("fill", spark.fill) .attr("d", area(groupByRegion.get(region)))) .call(g => g.append("path") .attr("fill", "none") .attr("stroke", spark.stroke) .attr("d", area.lineY1()(groupByRegion.get(region)))) .call(g => g.append("line") .attr("x1",x(X[dates.indexOf(date)])) .attr("y1", y(ydomain[1])) .attr("x2",x(X[dates.indexOf(date)])) .attr("y2", y(ydomain[0])) .attr("stroke", "black") ): el .attr("width", width) .attr("height", height) .style("vertical-align", "middle") .style("margin", "5px 0 0 0") .call(g => g.append("path") .attr("fill", spark.fill) .attr("d", area(groupByRegion.get(region)))) .call(g => g.append("path") .attr("fill", "none") .attr("stroke", "black") .attr("d", area.lineY1()(groupByRegion.get(region)))) .call(g => g.append("line") .attr("x1",x(X[dates.indexOf(date)])) .attr("y1", y(ydomain[1])) .attr("x2",x(X[dates.indexOf(date)])) .attr("y2", y(ydomain[0])) .attr("stroke", spark.stroke) ) .call(g => g.append("line") .attr("x1",x(X[dates.indexOf(date) - comparison.shift])) .attr("y1", y(ydomain[1])) .attr("x2",x(X[dates.indexOf(date) - comparison.shift])) .attr("y2", y(ydomain[0])) .attr("stroke", "black") ) .call(g => g.append("rect") .attr("x", x(X[dates.indexOf(date) - comparison.shift])) .attr("y", y(ydomain[1])) .attr("width", x(X[dates.indexOf(date)]) - x(X[dates.indexOf(date) - comparison.shift])) .attr("height", y(ydomain[0]) - y(ydomain[1])) .attr("fill", "#CF4800") .attr("fill-opacity", 0.4) .attr("stroke-width", 0) ) return el.node() }38:T617,toParseableDate = function(value, periodicity){ const periods_object_index = { Month: { split: "-", yearPart: 0, toMapPart: 1, mapping: Object.fromEntries( ["01","02","03","04","05","06","07","08","09","10","11","12"].map(o => { return [o,o] }) ) }, Quarter: {split: "-", yearPart: 0, toMapPart: 1, mapping: Object.fromEntries( ["Q1","Q2","Q3","Q4"].map(o => { return o == "Q1"? [o, "01"]: o == "Q2"? [o, "04"]: o == "Q3"? [o, "07"]: o == "Q4"? [o, "10"]: null }) ) }, Half: {split: "-", yearPart: 0, toMapPart: 1, mapping: Object.fromEntries( ["H1","H2"].map(o => { const output = {} output[o] = o == "H1"? [o, "01"]: o == "H2"? [o, "07"]: null return output }) ) }, Year: {split: "Y", yearPart: 0, toMapPart: null} } const splitValue = value.split(periods_object_index[periodicity]["split"]) //datecheck if you need it //Object.prototype.toString.call(date) === '[object Date]' const year = Number(splitValue[periods_object_index[periodicity].yearPart]) const month = periods_object_index[periodicity].mapping [ splitValue[periods_object_index[periodicity].toMapPart] ] const day = "01" return typeof month != "undefined"? `${year}-${month}-${day}`: null }39:T840,dataMockDisplayr = ({"data":[{"period":"2021-Q1","variable":"France","value":"63.8486610004203","_row":1},{"period":"2021-Q2","variable":"France","value":"60.1770451183678","_row":2},{"period":"2021-Q3","variable":"France","value":"67.5040271746273","_row":3},{"period":"2021-Q4","variable":"France","value":"64.7150365612219","_row":4},{"period":"2022-Q1","variable":"France","value":"63.3070266475182","_row":5},{"period":"2021-Q1","variable":"Great Britain","value":"NA","_row":6},{"period":"2021-Q2","variable":"Great Britain","value":"63.9510603341925","_row":7},{"period":"2021-Q3","variable":"Great Britain","value":"67.8238231619931","_row":8},{"period":"2021-Q4","variable":"Great Britain","value":"57.809575143529","_row":9},{"period":"2022-Q1","variable":"Great Britain","value":"63.4864321387058","_row":10},{"period":"2021-Q1","variable":"Italy","value":"66.6914088573005","_row":11},{"period":"2021-Q2","variable":"Italy","value":"65.879805082556","_row":12},{"period":"2021-Q3","variable":"Italy","value":"66.7033263008317","_row":13},{"period":"2021-Q4","variable":"Italy","value":"67.1373368732311","_row":14},{"period":"2022-Q1","variable":"Italy","value":"67.8255217744228","_row":15},{"period":"2021-Q1","variable":"NET","value":"65.3559143416167","_row":16},{"period":"2021-Q2","variable":"NET","value":"63.4628901082638","_row":17},{"period":"2021-Q3","variable":"NET","value":"67.3420831218745","_row":18},{"period":"2021-Q4","variable":"NET","value":"63.3656862451006","_row":19},{"period":"2022-Q1","variable":"NET","value":"64.8925166195263","_row":20}],"configs":{"type":["%"],"unit.divider":[100],"unit.description":{"period":[""],"deltas":["pp. change"]},"metric.description":["Sony - Image Drivers: Brand I trust"],"periodicity":["Quarter"],"periods":["2021-Q1","2021-Q2","2021-Q3","2021-Q4","2022-Q1"],"comparison.period.shift":[4],"custom.countries":[{"x":"France","_row":"France"},{"x":"Great Britain","_row":"United Kingdom"},{"x":"Italy","_row":"Italy"},{"x":"NET","_row":"Global Average"}],"circle.radius":{"min":[2],"max":[10]},"decimal.points":{"period":[0],"deltas":[1]}}})3a:T45b,centroids = d3 .csv( "https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv" ) .then(function(c) { //rename certain countries to fit model for (let key in c) { if (c[key]["Country/Region"] == "US") { c[key]["Country/Region"] = "United States of America"; } else if (c[key]["Country/Region"] == "Korea, South") { c[key]["Country/Region"] = "South Korea"; } else if (c[key]["Country/Region"] == "Burma") { c[key]["Country/Region"] = "Myanmar"; } else if (c[key]["Country/Region"] == "Congo (Brazzaville)") { c[key]["Country/Region"] = "Congo"; } else if (c[key]["Country/Region"] == "Congo (Kinshasa)") { c[key]["Country/Region"] = "Dem. Rep. Congo"; } else if (c[key]["Country/Region"] == "Cote d'Ivoire") { c[key]["Country/Region"] = "Côte d'Ivoire"; } c[key] = filterObjectProperties(c[key], ["Province/State","Country/Region","Lat","Long"]) } return c.filter(o => o["Province/State"] == "") }) 3b:[] 30:{"id":"e48ce80c901625de","slug":null,"title":"LIVE: Geo-Analytic Displayr","thumbnail":"ebdb4a83b72143f6122df79a6b0b1d85b64b657a0b727e7d204c4a70dcdd1a53","access_level":"public","create_time":"$D2022-09-16T06:00:09.241Z","update_time":"$D2022-09-26T13:50:58.477Z","view_time":null,"first_public_time":"$D2022-11-17T09:23:22.871Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"46d757b0a7e70394","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":"starter_2024"},"version":3750,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null}],"members":[{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"LIVE: Geo-Analytic Displayr","cells":[{"id":2807,"value":" md`# LIVE: Geo-Analytic Displayr`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2792,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3250,"value":"viewof projectionDDInput = projectionInput({\n name: \"projection\",\n value:\n new URLSearchParams(html``.search).get(\"Robinson\") || \"Robinson\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"projection = areaZoom === true? projectionDDInput.center([0,51])\n .scale(350): projectionDDInput.center([0,0])\n .scale(155)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1831,"value":"markerType = markerTypeInput","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"comparison = comparisonInput //so that this can be over-ridden","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"viewof date = Scrubber(dates, {\n initial: dates.length - 1,\n delay: 100,\n loop: false,\n autoplay: false,\n format: date => comparison.shift == 0? dateMappedToStrings[date]: `${dateMappedToStrings[date]} v ${dateMappedToStrings[getComparedDate(date)]}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1836,"value":"viewof heatmap = Inputs.toggle({label: comparison.shift == 0? `${dateMappedToStrings[date]} score distribution`: `${dateMappedToStrings[date]} v ${dateMappedToStrings[getComparedDate(date)]} score distribution:`, value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3521,"value":"viewof areaZoom = Inputs.toggle({label: \"Zoom in on Europe\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3244,"value":"viewof markerTypeInput = Inputs.radio([\"Bubble\", \"Spike\"], {label: \"Show as:\", value: \"Bubble\"})//\"Bubble\"//\"Spike\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3234,"value":"viewof comparisonInput = Inputs.radio(comparison_type, {label: \"Show:\", format: x => x.name, value: comparison_type.find(t => t.name === \"Period\")})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3626,"value":"viewof countrySelected = Inputs.radio(countriesInData, {label: \"country selected:\", value: AggregateId})","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":3709,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2105,"value":"toId = function(string) { return string.toLowerCase().replace(\" \",\"_\"); } ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1583,"value":"totalLegendPlaceholder = {\n const region = countrySelected\n const flag = region != AggregateId? `

`: \"\"\n const country = region == AggregateId? region: customCountriesReverseMap.get(region).x\n const periodDescription = comparison.shift == 0? dateMappedToStrings[date]: `${dateMappedToStrings[date]} v ${dateMappedToStrings[getComparedDate(date)]}` \n const separator = `${compareDatesMap.get(region)? \" : \": \" : no comparison\"}`\n const kpi = `${d3.format(comparison.shift == 0? format.period: format.deltas)(comparison.shift == 0?compareDatesMap.get(region): compareDatesMap.get(region)*kpiUnitDivider)}`\n \n return `${flag}${country}
\n ${kpiMetricDescription}
\n ${periodDescription}${separator}${compareDatesMap.get(region)? kpi : \"\"}
`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2141,"value":"createMarker = (svg) => markerType == \"Spike\"? svg.append(\"g\")\n .attr(\"fill-opacity\", 0.3)\n .selectAll(\"path\")\n .classed(\"marker\", true): \n svg.append(\"g\")\n .attr(\"fill-opacity\", 0.8)\n .selectAll(\"circle\")\n .classed(\"marker\", true)\n .attr(\"stroke\", \"#e1e1e1\")\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1927,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"update = chart.update( compareDates(frames.get(date)) )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"colorByQuantile = d3.scaleQuantile()\n .domain( compareDates(frames.get(date)).map(o => o[1]).sort((a,b) => a-b) ) // pass the whole dataset to a scaleQuantile’s domain\n .range(d3.quantize(d3.interpolateRgbBasis([\"red\", \"white\", \"green\"]), 10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"colorFillFunction = d => {\n let value = null \n let selected = countrySelected == d.properties.name\n if(!isNaN(\n compareDatesMap.get(\n d.properties.name\n ))\n ){\n value = compareDatesMap.get(\n d.properties.name\n )\n } \n return value == null? \"transparent\" : (selected? \"#879BCC\" : heatmap? colorByQuantile(value): \"#e1e1e1\")\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"id = d => d.id || `${d.NAME}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"sparkXdomain = d3.extent(dates.map(d => new Date(d.slice(0,4), d.slice(5,7), d.slice(9,10))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1959,"value":"metricDomain = d3.extent(rawdata.filter(d => d.id != AggregateId).map(o => o.ode).map(metricDomainMapper))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3602,"value":"metricDomainRaw = d3.extent(rawdata.filter(d => d.id != AggregateId).map(o => o.ode))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3497,"value":"metricDomainMapper = (o,i) => i== 0? metricDomainRaw[0]*0.8: o /* may need to change for negative values*/ ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1965,"value":"circleScale = d3\n .scaleSqrt()\n .domain([0,metricDomain[1]]) \n .range([circleRadius.min, circleRadius.max])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"//length = d3.scaleLinear([0, 3], [0, 3])\nlength = d3.scaleLinear([ \n comparison.shift == 0? 0: -0.5* maxPerSeriesPeriodDifference*kpiUnitDivider,\n comparison.shift == 0? d3.max(rawdata.filter(o => o.id != AggregateId), d => d.ode): 0.5*maxPerSeriesPeriodDifference*kpiUnitDivider \n], [\n comparison.shift == 0? 0: -5,\n 5\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"spike = (length, width = 7) => `M${-width / 2},0L0,${-length*15}L${width / 2},0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2563,"value":"bandedColorFill = (value) => {\n let output = \"#FFA52F\" //yellow\n if(value <= 0.7) { output = \"red\" }\n else if (value >= 1.3) { output = \"green\" }\n return output\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"markerColor = ([, value]) => {\n switch (markerType) {\n case \"Spike\": return comparison.name == \"Period\"? \"black\" : length(value) > 0? \"green\": \"red\";\n case \"Bubble\": return comparison.name == \"Period\"? \"#CF4800\" : value > 0? \"green\": \"red\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2168,"value":"markerStrokeColor = ([, value]) => {\n switch (markerType) {\n case \"Spike\": return comparison.name == \"Period\"? \"black\" : length(value) > 0? \"green\": \"red\";\n case \"Bubble\": return \"#e1e1e1\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"markerColorLegend = (d) => {\n switch (markerType) {\n case \"Spike\": return comparison.name == \"Period\"? \"black\" : length(d) > 0? \"green\": \"red\";\n case \"Bubble\": return comparison.name == \"Period\"? \"#CF4800\" : d > 0? \"green\": \"red\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2972,"value":"function filterObjectProperties(object, filterList) {\n // return an empty object if the filterList is not an array\n if (!Array.isArray(filterList)) return {};\n\n return filterList\n .filter((property) => property in object)\n .map((property) => ({ [property]: object[property] }))\n .reduce((accumulator, current) => ({...accumulator, ...current}), {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"height = Math.min(500, width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"width = 975\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"function isNull(value) {\n if ( value === null ){\n \treturn true;\n\t\t}\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3094,"value":"### Dates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3353,"value":"dateMappedToStrings = {\n return Object.fromEntries( dates.map((o,i) => [o, periods[i]]) )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"dates = Array.from(new Set( Object.values(rawdata).map(o => o.date).sort(([a,b]) => a-b) ))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"comparedDate = getComparedDate(date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3451,"value":"getComparedDate = (date) => dates[dates.indexOf(date) - comparison.shift]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"ShiftedDateIndex = dates.indexOf(date) - comparison.shift","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"function compareDates(){\n \n let index_to_compare = ShiftedDateIndex > -1 && comparison.shift !== 0 ? ShiftedDateIndex: null \n let output = frames.get(date)\n \n if(comparison.shift !== 0){\n \n output = frames.get(date).map( (o,i) => {\n return [ o[0], isNull(index_to_compare)? \"\": o[1] - frames.get(dates[index_to_compare])[i][1] ] \n }\n )\n \n }\n \n return output\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3362,"value":"parseDateShort = function(d) {\n return parseDate(d).toLocaleString(\"en\", {month: \"short\", year: \"numeric\"}) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3364,"value":"parseDate = d3.utcParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2936,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3357,"value":"### Flags","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3121,"value":"//flags csv\nflags_csv = d3.csv('https://gist.githubusercontent.com/jk979/a1c394355e2cf1874ca0ac6ee609107b/raw/4215d6114baae284641d7e6fe1afb374818fcf31/world-countries-flags.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3197,"value":"flagsMap.get(\"The Bahamas\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3128,"value":"flagsCleaned = {\n return flags_csv.map(o => { o.name = o.url.substring(o.url.lastIndexOf(\"/\") + 1, o.url.lastIndexOf(\".\")).slice(8).replaceAll(\"_\",\" \") \n o.name = o.name.replace(\"the \",\"\")\n o.name = o.name.replace(\"People's Republic of China\",\"China\")\n o.name = o.name.replace(\"United States\",\"United States of America\")\n o.name = o.name.replace(\"Bahamas\",\"The Bahamas\")\n o.name = o.name.replace(\"The Gambia\",\"Gambia\")\n o.name = o.name.replace(\"Republic of China\",\"Taiwan\") \n o.name = o.name.replace(\"United Republic of Tanzania\",\"Tanzania\") \n return o \n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3192,"value":"flagsMap = d3.group(flagsCleaned, o => o.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3123,"value":"### Maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1124,"value":"compareDatesMap = new Map(compareDates(frames.get(date)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"groupByRegion = d3.group(rawdata, o => o.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2989,"value":"centroidsMap = d3.index(centroids, o => o[\"Country/Region\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"frames = new Map(\n //d3.pairs(dates, (a, b) => [a, Array.from(index, ([id, data]) => [id, Math.max(0, data.get(a))])])\n d3.map(dates, (o) => [o, Array.from(index, ([id, data]) => [id, Math.max(0, data.get(o))])])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"index = d3.rollup(rawdata, ([d]) => +d.ode, d => d.id|| `${d.NAME}`, d => d.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"names = new Map(d3.groups(rawdata, id).map(([id, [d]]) => [id, `${d.NAME}`]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3049,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3563,"value":"//excludes AggregateId as this is not represented on the map as a marker\nmaxPerSeriesPeriodDifference = d3.max(d3.groups(rawdata.filter(a => a.id != AggregateId), o => o.id).map(d => d[1].map(x => x.ode)).map(z => d3.extent(z)[1] - d3.extent(z)[0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3623,"value":"countriesInData = new Set( rawdata.map(o => o.id) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"//rawdata = d3.csv(\"https://raw.githubusercontent.com/YuLan1014/Vis/master/cumulate.csv\")\n//rawdata = d3.csv(\"https://raw.githubusercontent.com/YuLan1014/Vis/master/ODE_101720.csv\")\nrawdata = Object.values(dataMockDisplayr.data).map(o => \n({\n id: typeof customCountriesMap.get(o[\"variable\"]) != \"undefined\"? customCountriesMap.get(o[\"variable\"])._row: o[\"variable\"],\n date: toParseableDate(o[\"period\"], periodicity),\n ode: o[\"value\"]/kpiUnitDivider,\n NAME: typeof customCountriesMap.get(o[\"variable\"]) != \"undefined\"? customCountriesMap.get(o[\"variable\"])._row: o[\"variable\"]\n })\n)\n//d3.csv(\"https://raw.githubusercontent.com/YuLan1014/Vis/master/logODE_100120.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2815,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2926,"value":"configs = dataMockDisplayr.configs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3256,"value":"kpiType = configs[\"type\"][0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3483,"value":"kpiUnitDivider = configs[\"unit.divider\"][0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3261,"value":"kpiMetricDescription = configs[\"metric.description\"][0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3343,"value":"kpiUnitDescription = ({ period: configs[\"unit.description\"][\"period\"][0], deltas: configs[\"unit.description\"][\"deltas\"][0] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2924,"value":"periodicity = configs[\"periodicity\"][0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2930,"value":"periods = configs[\"periods\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3292,"value":"comparisonPeriodShift = configs[\"comparison.period.shift\"][0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3297,"value":"customCountriesMap = d3.index(configs[\"custom.countries\"], o => o.x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3317,"value":"customCountriesReverseMap = d3.index(configs[\"custom.countries\"], o => o._row)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3306,"value":"format = ({ period: `.${configs[\"decimal.points\"][\"period\"][0]}${kpiType == \"%\"?\"%\":\"f\"}`, deltas: `+.${configs[\"decimal.points\"][\"deltas\"][0]}f` })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3302,"value":"circleRadius = ({ min: configs[\"circle.radius\"][\"min\"][0], max: configs[\"circle.radius\"][\"max\"][0] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3489,"value":"spark = ({\n stroke: \"black\",\n fill: \"#e1e1e1\" \n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"comparison_type = markerType == \"Spike\"?[\n {name: \"Period\", shift: 0},\n {name: \"Comparison\", shift: comparisonPeriodShift}\n] : [\n {name: \"Period\", shift: 0}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2357,"value":"AggregateId = customCountriesMap.get(\"NET\")._row","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3089,"value":"### TopoJSON and related","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2968,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"features = new Map( \n //regions.features.map(o => [o.properties.region, o])\n countries.features.map(o => [o.properties.name, o])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2855,"value":"world = await d3.json(\n \"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2853,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2865,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3057,"value":"### Imports and Requires","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2871,"value":"import { projectionInput } from \"@fil/d3-projections\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"import {ramp} from \"@d3/color-schemes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"import {Scrubber} from \"@mtsvelik/styled-scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3631,"value":"import {set} from \"@observablehq/synchronized-inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3636,"value":"import {clearableRadio} from \"@saneef/is-observable-inputs-style-able\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 31:"$30:body"