Computer Graphics & Visualization @ufrj.br
malhaBrasil = FileAttachment("malhabrasil.json").json()
// 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
)
municipios = FileAttachment("municipios.csv").csv()
municipioPorCodigo = new Map(
municipios.map(m => [m["Código Município Completo"], m])
)
populacaoMunicipio = FileAttachment("populacao_municipio_2018.csv").csv()
populacaoPorCodigo = new Map(
populacaoMunicipio.map(p => [p.municipio, +p.populacao])
)
populacaoLimites = d3.extent(populacaoPorCodigo.values())
projecao = d3.geoMercator().fitWidth(width, feicoesMunicipio)
funcaoPath = d3.geoPath(projecao)
limites = funcaoPath.bounds(feicoesMunicipio)
razaoAspecto = {
let [[xmin, ymin], [xmax, ymax]] = limites;
return Math.abs((xmax - xmin) / (ymax - ymin));
}
escalaCores = d3.scaleThreshold(
[1, 10, 100, 1000, 10000],
d3.range(5).map(i => d3.interpolateViridis(i / 4))
)
coresCirculos = d3.scaleOrdinal(d3.range(1, 60), d3.schemeDark2)
raio = d3
.scaleSqrt()
.domain(populacaoLimites)
.range([1, Math.sqrt(width * width) / 50])
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)
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;
}
rewind = require('https://bundle.run/@mapbox/geojson-rewind@0.5.0')
import { legend } from "@d3/color-legend"
d3 = require("d3@6")
topojson = require("topojson-client@3");
import { checkbox } from "@jashkenas/inputs";
import { legendCircle } from "@harrystevens/circle-legend";
import { toc } from "@harrystevens/toc";
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.
