2b:null 2c:["$","title",null,{"children":"Mercator country choropleth with legend, specifiable label orientation, and step-wise hover tooltip | Noble | Observable"}] 31:T3204,function globalChoropleth() { d3.select("#chart").selectAll("svg").remove() // defined via accessor functions var geojson, data, title, width, height, activeCat, legendLabels, countryLabelOrientations, showTooltip, tooltipSteps, tooltipEmphasizedTextDelimiter, tooltipReadingTime, exceptionalKeys = [], // keys that exist alongside country names, for instance 'Average' or 'Overall' colorScheme = "red-green" // defined internally var step = d3.scaleLinear().domain([1, 8]).range([1, 100]), colorRedGreen = d3.scaleLinear() .domain([1, step(2), step(3), step(4), step(5), step(6), step(7), 100]) .range(['#d73027', '#f46d43', '#fdae61', '#fee08b', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850']) .interpolate(d3.interpolateHcl), colorBlueGreen = d3.scaleLinear() .domain([1, step(2), step(3), step(4), step(5), step(6), step(7), 100]) .range(d3.schemeYlGn[7]) .interpolate(d3.interpolateHcl), color = (colorScheme === "red-green") ? colorRedGreen : colorBlueGreen, blankColor = 'rgba(144, 144, 144, 0.1)', countriesOfInterest, svg, projection, path, countries, countryLabels, legend, tooltip function chart(selection) { selection.each(function() { // set up svg svg = d3.select(this).append('svg') .attr('width', width) .attr('height', height) .style('font', '12px serif') // set up mercator projection projection = d3.geoMercator() .scale(width / 2 / (Math.PI * 0.88)) .translate([width / 2, height / 2]) // set up path generator path = d3.geoPath() .projection(projection) // filter out countries to be colorized/labeled countriesOfInterest = Object .keys(data[activeCat]) .filter(k => !exceptionalKeys.includes(k)) // set up groups countries = svg.append('g').attr('class', 'countries') countryLabels = svg.append('g').attr('class', 'country-labels') legend = svg.append('g').attr('class', 'legend') // initialize country wrapping groups countries.selectAll('g') .data(geojson.features) .enter().append('g') .attr('class', 'country') .attr('id', (d) => d.properties.NAME) // initialize country paths countries.selectAll('g').each(function() { let d = d3.select(this).datum() d3.select(this).append('path') .attr('d', () => path(d)) .style('stroke', 'rgba(144, 144, 144, 0.07)') .style('stroke-width', 1) .style('fill', blankColor) }) // colorize country paths countries.selectAll('path') .call(colorize) .call(bindMouseEvents) // add labels to country groups countryLabels.selectAll('g') .data(geojson.features.filter(f => isOfInterest(f))) .enter().append('g') .call(label) // add legend legend.call(addLegend) // add tooltip if (showTooltip) { tooltip = stepwiseTooltip() .steps(tooltipSteps) .emphasizedTextDelimiter(tooltipEmphasizedTextDelimiter) .readingTime(tooltipReadingTime) svg.call(tooltip) } }) } // --- helpers ---------------------------------- // colorize the selection function colorize(selection) { selection.each(function() { d3.select(this) .transition() .duration(250) .style('fill', d => { if (!d || !activeCat) return blankColor let countryName = d.properties.NAME let val = parseFloat(data[activeCat][countryName]) return (val) ? color(val) : blankColor }) }) return selection } // check if a feature is of interest (i.e., should be colorized/labeled) function isOfInterest(d) { return countriesOfInterest.includes(d.properties.NAME) } // if specified feature's geometry is a MultiPolygon, return // the same feature with a new geometry containing just the // largest polygon function extractLargestPolygon(feature) { let largestPolygonArea = 0, largestPolygon = null feature.geometry.coordinates.forEach((multiPolygon, i) => { let polygon = multiPolygon[0], area = d3.polygonArea(polygon) if (area > largestPolygonArea) { largestPolygonArea = area largestPolygon = polygon } }) let newFeature = Object.assign({}, feature, { geometry: { type: "Polygon", coordinates: largestPolygon } }) return newFeature } // add labels to selected country groups function label(selection) { selection.each(function() { let d = d3.select(this).datum() if (!isOfInterest(d)) return // if geometry includes island territories, // calculate centroid of metropole, which we'll // presume to be largest defined polygon let metropole = extractLargestPolygon(d), centroid = d3.polygonCentroid(metropole.geometry.coordinates), projectedCentroid = projection(centroid) let g = d3.select(this).append('g') .attr('class', 'label') let circle = g.append('circle') .attr('cx', projectedCentroid[0]) .attr('cy', projectedCentroid[1]) .attr('r', 5) .attr('fill', '#2e2e33') .attr('stroke', '#eee') .attr('stroke-width', 1) .attr('pointer-events', 'none') let centroidBBox = circle.node().getBBox(), centroidWidth = centroidBBox.width, centroidHeight = centroidBBox.height let text = g.append('text') .attr('font-size', '1.4em') .attr('x', 0) .attr('y', 0) .attr('pointer-events', 'none') .text(d.properties.NAME) let textBBox = text.node().getBBox(), textWidth = textBBox.width, textHeight = textBBox.height let padding = 4 text .attr('x', (d) => { let orientation = countryLabelOrientations[d.properties.NAME] let x = projectedCentroid[0] if (!orientation) orientation = "top" // nudge text to right or left of centroid if (orientation.includes("right")) x += padding + centroidWidth else if (orientation.includes("left")) x -= textWidth + padding + centroidWidth else x -= textWidth / 2 return x }) .attr('y', (d) => { let orientation = countryLabelOrientations[d.properties.NAME] let y = projectedCentroid[1] if (!orientation) orientation = "top" // nudge text to top or bottom of centroid if (orientation.includes("top")) y -= padding + centroidHeight else if (orientation.includes("bottom")) y += padding + textHeight else y += centroidHeight / 2 return y }) }) return selection } // bind mouse events to selection function bindMouseEvents(selection) { selection.each(function() { let _this = d3.select(this), datum = _this.datum() // if this country isn't of interest, end callback if (!isOfInterest(datum)) { return } // bind mouseover/mouseout functions _this.attr('cursor', 'pointer') .on('mouseover', onMouseOver) .on('mouseout', onMouseOut) // make note of default stroke let defaultStroke = _this.style('stroke') // on hover, dull other countries and focus this one function onMouseOver() { // show tooltip if (tooltip) tooltip .hide() .clear() .steps(tooltipSteps[datum.properties.NAME]) .update() .show() .start() // dull other countries countries.selectAll('path') .filter(d => isOfInterest(d) && d !== datum) .transition() .duration(140) .style('stroke', defaultStroke) .style('opacity', 0.5) // dull other country labels countryLabels.selectAll('.label') .filter(d => isOfInterest(d) && d !== datum) .transition() .duration(140) .style('opacity', 0.5) // focus this country _this.transition() .duration(140) .style('opacity', 1) .style('stroke', '#1BCFD3') .attr('transform', 'scale(1.002)') } // on unhover, return all countries to original styles function onMouseOut() { // hide tooltip if (tooltip) tooltip.hide().clear() // return countries to original styles countries.selectAll('path') .filter(d => isOfInterest(d) && d !== datum) .transition() .duration(140) .style('opacity', 1) // return country labels to original styles countryLabels.selectAll('.label') .filter(d => isOfInterest(d) && d !== datum) .transition() .duration(140) .style('opacity', 1) // return this country to original styles _this.transition() .duration(140) .style('stroke', defaultStroke) .attr('transform', '') } }) } // add a legend to the selection function addLegend(selection) { selection.each(function() { let _this = d3.select(this) let linear = d3.scaleLinear() .domain(color.domain()) .range(color.range()) let shapeWidth = 30, numCells = 11 let legendLinear = d3.legendColor() .shapeWidth(shapeWidth) .cells(numCells) .orient('horizontal') .scale(linear) .shape('circle') .labels((d) => { if (!legendLabels) return "" if (legendLabels.low && 0 === d.i) return legendLabels.low if (legendLabels.high && d.generatedLabels.length - 1 === d.i) return legendLabels.high if (legendLabels.middle && Math.floor(d.generatedLabels.length / 2) === d.i) return legendLabels.middle return "" }) // apply legend _this.call(legendLinear) let padding = 24, x = width - selection.node().getBBox().width - padding, y = height - padding - _this.node().getBBox().height _this.attr('transform', `translate(${x}, ${y})`) }) } // --- accessors -------------------------------- chart.geojson = function(value) { if (!arguments.length) return geojson geojson = value return chart } chart.data = function(value) { if (!arguments.length) return data data = value return chart } chart.title = function(value) { if (!arguments.length) return title title = value return chart } chart.width = function(value) { if (!arguments.length) return width width = value return chart } chart.height = function(value) { if (!arguments.length) return height height = value return chart } chart.activeCat = function(value) { if (!arguments.length) return activeCat activeCat = value return chart } chart.legendLabels = function(value) { if (!arguments.length) return legendLabels legendLabels = value return chart } chart.countryLabelOrientations = function(value) { if (!arguments.length) return countryLabelOrientations countryLabelOrientations = value return chart } chart.exceptionalKeys = function(value) { if (!arguments.length) return exceptionalKeys exceptionalKeys = value return chart } chart.colorScheme = function(value) { if (!arguments.length) return colorScheme colorScheme = value color = (colorScheme === "red-green") ? colorRedGreen : colorBlueGreen return chart } chart.showTooltip = function(value) { if (!arguments.length) return showTooltip showTooltip = value return chart } chart.tooltipSteps = function(value) { if (!arguments.length) return tooltipSteps tooltipSteps = value return chart } chart.tooltipEmphasizedTextDelimiter = function(value) { if (!arguments.length) return tooltipEmphasizedTextDelimiter tooltipEmphasizedTextDelimiter = value return chart } chart.tooltipReadingTime = function(value) { if (!arguments.length) return tooltipReadingTime tooltipReadingTime = value return chart } // --- updater ------------------------------ chart.update = function() { // re-colorize countries svg.select('.countries') .selectAll('path') .call(colorize) return chart } return chart }32:T2a0a,function stepwiseTooltip() { // defined via accessor functions let width = 200, height = 200, margin = { top: 0, right: 0, left: 20, bottom: 20 }, backgroundColor = '#fff', ringBackgroundColor = '#eee', ringForegroundColor = '#1BCFD3', textColor = '#414141', orient = "bottom-left", steps, emphasizedTextDelimiter, emphasizedTextColor = '#1BCFD3', readingTime // defined internally let state = { i: -1, interval: null }, g, circle, ringFg, wrapSize, stepElements, r = width / 2, tau = Math.PI * 2, arc = d3.arc() .outerRadius(r) .innerRadius(r - 2) .startAngle(0) function chart(selection) { selection.each(function() { // grab width and height of wrapping element to be used // in 'position' helper function wrapSize = { width: selection.attr('width'), height: selection.attr('height') } // define wrapper group, add inner wrap centered within outer wrap g = selection.append('g') .attr('class', 'stepwise-tooltip') .call(position) .append('g') .attr('transform', `translate(${width / 2}, ${height / 2})`) // hide tooltip by default, must manually trigger visibility via // 'show' and 'hide' helper functions g.style('opacity', 0) // add bg circle circle = g.append('circle') .attr('class', 'underlay') .attr('r', r) .attr('fill', backgroundColor) // populate a group with elements whose visibility will be toggled // as we progress through the animation stepElements = g.append('g') .attr('class', 'step-elements') .call(addStepElements) // add progress ring background let ringBg = g.append('path') .attr('class', 'ring-background') .datum({ endAngle: tau }) .attr('d', arc) .style('stroke', ringBackgroundColor) .style('stroke-width', '2px') // add progress ring foreground addRingFg() }) } // --- helpers ----------------------- function addRingFg() { ringFg = g.append('path') .attr('class', 'ring-foreground') .datum({ endAngle: 0 }) .attr('d', arc) .style('stroke', ringForegroundColor) .style('stroke-width', '2px') } function addStepElements(selection) { selection.each(function() { let stepElements = selection.selectAll('g') .data(steps) .enter().append('g') .attr('class', 'step-element') .attr('index', (d, i) => i) .attr('text-anchor', 'middle') .style('opacity', 0) .append('text') .text(d => d) .each(function() { d3.select(this) .call(wrap, { scaleFactor: 0.75, lineHeight: 14 }) .call(emphasize) }) }) } function position(selection) { let translate if ("bottom-left" === orient) translate = `translate(${margin.left}, ${wrapSize.height - height - margin.bottom})` if ("bottom-right" === orient) translate = `translate(${wrapSize.width - width - margin.right}, ${wrapSize.height - height - margin.bottom})` if ("top-left" === orient) translate = `translate(${margin.left}, ${margin.top})` if ("top-right" === orient) translate = `translate(${wrapSize.width - width - margin.right}, ${margin.top})` selection.attr('transform', translate) } function arcTween(newAngle) { return function(d) { var interpolate = d3.interpolate(d.endAngle, newAngle) return function(t) { d.endAngle = interpolate(t) return arc(d) } } } function step() { let prevIndex = state.i, nextIndex = (steps.length - 1 === prevIndex) ? 0 : prevIndex + 1, prevEl = stepElements.selectAll('.step-element').filter(d => d === steps[prevIndex]), nextEl = stepElements.selectAll('.step-element').filter(d => d === steps[nextIndex]) // hide prev step element prevEl.transition() .duration(250) .style('opacity', 0) // show next step element nextEl.transition() .duration(250) .style('opacity', 1) // restart progress ring animation if (0 === nextIndex && -1 !== prevIndex) restartRingAnimation() // update state state.i = nextIndex } function restartRingAnimation() { let tweenDuration = readingTime * steps.length ringFg .datum({ endAngle: 0 }) .transition() .duration(tweenDuration) .ease(d3.easeLinear) .attrTween('d', arcTween(tau)) } function emphasize(selection) { if (!emphasizedTextDelimiter) return selection.selectAll('tspan') .each(function() { let text = d3.select(this).text() if (text.indexOf(emphasizedTextDelimiter) >= 0) { let buffer = text .split(emphasizedTextDelimiter) .map((str, i) => (i === 0) ? str + " " : str) d3.select(this).html("") .selectAll('tspan') .data(buffer) .enter().append('tspan') .text(d => d) .attr('fill', (d, i) => (0 === i) ? emphasizedTextColor : 'auto') } }) } function wrap(selection, params) { let scaleFactor = (params && params.scaleFactor) ? params.scaleFactor : 0.6, lineHeight = (params && params.lineHeight) ? params.lineHeight : 18, text = selection.text(), _words = words(text), _targetWidth = targetWidth(text), _lines = lines(_words, _targetWidth), _textRadius = textRadius(_lines), tooltipRadius = circle.attr('r') // split text into words function words(text) { let words = text.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/ if (!words[words.length - 1]) words.pop(); if (!words[0]) words.shift(); return words; } // measure simulated text width function measureWidth(text) { const context = document.createElement("canvas").getContext("2d"); return context.measureText(text).width; } // calculate target width function targetWidth(text) { return Math.sqrt(measureWidth(text.trim()) * lineHeight) } // split text into lines function lines(words, targetWidth) { let line; let lineWidth0 = Infinity; const lines = []; for (let i = 0, n = words.length; i < n; ++i) { let lineText1 = (line ? line.text + " " : "") + words[i]; let lineWidth1 = measureWidth(lineText1); if ((lineWidth0 + lineWidth1) / 2 < targetWidth) { line.width = lineWidth0 = lineWidth1; line.text = lineText1; } else { lineWidth0 = measureWidth(words[i]); line = {width: lineWidth0, text: words[i]}; lines.push(line); } } return lines; } // calculate simulated text radius function textRadius(lines) { let radius = 0; for (let i = 0, n = lines.length; i < n; ++i) { const dy = (Math.abs(i - n / 2 + 0.5) + 0.5) * lineHeight; const dx = lines[i].width / 2; radius = Math.max(radius, Math.sqrt(dx ** 2 + dy ** 2)); } return radius; } let wrappedText = selection.text("") .attr("transform", `scale(${tooltipRadius / _textRadius * scaleFactor})`) .selectAll("tspan") .data(_lines) .enter().append("tspan") .attr("x", 0) .attr("y", (d, i) => (i - _lines.length / 2 + 0.8) * lineHeight) .text(d => d.text) return selection } // --- updaters ---------------------- chart.update = function() { stepElements.remove() stepElements = g.append('g') .attr('class', 'step-elements') .call(addStepElements) return chart } chart.show = function(duration) { let fadeInDuration = duration || 250 g.transition() .duration(fadeInDuration) .style('opacity', 1) return chart } chart.hide = function(duration) { let fadeOutDuration = duration || 250 g.transition() .duration(fadeOutDuration) .style('opacity', 0) return chart } chart.start = function() { // step to first item step() // only animate if there's more than one step, otherwise leave // this step visible indefinitely if (steps.length > 1) { // active progress ring animation restartRingAnimation() // step once each time the specified readingTime has passed state.interval = d3.interval(step, readingTime) } return chart } chart.stop = function() { state.interval.stop() return chart } chart.clear = function() { // stop interval if (state.interval) { state.interval.stop() } // update steps steps = [] stepElements.remove() // update ring foreground ringFg.remove() addRingFg() // reset state state = { interval: null, i: -1 } return chart } // --- accessors --------------------- chart.width = function(value) { if (!arguments.length) return width width = value r = value / 2 return chart } chart.height = function(value) { if (!arguments.length) return height height = value return chart } chart.margin = function(value) { if (!arguments.length) return margin margin = value return chart } chart.backgroundColor = function(value) { if (!arguments.length) return backgroundColor backgroundColor = value return chart } chart.ringBackgroundColor = function(value) { if (!arguments.length) return ringBackgroundColor ringBackgroundColor = value return chart } chart.ringForegroundColor = function(value) { if (!arguments.length) return ringForegroundColor ringForegroundColor = value return chart } chart.textColor = function(value) { if (!arguments.length) return textColor textColor = value return chart } chart.orient = function(value) { if (!arguments.length) return orient orient = value return chart } chart.steps = function(value) { if (!arguments.length) return steps steps = value return chart } chart.emphasizedTextDelimiter = function(value) { if (!arguments.length) return emphasizedTextDelimiter emphasizedTextDelimiter = value return chart } chart.emphasizedTextColor = function(value) { if (!arguments.length) return emphasizedTextColor emphasizedTextColor = value return chart } chart.readingTime = function(value) { if (!arguments.length) return readingTime readingTime = value return chart } return chart }33:[] 2f:{"id":"44887171ef226d80","slug":null,"title":"Mercator country choropleth with legend, specifiable label orientation, and step-wise hover tooltip","thumbnail":"153849f3f161fbb40a9fba37dbaa1fbba19468fea7491f0f89329617559997eb","access_level":"public","create_time":"$D2023-10-27T23:23:49.751Z","update_time":"$D2023-10-27T23:23:49.751Z","view_time":null,"first_public_time":"$D2023-10-27T23:23:49.751Z","has_unpublished_edits":null,"fork":{"id":"0e866b3c3e288563","slug":"global-choropleth-mercator","title":"Mercator country choropleth with legend, specifiable label orientation, and step-wise hover tooltip","owner":{"id":"c53761f873c0cf85","login":"bradysheridan","name":"Brady Sheridan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f1de0844e9cff86a","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":"starter_2024","bio":"connecting dots, thoughts & plots"},"version":2130,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"04c32d8a18696e81","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":null,"bio":"connecting dots, thoughts & plots"}],"members":[{"type":"individual","id":"04c32d8a18696e81","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mercator country choropleth with legend, specifiable label orientation, and step-wise hover tooltip","cells":[{"id":0,"value":"md`# Mercator country choropleth with legend, specifiable label orientation, and step-wise hover tooltip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`### CSV`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof csv = html`\n \ncat,Overall,United States,Mexico,Brazil,China,India,Japan,United Kingdom,France,Germany,Italy\nTOP-2,67%,59%,83%,77%,80%,66%,55%,62%,51%,60%,73%\nVery optimistic,26%,22%,39%,43%,45%,37%,11%,17%,8%,14%,26%\nSomewhat optimistic,40%,37%,44%,34%,35%,29%,45%,45%,43%,46%,47%\nSomewhat pessimistic,17%,21%,8%,12%,12%,15%,19%,20%,24%,24%,16%\nVery pessimistic,7%,7%,5%,7%,5%,16%,3%,7%,6%,7%,6%\nDon't know / Not sure,9%,12%,5%,4%,3%,3%,22%,10%,19%,10%,5%\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1785,"value":"md `### Country label rotater`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2094,"value":"md `Select country`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1792,"value":"countrySelect = {\n var countries = parsedCsv.columns.filter(k => !['cat', 'Overall'].includes(k))\n var input = DOM.select(countries)\n input.value = countries[0]\n return input\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2098,"value":"md `Then click on an orientation to rotate its label.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2022,"value":"orientationSelect = {\n var options = ['top-left', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left'];\n var input = DOM.select(options);\n input.multiple = true\n input.style = \"height: 150px;\"\n input.oninput = () => {\n countryLabelOrientations[countrySelect.value] = input.value\n mutable countryLabelOrientations = countryLabelOrientations\n input.value = \"test\"\n }\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1910,"value":"md `### Leftmost legend label:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1891,"value":"viewof legendLabelLeft = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1903,"value":"md `### Rightmost legend label:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1894,"value":"viewof legendLabelRight = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"html`

Download

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"html`

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"style = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1946,"value":"parsedCsv = d3.csvParse(csv)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"render = d3.select(\"#chart\").call(map)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"download = d3.select('#download').on('click', () => {\n let size = d3.select(\"#chart\").node().getBoundingClientRect(),\n content = d3.select(\"#chart\").html(),\n cloneId = `clone-${Math.random()}`,\n filename = \"map.png\"\n \n const div = d3.select('body').append('div')\n .html(content)\n .attr('class', 'clone')\n .attr('id', cloneId)\n .style('width', `${size.width * 3}px`)\n .style('height', `${size.height * 3}px`)\n .style('background', 'linear-gradient(to top right, #d7f4ff, #d2ffe5)')\n .style('display', 'flex')\n .style('justify-content', 'center')\n .style('align-items', 'center')\n\n div.select('svg').attr('transform', 'scale(3)')\n\n // download image\n domToImage\n .toBlob(div.node())\n .then((blob) => fileSaver.saveAs(blob, filename))\n .catch((err) => console.error(err))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"map = globalChoropleth()\n .data(data.formattedData)\n .activeCat(data.activeCat)\n .legendLabels(data.legendLabels)\n .title(data.title)\n .colorScheme(data.colorScheme)\n .countryLabelOrientations(data.countryLabelOrientations)\n .width(960)\n .height(500)\n .geojson(geojson)\n .exceptionalKeys(['Overall'])\n .showTooltip(true)\n .tooltipEmphasizedTextDelimiter(\"::\")\n .tooltipReadingTime(2000)\n .tooltipSteps({\n \"United States\": [\"1 United States\", \"2 United States\", \"3 United States\"],\n \"Mexico\": [\"1 Mexico\", \"2 Mexico\", \"3 Mexico\", \"4 Mexico\", \"5 Mexico\"],\n \"Brazil\": [\"1 Brazil\", \"2 Brazil\"],\n \"United Kingdom\": [\"1 United Kingdom\", \"2 United Kingdom\", \"3 United Kingdom\", \"4 United Kingdom\"],\n \"France\": [\"1 France\", \"2 France\", \"3 France\", \"4 France\", \"5 France\"],\n \"Germany\": [\"1 Germany\"],\n \"Italy\": [\"1 Italy\"],\n \"India\": [\"1 India\", \"2 India\"],\n \"China\": [\"1 China\", \"2 China\", \"3 China\", \"4 China\", \"5 China\"],\n \"Japan\": [\"1 Japan\", \"2 Japan\", \"3 Japan\"],\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"geojson = d3.json(\"https://gist.githubusercontent.com/bradysheridan/ce26003dfc6960fd37942ff6cbedeb1b/raw/05e3069813bc0e6a37b25b36a98a408a2821d316/world.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1965,"value":"mutable countryLabelOrientations = ({\n \"United States\": \"top-left\",\n \"Mexico\": \"bottom-left\",\n \"Brazil\": \"top\",\n \"United Kingdom\": \"top-left\",\n \"France\": \"bottom-left\",\n \"Germany\": \"top-right\",\n \"Italy\": \"bottom-right\",\n \"India\": \"bottom-right\",\n \"China\": \"left\",\n \"Japan\": \"bottom-right\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1437,"value":"data = formatData({\n csv: csv,\n activeCat: legendLabelRight,\n colorScheme: \"red-green\",\n legendLabels: {\n low: legendLabelLeft,\n high: legendLabelRight\n },\n countryLabelOrientations: countryLabelOrientations,\n changes: [\n { from: [\"Very optimistic\", \"Somewhat optimistic\"], to: \"Optimistic\" },\n { from: [\"Very pessimistic\", \"Somewhat pessimistic\"], to: \"Pessimistic\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"formatData = data => {\n let parsedCsv = d3.csvParse(data.csv)\n\n data.formattedData = (data.changes)\n ? formatConsolidated(parsedCsv, data.changes)\n : formatCategorical(parsedCsv)\n\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"formatCategorical = (arr) => {\n let json = {}\n \n arr.forEach((o) => {\n json[o.cat] = {}\n Object\n .keys(o)\n .filter(k => k !== \"cat\")\n .forEach(k => json[o.cat][k] = parseFloat(o[k]))\n })\n \n return json\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"formatConsolidated = (arr, changes) => {\n let json = {}\n \n // for each change\n changes.forEach((change) => {\n // for each collection of data\n arr.forEach((data) => {\n // if category of this data is to be consolidated\n if (change.from.includes(data.cat)) {\n // if first pass, initialize consolidated data's\n // destination obj with new key\n if (!json[change.to]) json[change.to] = {}\n // for each key in data\n Object.keys(data)\n // filter out category specifier\n .filter(k => k !== 'cat')\n // add this key's value to sum\n .forEach(k => (!json[change.to][k])\n ? json[change.to][k] = parseInt(data[k])\n : json[change.to][k] += parseInt(data[k]))\n }\n })\n })\n\n return json\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require('d3', 'd3-svg-legend', 'd3-polygon')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"domToImage = require('https://bundle.run/dom-to-image@2.6.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1592,"value":"fileSaver = require('https://bundle.run/file-saver@2.0.5')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1788,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"