Python, SQL, JQuery, HTML, CSS, Javascript, PHP, SQL, SQLite, QGIS. Currently hooked on R.
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]) / 9)
.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]
Secret('Mapbox')
{
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}`
populationin = d3.json(
"https://raw.githubusercontent.com/fullergalway/covid19js/master/dist/population.json"
)
populationout = Object.entries(populationin)
filtro = populationout.filter(name => {
return d => d.name;
})
populationout[0][1].name
dataraw[0]['Country/Region'].confirmed
nombres = {
for (var f = 0; f <= populationout.length - 1; f++) {
var name = populationout[f][1].name;
names.push(name);
}
}
names = []
{
for (var e = 0; e <= populationout.length - 1; e++) {
for (var i = 0; i <= LatLngs.length - 1; i++) {
if (populationout[e][1].name == LatLngs[i][0]) {
if (LatLngs[i][1] == "") {
var casos = +LatLngs[i][3];
var poblacion = populationout[e][1].totalPop;
var pais = LatLngs[i][0];
var rate = forrate(casos, poblacion);
}
}
}
rates.push({
country: pais,
cases: casos,
population: poblacion,
rate: rate
});
}
}
rates1 = []
rates = []
populationout[0][1].totalPop
typeof forrate(populationout[0][1].totalPop)
forrate(LatLngs[19][3], populationout[19][1].totalPop)
forrate = function(a, b) {
var rate = a / b / 10;
return rate;
}
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
d3gr = require("d3-array@^2.2")
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.
