Python, SQL, JQuery, HTML, CSS, Javascript, PHP, SQL, SQLite, QGIS. Currently hooked on R.
Published
Edited
Apr 24, 2020
4 forks
3 stars
md`# Coronavirus map per country
Confirmed cases
JHU modified data structure on 24.03.2020
Data as per ${llave}
Source: Johns Hopkins University`
chart = {
// create SVG element
var svg = d3.select(DOM.svg(width, height));
// construct the element
svg
.append('path')
.datum(countries)
.attr('d', pathGenerator)
.attr('class', 'country')
.attr('fill', 'gray')
.attr('opacity', 0.5)
.attr('stroke', 'black')
.attr('stroke-width', '0.5');
var circles = svg
.selectAll('path')
.data(LatLngs)
.enter()
.append('circle');
circles
.attr("cx", d => d[2][0])
.attr("cy", d => d[2][1])
.attr('r', d => Math.cbrt(d[3]) / 5)
.attr('class', 'circle')
.attr("fill", "#d60f23")
.attr('opacity', 0.3)
.on("click", function(d) {
div
.transition()
.duration(200)
.style("opacity", .9);
div
.html(
"<b>COUNTRY: </b>" +
d[0] +
"<br/><b>REGION: </b>" +
d[1] +
"</br><b>CONFIRMED CASES: </b>" +
d[3] +
"</br>AS OF " +
llave
)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");
})
.on("mouseout", function(d) {
div
.transition()
.duration(500)
.style("opacity", 0);
});
// pass to Observable to draw this block
return svg.node();
}
import { callout } from "@d3/line-chart-with-tooltip"
claves = Object.keys(dataraw[0]).slice(4)
html`<style>div.tooltip {position: absolute; text-align: left; width: 200px; height: 75px; padding: 15px;font: 14px calibri; background: #d60f23; color: white; border: 2px; border-radius: 8px; pointer-events: none;} </style>`
(Object.size = function(obj) {
var size = 0,
key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
})
ix = Object.size(dataraw[0]) - 1
llave = Object.keys(dataraw[0])[ix]
{
for (var i = 0; i <= factor; i++) {
var LatLngElement = [
dataraw[i]['Country/Region'],
dataraw[i]['Province/State'],
projection([parseFloat(dataraw[i].Long), parseFloat(dataraw[i].Lat)]),
dataraw[i][llave]
];
LatLngs[i] = LatLngElement;
}
}
div = d3
.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0)
factor = dataraw.length - 1
format = d => `${d}`
topojson = require("topojson-client@3")
path = d3.geoPath().projection(projection)
pathGenerator = d3.geoPath().projection(projection)
height = 720
projection = d3
.geoMercator()
.scale(150)
.translate([width / 2, height / 1.5])
width = 980
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
