script.js

var points,covidList,borders,info,myColor="#0c1972ff",myColor2="",color1="green",color2="red",rotationDelay=1e3,scaleFactor=.8,degPerSec=12,angles={x:-20,y:40,z:0},colorWater="#00000090",colorLand=myColor,colorBack="#737368",colorGraticule="#ccc",colorCountry="#a00",deaths=d3.select("#deaths"),recovered=d3.select("#recovered"),active=d3.select("#active"),cases="",flag="";function enter(t){stopRotation();t=countryList.find(function(e){return e.id===t.id}),covidList.find(function(e){e.country===(t&&t.name)&&(cases=JSON.stringify(e.cases),flag.attr("src",e.countryInfo.flag),card_title.text(e.country+" Total Cases:"+JSON.stringify(e.cases)),deaths.text("Deaths: "+JSON.stringify(e.deaths)),recovered.text("Recovered: "+JSON.stringify(e.recovered)),active.text("Active: "+JSON.stringify(e.active)))})}function leave(t){startRotation(500)}flag=d3.select(".card-img-top");var v0,r0,q0,width,height,land,countries,countryList,autorotate,now,diff,roation,currentCountry,card_title=d3.select(".card-title"),current=d3.select("#current"),canvas=d3.select("#globe"),context=canvas.node().getContext("2d"),water={type:"Sphere"},projection=d3.geoOrthographic().precision(.6),graticule=d3.geoGraticule10(),path=d3.geoPath(projection).context(context),lastTime=d3.now(),degPerMs=degPerSec/1e3;function $(t){return document.querySelector(t)}const parentBasic=$("#basic"),popupBasic=new Picker({parent:parentBasic,popup:"top"}),parentBasic2=$("#basic2"),popupBasic2=new Picker({parent:parentBasic2,popup:"top"}),parentBasic3=$("#basic3"),popupBasic3=new Picker({parent:parentBasic3,popup:"top"}),parentBasic4=$("#basic4"),popupBasic4=new Picker({parent:parentBasic4,popup:"top"});function setAngles(){var t=projection.rotate();t[0]=angles.y,t[1]=angles.x,t[2]=angles.z,projection.rotate(t)}function scale(){width=document.documentElement.clientWidth,height=document.documentElement.clientHeight,canvas.attr("width",width).attr("height",height),projection.scale(scaleFactor*Math.min(width,height)/2).translate([width/2,height/2]),render()}function startRotation(t){autorotate.restart(rotate,t||0)}function stopRotation(){autorotate.stop()}function dragstarted(){v0=versor.cartesian(projection.invert(d3.mouse(this))),r0=projection.rotate(),q0=versor(r0),stopRotation()}function dragged(){var t=versor.cartesian(projection.rotate(r0).invert(d3.mouse(this))),e=versor.multiply(q0,versor.delta(v0,t)),o=versor.rotation(e);projection.rotate(o),render()}function dragended(){startRotation(rotationDelay)}function render(){popupBasic.onChange=function(t){parentBasic.onclick=popupBasic.openHandler(),parentBasic.style.backgroundColor=t.rgbaString,myColor=t.rgbaString},popupBasic2.onChange=function(t){parentBasic2.style.backgroundColor=t.rgbaString,myColor2=t.rgbaString},popupBasic3.onChange=function(t){parentBasic3.style.backgroundColor=t.rgbaString,color1=t.rgbaString},popupBasic4.onChange=function(t){parentBasic4.style.backgroundColor=t.rgbaString,color2=t.rgbaString},context.clearRect(0,0,width,height),fill(water,colorWater),projection.rotate(projection.rotate()).clipAngle(180),fill(land,colorBack),projection.rotate(projection.rotate()).clipAngle(90),fill(land,myColor),covidList.forEach(t=>{var e=[+t.countryInfo.long,+t.countryInfo.lat];context.beginPath(),path({type:"Point",coordinates:e}),path.pointRadius(d3.scalePow(d3.interpolateOrRd).exponent(.25).domain([0,d3.median(covidList,t=>+t.cases)]).range([0,10])(parseInt(t.cases)/100)),context.fillStyle=d3.scaleSequential().interpolator(d3.interpolate(color1,color2)).domain([0,d3.median(covidList,t=>+t.cases)])(parseInt(t.cases)),context.fill()}),context.strokeStyle=myColor2,context.lineWidth=.5,context.beginPath(),path(borders),context.stroke(),context.restore(),currentCountry&&fill(currentCountry,colorCountry)}function fill(t,e){context.beginPath(),path(t),context.fillStyle=e,context.fill()}function stroke(t,e){context.beginPath(),path(t),context.strokeStyle=e,context.stroke()}function rotate(t){now=d3.now(),(diff=now-lastTime)<t&&(rotation=projection.rotate(),rotation[0]+=diff*degPerMs,context.clearRect(0,0,width,height),projection.rotate(rotation),render()),lastTime=now}var cScale=d3.scaleSqrt().domain(0,18e4).range(["#ECD078","#C02942"]);function loadData(t){d3.json("https://unpkg.com/world-atlas@1/world/110m.json",function(e,o){if(e)throw e;d3.tsv("country_names.tsv",function(e,n){if(e)throw e;d3.json("https://corona.lmao.ninja/v2/countries?sort=country",function(e,r){t(o,n,r),borders=topojson.mesh(o,o.objects.countries,function(t,e){return t!==e})})})})}function polygonContains(t,e){for(var o,n,r=t.length,a=t[r-1],c=e[0],i=e[1],s=a[0],d=a[1],l=!1,u=0;u<r;++u)o=(a=t[u])[0],(n=a[1])>i!=d>i&&c<(s-o)*(i-n)/(d-n)+o&&(l=!l),s=o,d=n;return l}function mousemove(){var t=getCountry(this);t?t!==currentCountry&&(currentCountry=t,render(),enter(t)):currentCountry&&(leave(currentCountry),currentCountry=void 0,render())}function getCountry(t){var e=projection.invert(d3.mouse(t));return countries.features.find(function(t){return t.geometry.coordinates.find(function(t){return polygonContains(t,e)||t.find(function(t){return polygonContains(t,e)})})})}function getColor(t){return"rgba(255,255,255,"+t+")"}setAngles(),canvas.call(d3.drag().on("start",dragstarted).on("drag",dragged).on("end",dragended)).on("click",mousemove),loadData(function(t,e,o){land=topojson.feature(t,t.objects.countries),countries=topojson.feature(t,t.objects.countries),countryList=e,covidList=o,window.addEventListener("resize",function(){width=document.documentElement.clientWidth,height=document.documentElement.clientHeight,canvas.attr("width",width).attr("height",height),projection.scale(scaleFactor*Math.min(width,height)/2).translate([width/2,height/2]),render()}),scale(),autorotate=d3.timer(rotate)});