2f:T478,update = { yearRange; const selectedYearRange = d3.range(yearRange[0], yearRange[1] + 1); const svg = d3.select(baseMapSVG); const difference = totalYearRange.filter( (x) => !selectedYearRange.includes(x) ); const hiddenClasses = difference .map((año) => `.fosas-circle-${año}`) .join(", "); const showClasses = selectedYearRange .map((año) => `.fosas-circle-${año}`) .join(", "); if (hiddenClasses.length) { svg.selectAll(hiddenClasses).attr("fill-opacity", 0); } svg.selectAll(showClasses).attr("fill-opacity", 1); const tooltipLayer = svg .append("g") .attr("id", "tooltips") .selectAll("circle") .data(mun_fosas_most_recent) .join("circle") .attr("cx", (d) => projection(d.geometry.coordinates)[0]) .attr("cy", (d) => projection(d.geometry.coordinates)[1]) .attr("r", (d) => dotScale(d.rolling)) .attr("stroke", "none") .attr("fill", "steelblue") .attr("fill-opacity", 0) .attr("data-tippy-content", renderTooltip); tippy(tooltipLayer.nodes(), { allowHTML: true, delay: [150, 0], animation: "scale", arrow: true }); }30:T931,baseMapSVG = { const yearRange = viewof yearRange.value; const svg = d3.create("svg").attr("viewBox", "0 0 975 610"); const entLayer = svg .append("g") .attr("id", "ent") .append("path") .attr("d", path(ent)) .attr("fill", "#f5f5f5") .attr("stroke", "#999") .attr("stroke-width", 1.2); const circlesLayer = svg .append("g") .attr("id", "all-fosas") .selectAll("circle") .data(mun_fosas) .join("circle") .attr("id", (d) => `${d.CVEGEO}-${d.ANIO}`) .attr("class", (d) => `fosas-circle fosas-circle-${d.ANIO}`) .attr("cx", (d) => projection(d.geometry.coordinates)[0]) .attr("cy", (d) => projection(d.geometry.coordinates)[1]) .attr("r", (d) => dotScale(d.rolling)) .attr("stroke", "#fff") .attr("stroke-width", 0) .attr("fill", (d) => yearScale(d.ANIO)) .attr("fill-opacity", 1) // .attr("pointer-events", "none") .attr("data-cvegeo", (d) => d.CVEGEO); // .attr("data-tippy-content", renderTooltip); const labelsLayer = svg .append("g") .attr("id", "ent-label") .selectAll("text") .data(ent.features) .join("text") .text((d) => { const abbrev = ent_abbrev.get(d.properties.CVEGEO); return abbrev ? abbrev : ""; }) .attr("text-anchor", "middle") .attr("x", (d) => path.centroid(d)[0]) .attr("y", (d) => path.centroid(d)[1]) .attr("stroke-width", 2) .attr("fill", "#777") .attr("stroke", "#fff") .attr("paint-order", "stroke") .style("font-family", "Helvetica Neue, sans serif") .style("text-transform", "uppercase") .style("font-weight", 700) .style("letter-spacing", "0.5px") .style("font-size", "10px"); // const tooltipLayer = svg // .append("g") // .attr("id", "tooltips") // .selectAll("circle") // .data(mun_fosas_most_recent) // .join("circle") // .attr("cx", (d) => projection(d.geometry.coordinates)[0]) // .attr("cy", (d) => projection(d.geometry.coordinates)[1]) // .attr("r", (d) => dotScale(d.rolling)) // .attr("stroke", "none") // .attr("fill", "steelblue") // .attr("fill-opacity", 0) // .attr("data-tippy-content", renderTooltip); // tippy(tooltipLayer.nodes(), { // allowHTML: true, // delay: [150, 0], // animation: "scale", // arrow: true // }); return svg.node(); }31:T695,function interval(range = [], options = {}) { const [min = 0, max = 1] = range; const { step = 0.001, label = null, value = [min, max], format = ([start, end]) => `${start} … ${end}`, color, width, theme } = options; const __ns__ = DOM.uid("scope").id; const css = ` #${__ns__} { font: 13px/1.2 var(--sans-serif); display: flex; align-items: baseline; flex-wrap: wrap; max-width: 100%; width: auto; } @media only screen and (min-width: 30em) { #${__ns__} { flex-wrap: nowrap; width: 360px; } } #${__ns__} .label { width: 120px; padding: 5px 0 4px 0; margin-right: 6.5px; flex-shrink: 0; } #${__ns__} .form { display: flex; width: 100%; } #${__ns__} .range { flex-shrink: 1; width: 100%; } #${__ns__} .range-slider { width: 100%; } `; const $range = rangeInput({ min, max, value: [value[0], value[1]], step, color, width, theme }); const $output = html``; const $view = html`

${label == null ? "" : html`

${label}`}

${$range}

${$output}

${html`