The avatar for @esperanc
Claudio Esperança
Computer Graphics & Visualization @ufrj.br
Published
Data Visualization
Edited
May 30, 2022
Fork of Dorling Cartogram
6 stars
4
Data Visualization
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 de bairros do Rio com Vega-Lite
Mapa coroplético e cartograma Dorling de população dos municípios brasileiros
Deformation with RBFsLane-Riesenfeld subdivision
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
malhaBrasil = FileAttachment("malhabrasil.json").json()
Insert cell
// Observe o uso de rewind para mudar as circulações dos polígonos para horária
feicoesMunicipio = rewind(
topojson.feature(malhaBrasil, malhaBrasil.objects.foo),
true
)
Insert cell
municipios = FileAttachment("municipios.csv").csv()
Insert cell
Insert cell
Insert cell
municipioPorCodigo = new Map(
municipios.map(m => [m["Código Município Completo"], m])
)
Insert cell
populacaoMunicipio = FileAttachment("populacao_municipio_2018.csv").csv()
Insert cell
populacaoPorCodigo = new Map(
populacaoMunicipio.map(p => [p.municipio, +p.populacao])
)
Insert cell
populacaoLimites = d3.extent(populacaoPorCodigo.values())
Insert cell
Insert cell
projecao = d3.geoMercator().fitWidth(width, feicoesMunicipio)
Insert cell
funcaoPath = d3.geoPath(projecao)
Insert cell
limites = funcaoPath.bounds(feicoesMunicipio)
Insert cell
razaoAspecto = {
let [[xmin, ymin], [xmax, ymax]] = limites;
return Math.abs((xmax - xmin) / (ymax - ymin));
}
Insert cell
Insert cell
escalaCores = d3.scaleThreshold(
[1, 10, 100, 1000, 10000],
d3.range(5).map(i => d3.interpolateViridis(i / 4))
)
Insert cell
coresCirculos = d3.scaleOrdinal(d3.range(1, 60), d3.schemeDark2)
Insert cell
raio = d3
.scaleSqrt()
.domain(populacaoLimites)
.range([1, Math.sqrt(width * width) / 50])
Insert cell
legendaCirculos = legendCircle()
.tickValues([1e5, 1e6, 1e7])
.tickFormat((d, i, e) => {
const val = d >= 1e6 ? `${d / 1e6} M` : `${d / 1e3} m`;
const unit = i === e.length - 1 ? " habitantes" : "";
return `${val}${unit}`;
})
.scale(raio)
Insert cell
Insert cell
simulacao = {
feicoesMunicipio.features.forEach((node) => {
[node.x, node.y] = [node.x0, node.y0] = projecao(node.properties.centroide);
return node;
});
const simulacao = d3
.forceSimulation(feicoesMunicipio.features)
.force(
"x",
d3.forceX((d) => d.x0)
)
.force(
"y",
d3.forceY((d) => d.y0)
)
.force(
"collide",
d3.forceCollide(
(d) => 0.2 + raio(populacaoPorCodigo.get(d.properties.codarea))
)
)
.stop();
//for (let i = 0; i < 120; i++) simulacao.tick();
return simulacao;
}
Insert cell
Insert cell
rewind = require('https://bundle.run/@mapbox/geojson-rewind@0.5.0')
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
topojson = require("topojson-client@3");
Insert cell
import { checkbox } from "@jashkenas/inputs";
Insert cell
import { legendCircle } from "@harrystevens/circle-legend";
Insert cell
import { toc } from "@harrystevens/toc";
Insert cell

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.
Learn more