${translate(d.name)}

		${translate("Diff from")} ${translate("yesterday")}
${translate("Existing Cases")}	${formatComma(result.existing)}	${formatComma(result.existing-resultPrev.existing)}
${translate("Total Cases")}	${formatComma(result.cases)}	${formatComma(result.cases-resultPrev.cases)}
${translate("Recovered")}	${formatComma(result.recovered)}	${formatComma(result.recovered-resultPrev.recovered)}
${translate("Deaths")}	${formatComma(result.deaths)}	${formatComma(result.deaths-resultPrev.deaths)}
${translate("Death Rate")}	${formatComma(result.deathRate)} %	${formatComma(result.deathRate-resultPrev.deathRate)}

${datesStr.map((d,i)=>`

`).join('')}

${isRate?d3CommaFormat(datCountry[currentDate]):d3CommaFormat(Math.round(datCountry[currentDate]))} ${translate(option)} (${isRate?d3CommaFormat(Math.round(100*(datCountry[currentDate]-datCountry[previousDate]))/100):d3CommaFormat(Math.round(datCountry[currentDate]-datCountry[previousDate]))}) ${translate("from yesterday")}

` }) /*################################## BEHAVIORS ####################################### */ var behaviors = {}; behaviors.zoom = d3.zoom().on("zoom", d => handlers.zoomed(d)) /* ############# PROJECTION ############### */ var path = d3.geoPath() .projection(projection); const graticule = d3.geoGraticule10(); //################################ DRAWING ###################### //Drawing var svg = container.patternify({ tag: 'svg', selector: 'svg-chart-container' }) .attr('width', attrs.svgWidth) .attr('height', attrs.svgHeight) .attr('font-family', attrs.defaultFont) .style('background-color', 'none') .on('click.reset-country', function(d) { if (d3.event.srcElement.tagName == "svg") { if(mutable currentCountry!=""){ mutable currentCountry = "" d3.selectAll('.map-path-front') .attr('stroke','#93004E') .filter(d => (mutable currentCountry) != d.properties.name) .attr('stroke', '#080D1F') .attr('stroke-width', 0.6) } } }) // .call(behaviors.zoom,d3.zoomIdentity); var chart = svg.patternify({ tag: 'g', selector: 'chart' }) .attr('transform', 'translate(' + (calc.chartLeftMargin) + ',' + calc.chartTopMargin + ')') const defs = chart .patternify({ tag: 'defs', selector: 'clippath-defs' }); defs.patternify({ tag: 'path', selector: 'land', data: [land] }) .attr("d", path) .attr("class", "land") .style("fill", '#0D2331') .style("opacity", 1) .attr('pointer-events', 'none') .attr('id', 'land') .attr('stroke', d => '#0D2331') .attr('stroke-width', d => 0.6) .attr('stroke-opacity', d => 0.6) const clippath = defs.patternify({ tag: 'clipPath', selector: 'clippath-elem' }) .attr("id", 'clip') clippath.patternify({ tag: 'use', selector: 'clippath-use' }) .attr('xlink:href', `${location}#land`) chart.patternify({ tag: 'use', selector: 'chart-use' }) .attr('xlink:href', `${location}#land`) chart.patternify({ tag: 'g', selector: 'circles-group' }) .attr('clip-path', `url(${location}#clip)`) .patternify({ tag: 'circle', selector: 'data-circles', data: currentData.filter(cd => cd[currentDate] > 0) }) .attr('r', cd => Math.max(4 * Math.min(cd[currentDate], 300) / 300, 1.5)) .attr('fill', '#ED0000') .attr('stroke', '#8B001D') .attr('stroke-width', 1) .attr('transform', d => { const coords = projection([d.Long, d.Lat]) return `translate(${coords[0]},${coords[1]})` }) chart .patternify({ tag: 'g', selector: 'contours-group' }) .attr('clip-path', `url(${location}#clip)`) .patternify({ tag: 'path', selector: 'contours-path', data: contourData }) .attr("stroke", d => '#93004E') //color(d.value)) .attr('stroke-width', 0.3) .attr('stroke-opacity', 0.3) .attr("fill", d => color(d.value)) .attr("d", d3.geoPath()) .each(function(d) { d3.select(this).raise() }) const mapPaths = chart .patternify({ tag: 'path', selector: 'map-path-front', data: attrs.geojson.features .filter(d => d.properties.name != "Antarctica") .filter(d => d.properties.name != "French Southern and Antarctic Lands") }) .attr('d', path) .attr('cursor', 'pointer') .attr('fill', d => 'none') .attr('stroke', d => (mutable currentCountry) == d.properties.name ? 'red' : '#080D1F') .attr('pointer-events', 'all') .attr('stroke-width', d => { return (mutable currentCountry) == d.properties.name ? 4 : 0.6; }) .on('click.reset', function(d) { if (mutable currentCountry == d.properties.name) { mutable currentCountry = "" } else { mutable currentCountry = d.properties.name } mapPaths .attr('stroke', 'red') .attr('stroke-width', 4) .filter(d => (mutable currentCountry) != d.properties.name) .attr('stroke', '#080D1F') .attr('stroke-width', 0.6) }) .on('mouseenter.map-path', function(d) { tip.show(d) d3.select(this).attr('stroke-width', 4) }) .on('mouseleave.map-path', function(d) { tip.hide() mapPaths .attr('stroke', 'red') .filter(d => (mutable currentCountry) != d.properties.name) .attr('stroke', '#080D1F') .attr('stroke-width', 0.6) }) .attr('stroke-opacity', d => 0.6) if (userLocation) { const circle = chart.patternify({ tag: 'circle', selector: 'current-loc' }) .attr('r', 0.01) .attr('fill', '#A0BCEE') .attr('stroke', '#080D1F') .attr('pointer-events', 'none') .attr('transform', () => { const coords = projection([userLocation.longitude, userLocation.latitude]) return `translate(${coords[0]},${coords[1]})` }) pulse(circle) } d3.selectAll('.d3-tip').remove() svg.call(tip) /* ############################# HANDLER FUNCTIONS ############################## */ function pulse(circle) { (function repeat() { circle .transition() .duration(500) .attr("stroke-width", 0) .attr('stroke-opacity', 0) .transition() .duration(500) .attr("stroke-width", 0) .attr('stroke-opacity', 0.5) .transition() .duration(1000) .attr("stroke-width", 65) .attr('stroke-opacity', 0) .ease(d3.easeSin) .on("end", repeat); })(); } handlers.zoomed = function() { var transform = d3.event.transform; chart.attr('transform', transform); } // Smoothly handle data updating updateData = function() { } //######################################### UTIL FUNCS ################################## }); } //----------- PROTOTYEPE FUNCTIONS ---------------------- d3.selection.prototype.patternify = function(params) { var container = this; var selector = params.selector; var elementTag = params.tag; var data = params.data || [selector]; // Pattern in action var selection = container.selectAll('.' + selector).data(data, (d, i) => { if (typeof d === "object") { if (d.id) { return d.id; } } return i; }) selection.exit().remove(); selection = selection.enter().append(elementTag).merge(selection) selection.attr('class', selector); return selection; } /* invalidation.then(d=>{ d3.selectAll('.d3-tip').remove() }) */ //dinamic keys functions Object.keys(attrs).forEach(key => { // Attach variables to main function return main[key] = function(_) { var string = `attrs['${key}'] = _`; if (!arguments.length) { return eval(` attrs['${key}'];`); } eval(string); return main; }; }); //set attrs as property main.attrs = attrs; //exposed update functions main.data = function(value) { if (!arguments.length) return attrs.data; attrs.data = value; if (typeof updateData === 'function') { updateData(); } return main; } // run visual main.run = function() { d3.selectAll(attrs.container).call(main); return main; } return main; }