Computer Graphics & Visualization @ufrj.br
planilha = FileAttachment("Estados Wikipedia.xlsx").xlsx()
planilha.sheet(0, { headers: true })
// Processamento para uniformizar unidades
dadosEstados = planilha.sheet(0, { headers: true }).map((d) => ({
nome: d["Unidade federativa"].split(" ").slice(1).join(" "),
uf: d["Abreviação"],
capital: d["Sede de governo"].split(" ").slice(1).join(" "),
area: +d["Área (km²)"].replaceAll(" ", "").replaceAll(",", "."),
populacao: +d["População (2014)"].replaceAll(" ", ""),
pib: +d["PIB (2015)"].replaceAll(" ", "").replaceAll(",", "."),
pib_per_capita: +d["PIB per capita (R$) (2015)"]
.replace(" ", "")
.replace(",", "."),
idh: d["IDH (2010)"] / 1000,
alfabetizacao:
d["Alfabetização (2016)"].replaceAll(",", ".").replaceAll("%", "") / 100,
mortalidade_infantil:
d["Mortalidade infantil (2016)"].replaceAll(",", ".").replaceAll("‰", "") /
1000,
expectativa_vida: +d["Expectativa de vida (2016)"]
.split(" ")[0]
.replaceAll(",", ".")
}))
Inputs.table(dadosEstados)
vl
.markBar()
.data(dadosEstados)
.encode(
vl.y().field("uf").sort(vl.fieldQ(variavelEstado)),
vl.x().fieldQ(variavelEstado)
)
.width(400)
.render()
Plot.plot({
marks: [
Plot.barX(dadosEstados, {
fill: "gray",
x: variavelEstado,
y: "uf",
sort: { y: "x" }
}),
Plot.frame()
],
width: 450
})
topojsonBrasil = fetch(
"https://gist.githubusercontent.com/ruliana/1ccaaab05ea113b0dff3b22be3b4d637/raw/196c0332d38cb935cfca227d28f7cecfa70b412e/br-states.json"
).then((response) => response.json())
geojsonEstados = {
const geojson = topojson.feature(
topojsonBrasil,
topojsonBrasil.objects.estados
);
geojson.features.forEach((d) => {
let [x, y] = d3.geoCentroid(d);
Object.assign(d.properties, { lon: x, lat: y });
});
return geojson;
}
// Biblioteca TopoJSON
topojson = require("topojson")
map = vl
.layer(
vl
.markGeoshape({ fill: "lightgray", stroke: "white", strokeWidth: 1 })
.data(geojsonEstados.features),
vl
.markText({ fill: "black" })
.data(geojsonEstados.features.map((d) => d))
.encode(
vl.longitude().fieldQ("properties.lon"),
vl.latitude().fieldQ("properties.lat"),
vl.text().fieldN("id")
)
)
.project(vl.projection("mercator"))
.height(400)
.width(400)
.render()
Plot.plot({
marks: [
Plot.dot(dadosEstados, {
fill: "gray",
x: "idh",
y: "mortalidade_infantil",
title: "nome"
}),
Plot.frame()
]
})
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.
