Computer Graphics & Visualization @ufrj.br
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 };
})
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.
