Public
Edited
Dec 8, 2023
{
yield svg.node()
}
svg = {
const height = 1000
const svg = d3.select(DOM.svg(width, height))
const projection = d3.geoMercator()
.center([-60,48])
.scale(2200)
// .rotation([0,0,0])
const path = d3.geoPath().projection(projection)
const municipios = topojson.feature(topology, topology.objects.mpios).features
// console.log(municipios)
const map = svg
.append('g')
.selectAll('path')
.data(municipios)
.enter()
.append('path')
.attr('fill', 'gray')
.attr('d', path)
return svg
}
people = svg.append('g')
function getCasesBeforeThat(date) {
return data.filter(sample => {
return sample.date_diagnostic.isSameOrBefore(date)
})
}
{
let date = data.reduce((aco, current) => moment.min(aco, current.date_notification), moment());
while (true) {
date = date.add('1', 'days')
people
.selectAll('circle')
.data(getCasesBeforeThat(date), d => d.id)
.join(
enter => enter.append('circle')
.attr('r', 1)
.attr('cx', () => Math.random() * width)
.attr('cy', () => Math.random() * 1000)
.attr('fill', 'red'),
)
yield Promises.tick(1000)
}
}
data = dataRaw.map(data => {
const date_diagnostic = moment(data.fecha_diagnostico)
const date_recovered = moment(data.fecha_recuperado)
const date_death = moment(data.fecha_de_muerte)
return {
id: data.id_de_caso,
date_notification: moment(data.fecha_de_notificaci_n),
status: data.atenci_n,
date_diagnostic: date_diagnostic,
date_death: date_death.isValid() && date_death,
date_recovered: date_recovered.isValid() && date_recovered
}
})
dataRaw = {
// check this if the number overcome 50000
const params = { '$limit': 50000 }
const url = new URL('https://www.datos.gov.co/resource/gt2j-8ykr.json')
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
return fetch(url)
.then(res => res.json())
.then(res => res)
.catch(err => alert('Error extrayendo los datos de www.datos.gov.co'))
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
d3 = require('d3')
moment = require('moment')
earcut = require('earcut')
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.
