BivariateBubbleMap_comuna = function BivariateBubbleMap_comuna(data,
{
position = (e) => e,
sizeValue = () => undefined,
nameValue = () => undefined,
colorValue = () => undefined,
territory = () => undefined,
title,
scale = d3.scaleSqrt,
domain,
maxRadius = 15,
width = 640,
height ,
projection,
features,
borders,
outline = projection && projection.rotate ? { type: "Sphere" } : null,
backgroundFill = "#ededed",
backgroundStroke = "white",
backgroundStrokeWidth,
backgroundStrokeOpacity,
backgroundStrokeLinecap = "round",
backgroundStrokeLinejoin = "round",
colorScale = d3.scaleLinear(d3.interpolateViridis),
fillOpacity = 0.5,
strokeWidth = 0.5,
strokeOpacity,
legendBubbleTitle,
legendColorTitle,
legendX = 825 - maxRadius - 10,
legendY = height - 10
} = {}
) {
const I = d3.map(data, (_, i) => i);
const V = d3.map(data, sizeValue).map((d) => (d == null ? NaN : +d));
const C = d3.map(data, colorValue).map((d) => (d == null ? NaN : +d));
const P = d3.map(data, position);
const N = d3.map(data, nameValue);
const T = title == null ? null : d3.map(data, title);
const K = d3.map(data, territory);
console.log(V)
if (domain === undefined) domain = [0, 7];
const radius = scale(domain, [0, maxRadius]);
if (height === undefined) {
if (outline === undefined) {
height = 400;
} else {
const [[x0, y0], [x1, y1]] = d3
.geoPath(projection.fitWidth(width, outline))
.bounds(outline);
const dy = Math.ceil(y1 - y0),
l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale((projection.scale() * (l - 1)) / l).precision(0.2);
height = dy;
}
}
const path = d3.geoPath(projection);
if (createTooltip_comuna) {
var div = d3.select("body").append("div")
.attr("class", "arrow_box")
.style("opacity", 0);
}
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, 650])
.attr("style", "width: 100%; height: auto; height: intrinsic;");
if (outline != null)
svg
.append("path")
.attr("fill", "white")
.attr("stroke", "currentColor")
.attr("d", path(outline));
svg
.append("path")
.datum(features)
.attr("fill", backgroundFill)
.attr("d", path)
if (borders != null)
svg
.append("path")
.attr("pointer-events", "none")
.attr("fill", "none")
.attr("stroke", backgroundStroke)
.attr("stroke-linecap", backgroundStrokeLinecap)
.attr("stroke-linejoin", backgroundStrokeLinejoin)
.attr("stroke-width", backgroundStrokeWidth)
.attr("stroke-opacity", backgroundStrokeOpacity)
.attr("d", path(borders))
const legendColor = svg
.append("g")
.attr("transform", `translate(${650}, ${100}) `)
.append(() => categoricalLegend_comuna(legendData_comuna, 'Cantidad de desertores por región'))
.attr("fill-opacity", 1);
const legend = svg
.append("g")
.attr("fill", "#777")
.attr("transform", `translate(${legendX},${legendY})`)
.attr("text-anchor", "middle")
.style("font", "10px sans-serif")
.selectAll("g")
.data(radius.ticks(4).slice(1))
.join("g");
legend
.append("circle")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("cy", (d) => -radius(d))
.attr("r", radius);
legend
.append("g")
.call(g => g.append("text")
.attr("x", (0))
.attr("y", -45)
.attr("text-anchor", "middle")
.style('font-weight', "700")
.style('font-size', "10px")
.style('font-family', fonts['default']['family'])
.text(legendBubbleTitle));
legend
.append("text")
.attr("y", (d) => -2 * radius(d))
.attr("dy", "0.8em")
.text(radius.tickFormat(1, "s"));
svg.append("g")
.attr("fill-opacity", fillOpacity)
.attr("stroke-width", strokeWidth)
.attr("stroke-opacity", strokeOpacity)
.selectAll("circle")
.data(
d3
.range(data.length)
.filter((i) => P[i])
.sort((i, j) => d3.descending(V[i], V[j]))
)
.join("circle")
.attr("fill", (i) => colorScale(C[i]))
.attr("stroke", (i) => colorScale(C[i]))
.attr("value", (i) => V[i])
.attr("desertores", (i) => C[i])
.attr("region", (i) => N[i])
.attr("territory", (i) => K[i])
.attr(
"transform",
projection == null
? (i) => `translate(${P[i]})`
: (i) => `translate(${projection(P[i])})`
)
.attr("r", (i) => radius(V[i]))
.on('mouseover', function (q, i) {
svg.selectAll("circle")
.attr("fill-opacity", 0.2)
d3.select(this).transition()
.duration('25')
.attr("fill-opacity", 0.8)
div.html(createTooltip_comuna(q, data))
.style("left", (q.pageX + 20) + "px")
.style("top", (q.pageY + 20) + "px")
.transition()
.duration('25')
.style("opacity", 1)
})
.on('mouseout', function (q) {
svg.selectAll("path")
.attr("fill-opacity", 0.8)
d3.select(this).transition()
.duration('25')
div.transition()
.duration('25')
.style("opacity", 0);
});
svg.append('image')
.attr('xlink:href', 'https://images.squarespace-cdn.com/content/v1/6078e332d6af970bb7b95e6f/1672340132826-T3GAGDEAALAA6MLWYERN/poweredbyunholster.png?format=500w')
.attr("height", '30')
.attr("transform", `translate(${900}, ${600}) `)
return Object.assign(svg.node(), { scales: { radius } });
}