br = fetch("https://raw.githubusercontent.com/fititnt/gis-dataset-brasil/master/uf/topojson/uf.json").then(d => d.json())
topojson = require("topojson-client@3")
geojsonUFs = topojson.feature(br, br.objects.uf)
mapa1 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("path")
.datum(geojsonUFs)
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.5)
//.attr("stroke-opacity", 0.5)
.attr("fill", "#ddd")
.attr("d", pathGen1);
return svg.node();
}
pathGen1 = {
const proj = d3.geoMercator().fitSize([width, height], geojsonUFs);
return d3.geoPath(proj);
}
mapa2 = {
const height = 400;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("path")
.datum(topojson.mesh(br, br.objects.uf, (a,b) => a === b)) // não são fronteiras entre UFs
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1.2) // uma espessura
.attr("fill", "#ddd")
.attr("d", pathGen1);
svg.append("path")
.datum(topojson.mesh(br, br.objects.uf, (a,b) => a !== b)) // fronteiras entre UFs
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.5) // outra espessura
.attr("fill", "none")
.attr("d", pathGen1);
return svg.node();
}
mapa3 = {
const height = 400;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("path")
.datum(topojson.mesh(br, br.objects.uf, (a,b) => a === b))
.attr("stroke", "none")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
.attr("fill", "#ddd")
.attr("d", pathGen1);
svg.append("path")
.datum(topojson.mesh(br, br.objects.uf, (a,b) => a !== b))
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1.2)
.attr("fill", "none")
.attr("d", pathGen1);
return svg.node();
}
mapa4 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const proj = d3.geoMercator().fitExtent([[0, 0], [width/2, height]], topojson.feature(br, br.objects.uf));
const path = d3.geoPath(proj);
svg.append("path")
.datum(topojson.mesh(br, br.objects.uf, (a,b) => a === b))
.attr("stroke", "none")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
.attr("fill", "#ddd")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(br, br.objects.uf, (a,b) => a !== b))
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1.2)
.attr("fill", "none")
.attr("d", path);
return svg.node();
}
mapa5 = {
const height = 400;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const proj = d3.geoMercator().rotate([0, 180]).fitExtent([[0, 0], [width/2, height]], topojson.feature(br, br.objects.uf));
const path = d3.geoPath(proj);
svg.append("path")
.datum(topojson.mesh(br, br.objects.uf, (a,b) => a === b))
.attr("stroke", "none")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
.attr("fill", "#ddd")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(br, br.objects.uf, (a,b) => a !== b))
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1.2)
.attr("fill", "none")
.attr("d", path);
return svg.node();
}
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.
