3f:null 40:["$","title",null,{"children":"Scatter-plot dados mapa | Claudio Esperança | Observable"}] 46:T963,scatterplot = { let muncolor = (d) => munSelecionados.filter((mun) => mun.cod == d.CODMUNRES)[0].cor; let plot = Plot.plot({ width: scatterConfig.width, height: scatterConfig.height, marginBottom: 40, x: { line: true, ticks: 10, label: TL(xAxisVar.label), domain: xAxisVar.name == "IDH 2010" && dataRange.xmin < 0 ? xAxisVar.domain : undefined }, y: { line: true, label: TL(yAxisVar.label), domain: yAxisVar.name == "IDH 2010" && dataRange.ymin < 0 ? yAxisVar.domain : undefined }, marks: [ Plot.dot(data, { x: "x", y: "y", title: (d) => nomeMunicipio(d.municipio) + `\n${TL(xAxisVar.label)}: ${d.x.toFixed(2)}` + `\n${TL(yAxisVar.label)}: ${d.y.toFixed(2)}` + `\n${TL(colorVar.label)}: ${d.val.toFixed(2)}`, fill: (d) => colorScale(d.val), stroke: "rgba(0,0,0,0.1)" }), Plot.dot(highlightData, { x: "x", y: "y", symbol: { draw: flagDraw }, title: (d) => nomeMunicipio(d.municipio) + `\n${TL(xAxisVar.label)}: ${d.x.toFixed(2)}` + `\n${TL(yAxisVar.label)}: ${d.y.toFixed(2)}` + `\n${TL(colorVar.label)}: ${d.val.toFixed(2)}`, stroke: "currentColor", fill: (d) => muncolor(d), r: 1.7, strokeWidth: 1 }) ] }); plot.style.fontFamily = scatterConfig.fontFamily; plot.style.fontSize = 11; plot = rectSelect(plot, (range) => { mutable dataRange = range; }); plot = dblClickInteraction(plot, (datum) => alteraMenuLocalidade(datum.municipio) ); plot = hoverInteraction( plot, (sel) => { if (sel.attr("r") == 3) sel.attr("stroke", "black"); }, (sel) => { if (sel.attr("r") == 3) sel.attr("stroke", "rgba(0,0,0,0.1)"); } ); plot = applyDotAnimation(plot, [data, highlightData]); const container = htl.html`

`; container.append(plot); if (dataRange.xmin != Number.NEGATIVE_INFINITY) { container.append(clearButton); clearButton.style.position = "absolute"; clearButton.style.right = "10px"; clearButton.style.top = "10px"; clearButton.onclick = () => { mutable dataRange = allRange; }; } return container; }47:Tb54,// // Variables that can be plotted and functions to compute them from dadosMunicipio rows // variables = [ { label: "Média anual de poluição (µg/m³)", labelBarChart: "Poluição média por ano (µg/m³)", labelRanking: "Ranking por média de poluição", labelTooltip: "média anual (µg/m³)", name: "Poluição", field: (d) => d.AVG_PM25, domain: [0, 70], thresholds: [5, 15, 25, 35], range: ["#260800", "#662514", "#B26B59", "#E5B8AC", "#FFD6CC"].reverse() }, { label: "Baixo peso (por cem nascidos vivos)", labelBarChart: "Baixo peso médio anual (por 100 N.V.)", labelRanking: "Ranking por média de baixo peso", labelTooltip: "por cem nascidos vivos", name: "Baixo peso", field: (d) => (100 * (d.BAIXO_PESO || 0)) / (d.TOTAL || 1), domain: [0, 200], thresholds: [5.2, 6.8, 8.3, 100], range: ["#00261D", "#125948", "#4D9986", "#99CCC0", "#CEF2E9"].reverse() }, { label: "Óbitos perinatais (por mil nascidos vivos)", labelBarChart: "Óbitos perinatais anuais (por mil N.V.)", labelRanking: "Ranking por média de óbitos perinatais", labelTooltip: "por mil nascidos vivos", name: "Mort. Perinatal", field: (d) => (1000 * (d.OBITOS_PERINATAIS || 0)) / (d.TOTAL || 1), domain: [0, 20], thresholds: [0, 0.6, 1.4,3.9], range: ["#070040", "#291C8C", "#6359B2", "#A9A3D9", "#DDD9FF"].reverse() }, { label: "Óbitos neonatais (por mil nascidos vivos)", labelBarChart: "Óbitos neonatais anuais (por mil N.V.)", labelRanking: "Ranking por média de óbitos neonatais", labelTooltip: "por mil nascidos vivos", name: "Mort. Neonatal", field: (d) => (1000 * (d.OBITOS_NEONATAIS || 0)) / (d.TOTAL || 1), domain: [0, 30], thresholds: [0, 0.7, 1.7,3.9], range: ["#200040","#541C8C","#8659B2","#BEA3D9","#ECD9FF"].reverse() }, { label: "Óbitos infantis (por mil nascidos vivos)", labelBarChart: "Óbitos infantis anuais (por mil N.V.)", labelRanking: "Ranking por média de óbitos infantis", labelTooltip: "por mil nascidos vivos", name: "Mort. Infantil", field: (d) => (1000 * (d.OBITOS_INFANTIS || 0)) / (d.TOTAL || 1), domain: [0, 100], thresholds: [0, 9, 14, 20], range: ["#260024", "#661461", "#B259AD", "#E5ACE2", "#FFD9FD"].reverse() }, { label: "Índice de Desenvolvimento Humano (2010)", labelBarChart: "Índice de Desenvolvimento Humano (2010)", labelRanking: "Ranking por IDH (2010)", labelTooltip: "", name: "IDH 2010", field: (d) => d.IDH || 0, domain: [0.4, 0.9], thresholds: [0.6, 0.65, 0.7, 0.75], // range: ["#261800", "#66430A", "#B27D25", "#E6B667", "#FFD899"].reverse() // idh laranja // range: ["#200040","#541C8C","#8659B2","#BEA3D9","#ECD9FF"].reverse() range: ["#001A40", "#1C498C", "#597DB2", "#A3B8D9", "#D9E8FF"].reverse() } ]48:T513,rectSelect = function (plotElement, selFunction) { const xscale = plotElement.scale("x"); const yscale = plotElement.scale("y"); const rect = {}; const svg = d3.select(plotElement).style("user-select", "none"); plotElement.onmousedown = (e) => { rect.x0 = rect.x1 = e.offsetX; rect.y0 = rect.y1 = e.offsetY; rect.dx = rect.dy = 0; rect.sel = svg.append("rect").attr("fill", "rgba(0,0,0,0.2)"); }; plotElement.onmousemove = (e) => { if (!e.buttons) return; [rect.x1, rect.y1] = [e.offsetX, e.offsetY]; rect.dx = Math.abs(rect.x1 - rect.x0); rect.dy = Math.abs(rect.y1 - rect.y0); rect.x = Math.min(rect.x0, rect.x1); rect.y = Math.min(rect.y0, rect.y1); rect.sel.attr("x", rect.x); rect.sel.attr("y", rect.y); rect.sel.attr("width", rect.dx); rect.sel.attr("height", rect.dy); }; plotElement.onmouseup = (e) => { rect.sel.remove(); if (rect.dx > 2 && rect.dy > 2) { selFunction({ xmin: Math.min(xscale.invert(rect.x0), xscale.invert(rect.x1)), xmax: Math.max(xscale.invert(rect.x0), xscale.invert(rect.x1)), ymin: Math.min(yscale.invert(rect.y0), yscale.invert(rect.y1)), ymax: Math.max(yscale.invert(rect.y0), yscale.invert(rect.y1)) }); } }; return plotElement; }49:T509,function applyDotAnimation(plotElement, datasets) { let dataMap = datasets.map((dataset, i) => ({ dataset, map: new Map(), oldMap: mutable oldDataMap[i] ? mutable oldDataMap[i].map : new Map() })); d3.select(plotElement) .selectAll("g[aria-label=dot]") .each(function (_, markGroupIndex) { const markGroup = d3.select(this); const { dataset, map, oldMap } = dataMap[markGroupIndex]; markGroup.selectAll("circle").each(function (_, circleIndex) { let circle = d3.select(this); let key = dataset[circleIndex].CODMUNRES; let newPos = { cx: +circle.attr("cx"), cy: +circle.attr("cy") }; map.set(key, newPos); if (oldMap.has(key)) { const oldPos = oldMap.get(key); circle.attr("cx", oldPos.cx); circle.attr("newcx", newPos.cx); circle.attr("cy", oldPos.cy); circle.attr("newcy", newPos.cy); } }); }); d3.select(plotElement) .selectAll("circle[newcx]") .transition() .duration(1500) .attr("cx", function () { return d3.select(this).attr("newcx"); }) .attr("cy", function () { return d3.select(this).attr("newcy"); }); mutable oldDataMap = dataMap; return plotElement; }4a:T6b9,// // Obsoleto. Substituído pelo componente menuLocalidade // function munInput() { const container = htl.html`

`; let collection = []; const suggestion = (txt) => { txt = txt.toUpperCase(); return municipios .filter((d) => d.municipio.includes(txt)) .sort((a, b) => a.municipio.localeCompare(b.municipio)); }; const search = () => SearchForm({ placeholder: "Novo local...", format: (d) => d.municipio, suggestion }); const refresh = () => { container.innerHTML = ""; for (let mun of collection) { const remButton = htl.html` ⊝ `; remButton.onclick = () => { collection.splice(collection.indexOf(mun), 1); refresh(); }; container.append( htl.html`