{
const heightValue = 300;
const widthValue = 600;
const canvas = d3
.create("svg")
.attr("viewBox", `120 0 310 300`)
.attr("class", "mapContainer");
yield canvas.node();
const strokeWidth = 1.5;
const margin = { top: 0, bottom: 20, left: 30, right: 20 };
let arrColores = [100, 200, 300, 450.5, 500, 600, 700, 800];
const numeroRegreso = (arr = []) => {
const longitud = arr.length;
const numeroAleatorio = parseInt(Math.random() * longitud);
return arr[numeroAleatorio];
};
const width = 600 - margin.left - margin.right - strokeWidth * 2;
const height = 300 - margin.top - margin.bottom;
d3.json(src).then((data) => {
console.log(data.features, "Tenemos la data");
let group = canvas.selectAll("g").data(data.features).enter().append("g");
console.log(group, "Tenemos el grupo");
let projection = d3.geoAlbers().fitExtent(
[
[0, 0],
[width, height]
],
data
);
let path = d3.geoPath().projection(projection);
let areas = group
.append("path")
.attr("d", path)
.attr("class", "area")
.attr("class", "bar")
.style("stroke", "white");
});
}