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 v3Categorical data visualization with t-SNEHierarchical Square PackingPhoto gallery with lensMapa de bairros do Rio com Vega-LiteMapa coroplético e cartograma Dorling de população dos municípios brasileirosDeformation with RBFsLane-Riesenfeld subdivision
Mapa do Brasil com Vega-Lite
import { br, estados_e_capitais } from "@dan-reznik/brasil-estados-e-capitais"
br
estados_e_capitais.view()
import { vl } from "@vega/vega-lite-api-v5"
vl
.markGeoshape()
.data(vl.topojson(br).feature("estados"))
.project(vl.projection("mercator"))
.render()
vl
.markGeoshape({ fill: "green", stroke: "blue", strokeWidth: 2 })
.data(vl.topojson(br).feature("estados"))
.project(vl.projection("mercator"))
.render()
vl
.layer(
vl
.markGeoshape({ fill: "green", stroke: "yellow", strokeWidth: 1 })
.data(vl.topojson(br).feature("estados")),
vl
.markCircle({ fill: "white" })
.data(estados_e_capitais)
.encode(
vl.longitude().fieldQ("longitude_2"),
vl.latitude().fieldQ("latitude_2")
)
)
.project(vl.projection("mercator"))
.render()
vl
.layer(
vl
.markGeoshape({ fill: "green", stroke: "yellow", strokeWidth: 1 })
.data(vl.topojson(br).feature("estados")),
vl
.markCircle({ fill: "white" })
.data(estados_e_capitais)
.encode(
vl.longitude().fieldQ("longitude_2"),
vl.latitude().fieldQ("latitude_2")
),
vl
.markText({ fill: "white", dy: -10 })
.data(estados_e_capitais)
.encode(
vl.longitude().fieldQ("longitude_2"),
vl.latitude().fieldQ("latitude_2"),
vl.text().fieldN("nome_2")
)
)
.project(vl.projection("mercator"))
.render()
vl
.layer(
vl
.markGeoshape({ fill: "green", stroke: "yellow", strokeWidth: 1 })
.data(vl.topojson(br).feature("estados")),
vl
.markCircle({ fill: "white" })
.data(estados_e_capitais)
.encode(
vl.longitude().fieldQ("longitude_2"),
vl.latitude().fieldQ("latitude_2")
),
vl
.markText({ fill: "white", dy: -10 })
.data(estados_e_capitais)
.encode(
vl.longitude().fieldQ("longitude_2"),
vl.latitude().fieldQ("latitude_2"),
vl.text().fieldN("nome_2")
)
)
.project(vl.projection("mercator"))
.background('gray')
.width(800)
.height(800)
.config({ view: { stroke: null } })
.render()
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.
