Computer Graphics & Visualization @ufrj.br
37-75Introdução ao SVGIntrodução ao HtmlIntrodução às Cascading StyleSheets (CSS)SVG Dinâmico com D3Usando arquivos SVGEncapsulando um inputSorteando com probabilidades dadasHexagonal hierarchical cartogram for BrazilCategorical TreemapCoral Vivo Diorama v3Mapa do Brasil com Vega-LiteCategorical data visualization with t-SNEHierarchical Square PackingPhoto gallery with lensMapa coroplético e cartograma Dorling de população dos municípios brasileirosDeformation with RBFsLane-Riesenfeld subdivision
Mapa de bairros do Rio com Vega-Lite
limite_de_bairros = d3.json(
"https://raw.githubusercontent.com/lucasbarcellosoliveira/100AnosUFRJ/master/Limite_Bairro.json"
)
vl
.markGeoshape()
.data(vl.topojson(limite_de_bairros).feature("Limite_Bairro"))
.project(vl.projection("mercator"))
.width(800)
.height(500)
.render()
vl
.markGeoshape()
.data(vl.topojson(limite_de_bairros).feature("Limite_Bairro"))
.project(vl.projection("mercator"))
.encode(vl.tooltip(vl.fieldN("properties.NOME")))
.width(800)
.height(500)
.render()
pontos_de_interesse = [
{
lat: -22.97664010854137,
long: -43.243914883098896,
nome: "Parque da Cidade",
importancia: 1
},
{
lat: -22.947723140720527,
long: -43.28521985237576,
nome: "Parque Nacional da Tijuca",
importancia: 3
},
{
lat: -22.971584997616866,
long: -43.216363163258414,
nome: "Parque dos Patins",
importancia: 2
}
]
{
let map = vl
.markGeoshape({ color: "gray" })
.data(vl.topojson(limite_de_bairros).feature("Limite_Bairro"))
.project(vl.projection("mercator"));
let names = vl
.markText({ dy: -10 })
.data(pontos_de_interesse)
.encode(
vl.longitude().fieldQ("long"),
vl.latitude().fieldQ("lat"),
vl.text().fieldN("nome")
);
let importancia = vl
.markCircle({ color: "orange", opacity: 0.7 })
.data(pontos_de_interesse)
.encode(
vl.longitude().fieldQ("long"),
vl.latitude().fieldQ("lat"),
vl.size().fieldN("importancia")
);
return vl.layer(map, names, importancia).height(500).width(800).render();
}
{
let map = vl
.markGeoshape()
.data(vl.topojson(limite_de_bairros).feature("Limite_Bairro"))
.project(vl.projection("mercator"));
let names = vl
.markText()
.data(centroids)
.encode(
vl.longitude().fieldQ("long"),
vl.latitude().fieldQ("lat"),
vl.text().fieldN("nome")
);
return vl.layer(map, names).height(600).width(900).render();
}
topojson = require("topojson@3")
features = topojson.feature(
limite_de_bairros,
limite_de_bairros.objects.Limite_Bairro
).features
centroids = features.map((d) => {
let [long, lat] = d3.geoPath().centroid(d);
return { long, lat, nome: d.properties.NOME };
})
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.