map = {
const svg = d3
.create("svg")
.attr("width", w)
.attr("height", h)
.attr("viewBox", [0, 0, w, h])
.attr("class", "italy");
svg
.selectAll(".subunit")
.data(provinces.features)
.enter()
.append("path")
.attr("class", function(d) {
return "subunit";
})
.attr("d", path);
let bubble;
let espinho;
let yScale = d3.scaleSqrt([0, d3.max(recentData, d => d[confirmed_or_deaths])], [0, 80])
if (scale === "bolhas") {
bubble = svg
.selectAll(".bubble")
.data(recentData)
.enter()
.append("circle")
.attr("transform", function(d) {
return "translate(" + projection([d.longitude, d.latitude]) + ")";
})
.attr("class", "bubble")
.attr("fill-opacity", 0.5)
.attr("fill", d => colorScale(d[confirmed_or_deaths]))
.attr("r", d => radius(d[confirmed_or_deaths]));
bubble.append("title");
const legend = svg
.append("g")
.attr("class", "legend")
.attr("fill", "#777")
.attr(
"transform",
`translate(${w > breakpoint ? [10, h - 25] : [10, h - 25]})`
);
legend
.append("text")
.attr("class", "legend-title")
.text(`No. ${text} confirmados`)
.attr("dy", -maxRadius * 3.0);
const legendBubbles = legend
.selectAll("g")
.data(legendRadii)
.join("g");
let margin = 0;
legendBubbles
.attr("transform", (d, i) => {
margin += i === 0 ? 0 : radius(legendBubbles.data()[i - 1]) * 2 + 15;
return `translate(${margin + radius(d)}, 0)`;
})
.append("circle")
.attr("class", "legend-bubble")
.attr("fill", d => colorScale(d))
.attr("cy", d => -radius(d))
.attr("r", radius);
legendBubbles
.append("text")
.attr("dy", "1.3em")
.text(w > breakpoint ? numFormat : sFormat);
} else {
const gradient = DOM.uid();
espinho = svg
.selectAll("polyline")
.data(recentData)
.enter()
.append("polyline")
.attr("class", "polyline")
.attr("id", d => d.id)
.attr("points", d => {
const _d = recentData.find(dd => dd.city_ibge_code === d.city_ibge_code);
const h = (_d !== undefined)? yScale(_d[confirmed_or_deaths]) : 0;
const projectionxy = projection([d.longitude, d.latitude]);
const x = projectionxy[0];
const y = projectionxy[1];
return `${x - 4},${y} ${x},${y - h} ${x + 4},${y}`;
})
.attr("stroke", d=> colorScale(+d[confirmed_or_deaths]))
.attr("fill", gradient);
const colors = d3.scaleOrdinal([100,0],['#f3f3f3','#cc0000'])
const gg = svg.append("linearGradient")
.attr("id", gradient.id)
.attr("x1", '0%')
.attr("y1", '0%')
.attr("x2", '0%')
.attr("y2", '100%')
.selectAll("stop")
.data([0,100])
.join("stop")
.attr("offset", d => `${d}%`)
.attr("stop-color", d=> colors(d));
}
let label;
if (showSubtitles) {
svg
.selectAll("place")
.data(places.features)
.enter()
.append("circle")
.attr("class", "place")
.attr("r", 2.5)
.attr("transform", function(d) {
return "translate(" + projection(d.geometry.coordinates) + ")";
});
label = svg
.selectAll(".place-label")
.data(places.features)
.enter()
.append("text")
.attr("class", "place-label")
.style('paint-order', 'stroke')
.style('stroke-width', '3')
.style('stroke', 'rgba(255,255,255,.85)')
.style('stroke-linecap', 'round')
.style('stroke-linejoin', 'round')
.attr("transform", function(d) {
return "translate(" + projection(d.geometry.coordinates) + ")";
})
.attr("dy", ".35em")
.text(function(d) {
return d.properties.name;
})
.attr("x", function(d) {
return d.geometry.coordinates[0] > -1 ? -6 : 6;
})
.style("text-anchor", function(d) {
return d.geometry.coordinates[0] < -1 ? "start" : "end";
});
label.append("tspan")
.attr("class", "additionalnum")
.style('font-weight', 'bold')
.attr("x", d => label.x)
.attr("y", d => label.y)
.text(d => {
return " (" + recentData.find(dd => dd.city_ibge_code === d.properties.city_ibge_code)[confirmed_or_deaths] + ")";
});
}
const wrapper = html`<div class="wrapper"></div>`;
wrapper.append(svg.node());
return Object.assign(wrapper, {
update(i) {
const t = svg
.transition()
.duration(i === 0 ? 0 : delay)
.ease(d3.easeLinear);
let currentData = cities_per_date[i]
if (showSubtitles) {
label.select("tspan")
.text(d => " (" + currentData.find(dd => dd.city_ibge_code === d.properties.city_ibge_code)[confirmed_or_deaths] + ")");
}
if (scale === "bolhas") {
bubble
.data(currentData)
.call(b => {
b.transition(t)
.attr("fill", d => colorScale(d[confirmed_or_deaths]))
.attr("r", d => radius(d[confirmed_or_deaths]));
})
.select("title")
.text(
d =>
`${d.city_ibge_code}: ${numFormat(d[confirmed_or_deaths])}`
);
} else {
espinho
.data(currentData)
.call(b => {
b.transition(t)
.attr("points", d => {
const _d = currentData.find(dd => dd.city_ibge_code === d.city_ibge_code);
const h = (_d !== undefined)? yScale(_d[confirmed_or_deaths]) : 0;
const projectionxy = projection([d.longitude, d.latitude]);
const x = projectionxy[0];
const y = projectionxy[1];
return `${x - 4},${y} ${x},${y - h} ${x + 4},${y}`
}).attr("display", d => d[confirmed_or_deaths] === 0 ? "none" : "inline");
})
.select("title")
.text(
d =>
`${d.city_ibge_code}: ${numFormat(+d[confirmed_or_deaths])} casos`
);
}
}
});
}
legendRadii = [maxCases / 8, maxCases / 4, maxCases / 2, maxCases].map(d=>Math.round(d))
text = {
return confirmed_or_deaths === "confirmed" ? 'casos': 'mortes'
}
draw = {
map.update(index);
}
w = Math.min(width, 700)
h = 500
indexSetter = {
mutable index = dates.indexOf(day);
}
radius = d3
.scaleSqrt()
.domain([0, maxCases])
.range([0, maxRadius])
colorScale = d3
.scaleSqrt()
.domain([0, maxCases])
.range([`hsla(57, 100%, 50%, 0.36)`, `hsla(7, 100%, 50%, 0.57)`])
delay = 250
maxCases = d3.max(Object.keys(test).map(function(key, index) {
let city_data = test[key]['summary']
let dates = Object.keys(city_data)
let lastDate = dates[dates.length - 1]
return city_data[lastDate][confirmed_or_deaths]
}))
test = Object.assign(await d3.json(file, d3.autoType))
file = "https://hackcovid.s3-us-west-2.amazonaws.com/data/data_spikes.json"
recentData = cities_per_date[cities_per_date.length - 1]
cities_per_date = {
let list = []
for (const i in dates) {
list.push(
Object.keys(test).map(function(key, value) {
if (test[key]['summary'][dates[i].toISOString().substring(0, 10)]) {
return {...test[key]['summary'][dates[i].toISOString().substring(0, 10)],
'city_ibge_code': parseInt(key),
'latitude': test[key]['latitude'],
'longitude': test[key]['longitude']
}
} else {
if (i > 0) {
let lastDate = list[i-1].find(city => city['city_ibge_code'] === parseInt(key))
return {'latitude': test[key]['latitude'],
'longitude': test[key]['longitude'],
'city_ibge_code': parseInt(key),
'confirmed': lastDate['confirmed'],
'deaths': lastDate['deaths']
}
}
else {
return {'latitude': test[key]['latitude'],
'longitude': test[key]['longitude'],
'city_ibge_code': parseInt(key),
'confirmed': 0,
'deaths': 0
}
}
}
})
.filter(el => el != null)
)
}
return list
}
path = d3.geoPath().projection(projection)
showSubtitles = w > 600;
projection = d3.geoMercator()
.fitExtent([[0, 0], [showSubtitles ? (w - 50) : w, h]], provinces);
topCities = [...recentData].sort((a,b) => b[confirmed_or_deaths] - a[confirmed_or_deaths]).slice(0,5);
places = ({
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: { name: "Curitiba", "city_ibge_code": 4106902},
geometry: { type: "Point", coordinates: [-49.2646, -25.4195 ] }
},
{
type: "Feature",
properties: { name: "São Paulo", "city_ibge_code": 3550308},
geometry: { type: "Point", coordinates: [-46.6395, -23.5329] }
},
// {
// type: "Feature",
// properties: { name: "Rio de Janeiro" },
// geometry: { type: "Point", coordinates: [-43.2003, -22.9129] }
// },
{
type: "Feature",
properties: { name: "Fortaleza", "city_ibge_code": 2304400},
geometry: { type: "Point", coordinates: [-38.5423, -3.71664] }
},
{
type: "Feature",
properties: { name: "Manaus", "city_ibge_code": 1302603},
geometry: { type: "Point", coordinates: [-60.0212, -3.11866] }
},
{
type: "Feature",
properties: { name: "Brasília", "city_ibge_code": 5300108},
geometry: { type: "Point", coordinates: [-47.9297, -15.7795] }
},
{
type: "Feature",
properties: { name: "Recife", "city_ibge_code": 2611606},
geometry: { type: "Point", coordinates: [-34.8771, -8.04666] }
},
{
type: "Feature",
properties: { name: "Salvador", "city_ibge_code": 2927408},
geometry: { type: "Point", coordinates: [-38.5011, -12.9718] }
},
{
type: "Feature",
properties: { name: "Porto Alegre", "city_ibge_code": 4314902},
geometry: { type: "Point", coordinates: [-51.2065, -30.0318] }
},
{
type: "Feature",
properties: { name: "Belo Horizonte", "city_ibge_code": 3106200},
geometry: { type: "Point", coordinates: [-43.9266, -19.9102] }
},
]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.