2e:null 2f:["$","title",null,{"children":"Human Suffering 1960-2016 | Jianan Li | Observable"}] 34:T8b8,chart = { console.log('Redraw chart!') const svg = d3.select(DOM.svg(width, height)) .attr('id', 'svg-globe') .style('background-color', '#bbb') // Add gradient as a def element to be reference later const defs = svg.append("defs"); const ticks = [-lifeExpectancyDeltaMax, 0, lifeExpectancyDeltaMax]; const linearGradient = defs .append("linearGradient") .attr("id", "linear-gradient"); linearGradient .selectAll("stop") .data( ticks.map((t, i, n) => ({ offset: `${(100 * i) / (n.length-1)}%`, color: color(t) })) ) .enter() .append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); // Add the sphere layer svg .append("g") .attr("id", "sphere-container") .append("path") .datum(sphere) .attr("fill", "#E8F5FF") .attr("d", geoGenerator); // Add Chloropleth svg .append("g") .attr("id", "chloropleth-container") .selectAll("path") .data(countries, d => d.id) .enter() .append("path") .attr('id', d => `country-${d.id}`) .attr("fill", d => life.has(d.id) && life.get(d.id)['1961delta'] ? color(+life.get(d.id)['1961delta']) : "#eee" ) .attr("d", geoGenerator) .on("mouseover", onMouseOverArea) .on("mousemove", onMouseMoveArea) .on("mouseout", onMouseOutArea); // Add country border svg .append("g") .attr("id", "border-container") .append("path") .datum(interiorBorders) .attr('id', "border") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", geoGenerator); // Add country labels svg .append("g") .attr("id", "country-label-container") .selectAll("text") .data(countries, d => d.id) .enter() .append("text") .attr("class", "country-label") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .text(d => d.properties.name) .attr("transform", generateCountryLabelTransformValue) .style('visibility', 'hidden') .style('font', generateCountryLabelFontValue) .style('opacity', 0) .style("pointer-events", "none") return svg.node(); }35:T16c0,journey = [ { country: "Vietnam", numericCode: "704", projectionScaleZoomOut: 400, projectionScaleZoomIn: 1100, startYear: 1968, endYear: 1970, title: "Vietnam War", description: "Fought between North Vietnam and South Vietnam from 1955 to 1975, the Vietnam War was a proxy war between the United States and the Soviet Union. An estimated 1.3 to 4.2 million people were killed, with more than half being Vietnamese civilians.", link: "https://en.wikipedia.org/wiki/Vietnam_War", imgSrc: "https://github.com/Jianan-Li/File-Hosting/raw/master/Vietnam%20War.jpg" }, { country: "Cambodia", numericCode: "116", projectionScaleZoomOut: 1100, projectionScaleZoomIn: 1100, startYear: 1971, endYear: 1977, title: "Cambodian Genocide", description: "With the goal of turning the country into a socialist agrarian republic, the Khmer Rouge regime forced millions into labor camps where they were starved and abused. An estimated 1.7 to 1.9 million Cambodian (21—24% of the population) died during the 4-year period.", link: "https://en.wikipedia.org/wiki/Cambodian_genocide", imgSrc: "https://github.com/Jianan-Li/File-Hosting/raw/master/Cambodian%20Genocide.jpg" }, { country: "Timor-Leste", numericCode: "626", projectionScaleZoomOut: 900, projectionScaleZoomIn: 1800, startYear: 1972, endYear: 1977, title: "East Timor Genocide", description: "During the US-backed invasion and occupation of East Timor from 1975 to 1999, the Indonesian military commited genocide against the East Timorese people. An estimated 100,000 to 300,000 East Timorese (14—42% of the population) were killed or died of starvation.", link: "https://en.wikipedia.org/wiki/East_Timor_genocide", imgSrc: "https://github.com/Jianan-Li/File-Hosting/raw/master/Indonesian%20Invasion%20of%20East%20Timor.jpg" }, { country: "Iran", numericCode: "364", projectionScaleZoomOut: 500, projectionScaleZoomIn: 950, startYear: 1978, endYear: 1982, title: "Iran–Iraq War", description: "In an attempt to replace Iran as the dominant Persian Gulf state, Iraq invaded Iran in 1980, starting the 8-year long war between the two countries. It is estimated that over a million lives were lost during the war.", link: "https://en.wikipedia.org/wiki/Iran%E2%80%93Iraq_War", imgSrc: "https://github.com/Jianan-Li/File-Hosting/raw/master/Iran%E2%80%93Iraq%20War.jpg" }, { country: "Rwanda", numericCode: "646", projectionScaleZoomOut: 500, projectionScaleZoomIn:2000, startYear: 1987, endYear: 1992, title: "Rwandan Genocide", description: "The Rwandan genocide was a mass slaughter of the Tutsis directed by members of the Hutu-majority government during the Rwandan Civil War from 1990 to 1994. An estimated 500,000 to 1,000,000 Rwandans were killed, constituting an estimated 70% of the Tutsi population.", link: "https://en.wikipedia.org/wiki/Rwandan_genocide", imgSrc: "https://github.com/Jianan-Li/File-Hosting/raw/master/Rwandan%20Genocide.jpg" }, { country: "Zambia", numericCode: "894", projectionScaleZoomOut: 680, projectionScaleZoomIn: 680, startYear: 1985, endYear: 2002, title: "HIV/AIDS Pandemic in Sub-Saharan Africa", description: "The 1990s was a bleak time in the history of AIDS in Africa. In 1993 there were an estimated 9 million people infected in the sub-Saharan region out of a global total of 14 million. In the countries most affected, AIDS lowered life expectancy by about twenty years.", link: "https://en.wikipedia.org/wiki/HIV/AIDS_in_Africa", imgSrc: "https://github.com/Jianan-Li/File-Hosting/raw/master/AIDS.jpg" }, { country: "Kazakhstan", numericCode: "398", projectionScaleZoomOut: 400, projectionScaleZoomIn: 500, startYear: 1988, endYear: 1993, title: "Dissolution of the Soviet Union", description: "Following the dissolution of the Soviet Union in 1991, Russia experienced one of the most extreme increases in mortality in modern history. Hidden behind the high rates of cardiovascular disease and injury caused by alcohol abuse is a sense of being unneeded by the state.", link: "https://en.wikipedia.org/wiki/Dissolution_of_the_Soviet_Union", imgSrc: "https://cdn.theatlantic.com/assets/media/img/photo/2011/12/20-years-since-the-fall-of-the-soviet-union/u01_77728401/main_1200.jpg" }, { country: "Dem. Rep. Korea", numericCode: "408", projectionScaleZoomOut: 700, projectionScaleZoomIn: 1335, startYear: 1992, endYear: 1997, title: "North Korean Famine", description: "A combination of government mismanagement, loss of Soviet support, and a series of floods and droughts lead to the North Korean famine from 1994 to 1998. An estimated 240,000 to 3.5 million North Koreans died from starvation or hunger-related illnesses.", link: "https://en.wikipedia.org/wiki/North_Korean_famine", imgSrc: "https://github.com/Jianan-Li/File-Hosting/raw/master/North%20Korean%20Famine.jpg" }, { country: "Syria", numericCode: "760", projectionScaleZoomOut: 500, projectionScaleZoomIn: 1630, startYear: 2007, endYear: 2013, title: "Syrian Civil War", description: "What started as a peaceful protest in 2011 demanding democratic reforms quickly escalated into full-blown warfare involving several nations, rebel groups and terrorist organizations. An estimated 370,000 to 570,000 people have been killed, and more than 5 millions became refugees.", link: "https://en.wikipedia.org/wiki/Syrian_Civil_War", imgSrc: "https://www.history.com/.image/c_limit%2Ccs_srgb%2Cq_auto:good%2Cw_1720/MTU4NTQyMDg3Mzc2MDg2Mzcy/syria-civil-war-getty-462518530.webp" }, ]36:T89b,addLegend = () => { let svg = d3.select(chart) // Add legend scale // const legendContainer = svg // .append("g") // .attr('id', 'legend-container') // .attr("transform", `translate(${width/2-50},${height - 30})`); // The right 1/3 showing relevant information let legendContainer = svg.append('foreignObject') .attr('x', width*(2/3)) .attr('y', height*0.85+20) .attr('width', width*(1/3)) .attr('height', height*0.15-20) .append("xhtml:div") .attr('id', 'legend-container') .style('background-color', '#fff') .style('box-shadow', '0 1px 4px 0 rgba(0, 0, 0, 0.37)') .style('border-radius', '5px 5px 0px 0px') .style('margin-left', `10px`) .style('width', `${width*(1/3)-20}px`) .style('height', `${height*0.15-20}px`) .style('overflow', 'hidden') .style('opacity', 0); let legendContainerSVG = legendContainer .append("svg") .style('width', `${width/3-20}px`) .style('height', `${height*0.2-20}px`) // The color gradient scale legendContainerSVG.append("rect") .attr('transform', `translate(${(width/3-20)/2},${(height*0.15-20)/2})`) .attr("height", `${width/120}px`) .attr("x", xScale(-2)) .attr("y", `${width/240}px`) .attr("width", xScale(2) - xScale(-2)) .style("fill", `url(${location}#linear-gradient)`); // Title legendContainerSVG.append("text") .attr('transform', `translate(${(width/3-20)/2},${(height*0.15-20)/2})`) .attr("class", "caption") .attr("x", 0) .attr("y", -6) .attr("fill", "#000") .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", `${width/90}px`) .text(`Change in life expectancy from the previous year`); // Legend scale axis legendContainerSVG .call(xAxis) .select(".domain") .remove(); legendContainerSVG .selectAll('.tick') .selectAll('*') .attr('transform', `translate(${(width/3-20)/2},${(height*0.15-20)/2})`) legendContainerSVG .selectAll('.tick') .selectAll('text') .attr('font-size', `${width/100}px`) legendContainer .transition('show-legend-container') .duration(1000) .style('opacity', 1) }37:T5d7,addJourneyInfoContainer = () => { let svg = d3.select(chart) // The right 1/3 showing relevant information let journeyInfoContainer = svg.append('foreignObject') .attr('x', width*(2/3)) .attr('y', 10) .attr('width', width*(1/3)) .attr('height', height*0.85+10) .append("xhtml:div") .attr('id', 'journey-info-container') .style('background-color', '#fff') .style('box-shadow', '0 1px 4px 0 rgba(0, 0, 0, 0.37)') .style('border-radius', '5px') .style('margin-left', `10px`) .style('width', `${width*(1/3)-20}px`) .style('height', `${height*0.85}px`) .style('overflow', 'hidden') .style('opacity', 0); journeyInfoContainer.append("xhtml:img") .attr('id', 'journey-info-img') .style('width', '100%') let journeyInfoTextContainer = journeyInfoContainer.append("xhtml:div") .attr('id', 'journey-info-text-container') .style('padding', '20px') journeyInfoTextContainer.append("xhtml:h2") .attr('id', 'journey-info-header') .style("font-size", `${width/50}px`) journeyInfoTextContainer.append("xhtml:p") .attr('id', 'journey-info-description') .style('margin-top', '16px') .style("font-size", `${width / 81.25}px`) journeyInfoTextContainer.append("xhtml:a") .attr('id', 'journey-info-link') .style("font-size", `${width / 81.25}px`) journeyInfoContainer .transition('show-journey-info-container') .duration(1000) .style('opacity', 1) }38:T975,visitCountry = async () => { let svg = d3.select(chart) const currentEvent = journey[countryIndex] const country = countries.find(d => d.id === currentEvent.numericCode); const previousEventEndYear = (countryIndex > 0 && journey[countryIndex-1].endYear) || 1961 const currentEventTimeSpan = currentEvent.endYear - currentEvent.startYear // Check the current projection rotation const currentRotation = projection.rotate() const currentScale = projection.scale() const p1 = [currentRotation[0], currentRotation[1]] const p2 = country.properties.centroid; const r1 = currentRotation const r2 = [-p2[0], tilt - p2[1], 0]; // Construct interpolators const iv = Versor.interpolateAngles(r1, r2); // Scaling interpolator: choose between quadratic and linear interpolator let projectionScaleInterpolator; let zoomOutScale = currentEvent.projectionScaleZoomOut*(width/975) let zoomInScale = currentEvent.projectionScaleZoomIn*(width/975) projectionScaleInterpolator = quadraticInterpolator(zoomOutScale,zoomInScale) const yearTransitionInterpolator = d3.interpolateNumber(previousEventEndYear, currentEvent.startYear) const yearProgressionInterpolator = d3.interpolateNumber(currentEvent.startYear, currentEvent.endYear) updateJourneyInfo(currentEvent) // Show country labels svg .select("#country-label-container") .selectAll("text") .transition('show-country-label') .duration(1000) .style('opacity', 1) d3.transition("updateYearTransition") .duration(500) .ease(d3.easeQuad) .tween("updateYear", () => t => { mutable currentYear = Math.floor(yearTransitionInterpolator(t)) // updateOnYearChange(year) }) // Wait until completing move to new location await d3.transition("moveToNextLocation") .duration(5000) .ease(d3.easeQuad) .tween("render", () => t => { projection.rotate(iv(t)); projection.scale(projectionScaleInterpolator(t)); updateOnProjectionChange(); }) .end(); // .end() returns a promise so you can await on it // (wait for it to finish before performing the next transition) d3.transition("showEventTransition") .duration(currentEventTimeSpan*1000) .ease(d3.easeQuad) .tween("showEvent", () => t => { mutable currentYear = Math.floor(yearProgressionInterpolator(t)) // updateOnYearChange(year) }) }39:T7b4,class Versor { static fromAngles([l, p, g]) { l *= Math.PI / 360; p *= Math.PI / 360; g *= Math.PI / 360; const sl = Math.sin(l), cl = Math.cos(l); const sp = Math.sin(p), cp = Math.cos(p); const sg = Math.sin(g), cg = Math.cos(g); return [ cl * cp * cg + sl * sp * sg, sl * cp * cg - cl * sp * sg, cl * sp * cg + sl * cp * sg, cl * cp * sg - sl * sp * cg ]; } static toAngles([a, b, c, d]) { return [ Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180 / Math.PI, Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180 / Math.PI, Math.atan2(2 * (a * d + b * c), 1 - 2 * (c * c + d * d)) * 180 / Math.PI ]; } static interpolateAngles(a, b) { const i = Versor.interpolate(Versor.fromAngles(a), Versor.fromAngles(b)); return t => Versor.toAngles(i(t)); } static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) { a2 -= a1, b2 -= b1, c2 -= c1, d2 -= d1; const x = new Array(4); return t => { const l = Math.hypot(x[0] = a1 + a2 * t, x[1] = b1 + b2 * t, x[2] = c1 + c2 * t, x[3] = d1 + d2 * t); x[0] /= l, x[1] /= l, x[2] /= l, x[3] /= l; return x; }; } static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) { let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2; if (dot < 0) a2 = -a2, b2 = -b2, c2 = -c2, d2 = -d2, dot = -dot; if (dot > 0.9995) return Versor.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]); const theta0 = Math.acos(Math.max(-1, Math.min(1, dot))); const x = new Array(4); const l = Math.hypot(a2 -= a1 * dot, b2 -= b1 * dot, c2 -= c1 * dot, d2 -= d1 * dot); a2 /= l, b2 /= l, c2 /= l, d2 /= l; return t => { const theta = theta0 * t; const s = Math.sin(theta); const c = Math.cos(theta); x[0] = a1 * c + a2 * s; x[1] = b1 * c + b2 * s; x[2] = c1 * c + c2 * s; x[3] = d1 * c + d2 * s; return x; }; } }3a:[] 32:{"id":"4b5cd2654f690e9c","slug":"human-suffering-1960-2016","title":"Human Suffering 1960-2016","thumbnail":"2bc8bd93af0074a8e455b872654ef0bccec889c626a92f3b09bef984e0885852","access_level":"public","create_time":"$D2019-04-08T17:33:09.854Z","update_time":"$D2019-04-30T00:38:43.799Z","view_time":null,"first_public_time":"$D2019-04-09T18:43:58.410Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"881fc2b256e7c071","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":"starter_2024"},"version":749,"publish_version":749,"role":null,"authored":false,"authors":[{"type":"individual","id":"62f1170da871cbae","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":null}],"members":[{"type":"individual","id":"62f1170da871cbae","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Human Suffering 1960-2016","cells":[{"id":0,"value":"md`# Human Suffering 1960-2016`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md `Data →`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"viewof nextButton = {\n const button = html``;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"$$(\"#nextButton\").wrap('

');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md `### Story Navigation ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"countryIndex = {\n nextButton;\n console.log('Calculating the next countryIndex.')\n if (typeof this === 'undefined') yield -1\n else if (this === journey.length-1) {\n yield 0\n }\n else {\n let countryIndex=this\n yield ++countryIndex\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"i = {\n let i = this || 0;\n if (countryIndex !== -1) return yield i;\n while (true) {\n let [a,b,c] = projection.rotate()\n projection.rotate([a+1,b,c])\n updateOnProjectionChange()\n yield Promises.tick(100, i++);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"handleButtonClick = {\n if (countryIndex === -1) {\n if (d3.select('#quote-container').empty()) {\n showQuote()\n }\n }\n else {\n d3.select('#nextButton')\n .text(\"→\");\n \n if (d3.select('#quote-container').node()) {\n removeQuoteContainer()\n }\n if (projection.translate()[0] === width/2) {\n await moveToLeftTwoThirds() \n }\n if (d3.select('#journey-info-container').empty()) {\n addJourneyInfoContainer()\n }\n if (d3.select('#legend-container').empty()) {\n addLegend()\n }\n if (d3.select('.yearText').empty()) {\n addYear()\n }\n\n \n await visitCountry()\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"md `### Add/Remove elements ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"showQuote = () => {\n \n let svg = d3.select(chart)\n \n let quoteContainer = svg\n .append('g')\n .attr('id', 'quote-container')\n \n quoteContainer\n .append('rect')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', width)\n .attr('height', height)\n .attr('fill', '#aaa')\n .attr('fill-opacity', '0.5')\n \n quoteContainer\n .append('text')\n .attr('text-anchor', 'middle')\n .attr('x', width/2)\n .attr('y', height*0.4)\n .style('font', `bold ${width/24}px Palatino, serif`)\n .text('Human suffering anywhere concerns')\n \n quoteContainer\n .append('text')\n .attr('text-anchor', 'middle')\n .attr('x', width/2)\n .attr('y', height*0.4 + width/24*1.4)\n .style('font', `bold ${width/24}px Palatino, serif`)\n .text('men and women everywhere.')\n \n quoteContainer\n .append('text')\n .attr('text-anchor', 'middle')\n .attr('x', width/2)\n .attr('y', height*0.4 + width/24*1.4*2.8)\n .style('font', `${width/30}px Palatino, serif`)\n .text('Elie Wiesel')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"removeQuoteContainer = () => {\n let svg = d3.select(chart)\n \n // Remove quote container\n svg\n .select('#quote-container')\n .transition('remove-quote-container')\n .duration(1000)\n .style('opacity', 0)\n .remove()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"addYear = () => {\n \n let svg = d3.select(chart)\n \n // Display the current year\n let yearText = svg.append('text')\n .attr(\"class\", \"yearText\")\n .attr(\"x\", 5)\n .attr(\"y\", height-10)\n .attr('font-size', `${width/15}px`)\n .style(\"text-anchor\", \"start\") //end\n .text(1961)\n // .call(halo, 10);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"moveToLeftTwoThirds = async () => {\n \n // Move projection to the left 2/3 of the svg\n const [currentTranslationX, currentTranslationY] = projection.translate()\n const targetTranslationX = width/3\n const targetTranslationY = currentTranslationY\n let translationXInterpolator = d3.interpolateNumber(currentTranslationX, targetTranslationX)\n \n // Wait until completing move to new location\n await d3.transition(\"moveToLeftTwoThirds\")\n .duration(3000)\n .ease(d3.easeQuad)\n .tween(\"render\", () => t => {\n projection.translate([translationXInterpolator(t), targetTranslationY]);\n updateOnProjectionChange();\n })\n .end();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md `### Update visualization ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"updateJourneyInfo = (currentEvent) => {\n\n let svg = d3.select(chart);\n \n svg.select('#journey-info-img')\n .attr('src', currentEvent.imgSrc)\n .attr('alt', currentEvent.title)\n \n svg.select('#journey-info-header')\n .text(currentEvent.title)\n \n svg.select('#journey-info-description')\n .text(currentEvent.description)\n \n svg.select('#journey-info-link')\n .attr('href', currentEvent.link)\n .attr('target', '_blank')\n .text('Learn more on Wikipedia →')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"// Re-render when: 1. User rotate/zoom 2. Programmatic rotate/zoom\nupdateOnProjectionChange = () => {\n\n let svg = d3.select(chart);\n \n // Re-render all the paths elements: choropleth, border, sphere\n svg\n .selectAll(\"g\")\n .selectAll(\"path\")\n .attr('d', geoGenerator)\n \n // For country lables, move, toggle visibility, change font size \n svg\n .select(\"#country-label-container\")\n .selectAll(\"text\")\n .attr('transform', generateCountryLabelTransformValue)\n .style('visibility', d => geoGenerator(d)? 'visible':'hidden')\n .style('font', generateCountryLabelFontValue)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"updateOnYearChange = {\n \n let svg = d3.select(chart);\n \n // Add Chloropleth\n svg\n .select(\"#chloropleth-container\")\n .selectAll('path')\n .transition('chloropleth-fill-transition')\n .duration(200)\n .attr(\"fill\", d =>\n life.has(d.id) && life.get(d.id)[currentYear+'delta'] ? color(+life.get(d.id)[currentYear+'delta']) : \"#eee\"\n )\n \n // Display the current year\n svg\n .selectAll('.yearText')\n .text(currentYear)\n \n // Change country label text color based on current year choropleth color value\n svg\n .select(\"#country-label-container\")\n .selectAll(\"text\")\n .attr('fill', d => \n life.has(d.id) && life.get(d.id)[currentYear+'delta'] && lightOrDark(color(+life.get(d.id)[currentYear+'delta'])) === 'dark' ?\n \"#fff\" : \"#000\"\n )\n \n // mutable currentYear = year\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"mutable currentYear = 1961","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md `### Manual Pan/Zoom ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"// d3GeoZoom.geoZoom()\n// .projection(projection)\n// .northUp(true)\n// .onMove(render)\n// (chart)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"md `### Tooltip ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"mutable mouseOverCountry = countries[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"updateTooltipText = {\n tooltip.text(`${mouseOverCountry.properties.name} (${currentYear})\\n${(+life.get(mouseOverCountry.id)[currentYear]).toFixed(1)}`)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"onMouseMoveArea = (d) => {\n console.log('Mouse move')\n tooltip.style(\"top\", (d3.event.pageY+20)+\"px\").style(\"left\",(d3.event.pageX+10)+\"px\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"onMouseOutArea = (d) => {\n console.log('Mouse out')\n tooltip.text('')\n tooltip.style(\"visibility\", \"hidden\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"onMouseOverArea = (d) => {\n console.log('Mouse over')\n mutable mouseOverCountry = d\n\n tooltip.style(\"visibility\", \"visible\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"tooltip = {\n return d3.select(\"#svg-tooltip\").empty() ? \n d3.select(\"body\").append(\"div\")\n .attr(\"id\", \"svg-tooltip\")\n .text(\"\")\n : d3.select(\"#svg-tooltip\")\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md `### Visualization Setup ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"// geoGenerator converts a GeoJSON object into an SVG path, based on the current projection\ngeoGenerator = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"projection = d3.geoOrthographic()\n .fitExtent([[margin, margin], [width - margin, height - margin]], sphere)\n .translate([width / 2, height / 2])\n .precision(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"xAxis = d3.axisBottom(xScale)\n .tickSize(0)\n .tickPadding(width/55)\n .tickValues([-lifeExpectancyDeltaMax, 0, lifeExpectancyDeltaMax])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"xScale = d3.scaleLinear()\n .domain(d3.extent(color.domain()))\n .rangeRound([-legendScaleWidth/2, legendScaleWidth/2]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"color = d3.scaleSequential(d3.interpolateRdYlGn)\n .domain([-lifeExpectancyDeltaMax, lifeExpectancyDeltaMax])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"lifeExpectancyDeltaMax = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"legendScaleWidth = 180","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"tilt = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"margin = height/20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"height = Math.floor(width * 0.55)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md `### Life Expectancy Data ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"life = {\n let data = await d3.csv(\"https://gist.githubusercontent.com/Jianan-Li/a33f236bb36c2dbac518e5971807b25b/raw/7ccd0d24ef50b3152ce848e7c3f9ce21a0d75af6/world-life-expectancy.csv\") \n let codes = await d3.csv(\"https://gist.githubusercontent.com/Jianan-Li/a33f236bb36c2dbac518e5971807b25b/raw/7ccd0d24ef50b3152ce848e7c3f9ce21a0d75af6/country-codes.csv\")\n \n // Calculate the delta of life expectancy between years\n data.map(d => {\n for (let i=2016; i>=1961; i--) { \n if (d[i-1] === '' || d[i] === '') {\n d[i+'delta'] = ''\n } else {\n d[i+'delta']=d[i]-d[i-1]\n }\n }\n return d\n })\n \n const countryLetterCodeToNumericCode = new Map(codes.map(d => [d[\"alpha-3\"], d[\"country-code\"]]));\n\n return new Map(\n data\n .filter(d => countryLetterCodeToNumericCode.has(d[\"Country Code\"]))\n .map(d => [countryLetterCodeToNumericCode.get(d[\"Country Code\"]), d])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md `### Helper Functions and Class ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"html `

Add White Border Around Text Element in SVG ↓

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"// This is a lightly modified version of Mike Bostock’s text halo function from @d3/connected-scatterplot\nhalo = function(text, strokeWidth) {\n text.select(function() { return this.parentNode.insertBefore(this.cloneNode(true), this); })\n .style(\"fill\", '#ffffff')\n .style(\"stroke\", '#ffffff')\n .style('stroke-width', strokeWidth)\n .style('stroke-linejoin', 'round')\n .style(\"opacity\", 1)\n .style(\"fill\", '#ffffff')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"html `

Angle Interpolation (for projection rotation) ↓

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"html `

Quadratic Interpolation (for projection scaling) ↓

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"quadraticInterpolator = (projectionScaleZoomOut, projectionScaleZoomIn) => {\n let c = projection.scale()\n \n if (c > projectionScaleZoomOut) {\n let X = projectionScaleZoomIn - c //(a+b)\n let Y = 4*( c - projectionScaleZoomOut ) //(b^2/a)\n\n let b = - Math.sqrt(X*Y+(Y**2)/4) - Y/2\n let a = X - b\n\n return (t) => a*t**2 + b*t + c\n } else {\n let a = projectionScaleZoomIn - c // a\n return (t) => a*t**2 + c\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"html `

Generate transform value for country labels ↓

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"generateCountryLabelTransformValue = d => {\n if (geoGenerator(d) === null) return 'translate(0,0)'\n return `translate(${projection(d.properties.centroid)})`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"html `

Generate font value for country labels ↓

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"generateCountryLabelFontValue = d => {\n let labelLength = 6/d.properties.name.length\n let countryLongitudeSpan = d.properties.longitudeSpan/5\n let projectionScale = projection.scale()/50\n let a = Math.min(labelLength * countryLongitudeSpan, 50)\n let b = Math.min(a * projectionScale, 12)\n \n return `${b}px sans-serif`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"html `

Calculate country longitude span ↓

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"// Get country longitude (horizontal) span\ngetCountryLongitudeSpan = country => {\n let [x0, y0, x1, y1] = topojson.bbox(topojson.topology(country))\n return x1 - x0\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md `### TopoJSON Library Exploration ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"topojson.bbox(topojson.topology(countries[0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"topojson.bbox(world)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md `### Generate Geo Features ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"countries = {\n let result = topojson.feature(world, world.objects.countries).features\n result.map(d => {\n d.properties.name = countryNumericCodeToName.get(d.id)\n d.properties.centroid = d3.geoCentroid(d)\n d.properties.longitudeSpan = getCountryLongitudeSpan(d)\n })\n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"interiorBorders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"allBorders = topojson.mesh(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md `### Fetch Geo Data ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"countryNumericCodeToName = new Map(\n await d3.tsv(\"https://unpkg.com/world-atlas@1/world/110m.tsv\", ({iso_n3, name_long}) => [iso_n3, name_long])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"world = fetch(\"https://unpkg.com/world-atlas@1/world/110m.json\")\n .then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md `### Import ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"// Import jQuery for both selection and easy text fade in and fade out transitions\n$ = require(\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3GeoZoom = require('d3-geo-zoom')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import { lightOrDark } from '@jianan-li/utility'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {slider, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md `### Style ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"