30:T453,{ if (escolaSelecionada) { let div = html`

`; div.append (html`

${escolaSelecionada.SMEDBOEscolas_municipaisNome_Escola}

`); let table = html`

`; div.append (table); for (let key of ["SMEDBODados_Unidades_escolaresTurmasCreche", "SMEDBODados_Unidades_escolaresTurmasPreEscola", "SMEDBODados_Unidades_escolaresTurmasCA", "SMEDBODados_Unidades_escolaresTurmasPrimario", "SMEDBODados_Unidades_escolaresTurmasGinasio", "SMEDBODados_Unidades_escolaresTurmasCe", "SMEDBODados_Unidades_escolaresTurmasProjetos", "SMEDBODados_Unidades_escolaresTurmasPeja", "SMEDBODados_Unidades_escolaresSalasAula", "SMEDBODados_Unidades_escolaresTurmasEI"]) { let title = key.slice("SMEDBODados_Unidades_escolares".length); table.append(html`${title}${escolaSelecionada[key]}`); } return div; } } 31:T5b3,mapa = { let vis = d3.select(svg); vis.on("click",()=>{ mutable bairroSelecionado=null; mutable escolaSelecionada=null; vis.selectAll("text.selected").remove(); }); let join = vis.selectAll("circle") .data(escolas.filter(d => d.SMEDBODados_Unidades_escolaresSalasAula >= filtroSalas), d=>d.SMEDBOEscolas_municipaisOBJECTID); let newCircles = join.enter().append("circle").attr("r",0); let oldCircles = join.exit().transition().duration(1000).attr("r",0).remove(); newCircles.merge(join) .attr("transform", function (d) { return `translate(${x(d.X)},${y(d.Y)})` }) .style("fill", (d)=> d.SMEDBOEscolas_municipaisBairro===bairroSelecionado||!bairroSelecionado?color(+d.SMEDBOEscolas_municipaiscod_Bairro):"grey") .style("opacity",0.5) .on("click", function(d) { mutable bairroSelecionado = d.SMEDBOEscolas_municipaisBairro; mutable escolaSelecionada = d; vis.selectAll("text.selected").remove(); let selText = d.SMEDBOEscolas_municipaisNome_Escola; let [tx,ty] = [x(d.X),y(d.Y)]; vis.append("text").attr("x",tx).attr("y",ty).attr("dy", -10) .attr("class", "selected background").text(selText); vis.append("text").attr("x",tx).attr("y",ty).attr("dy", -10) .attr("class", "selected").text(selText); d3.event.stopPropagation(); }) .transition().duration(1000).attr("r",7) }32:[] 2e:{"title":"Escolas Municipais","cells":[{"id":0,"value":"md`# Escolas Municipais\n\nDados da [Data-Rio](http://www.data.rio/datasets/escolas-municipais/data?geometry=-45.387%2C-23.133%2C-41.425%2C-22.69&orderBy=SME.DBO.Escolas_municipais.cod_SMA&orderByAsc=false)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`### Caixa envolvente das posições das escolas\nUsa \\`d3.extent\\` para obter min e max de X e Y`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"bbox = {\n let [xmin,xmax] = d3.extent(escolas,(d)=>+d.X);\n let [ymin,ymax] = d3.extent(escolas,(d)=>+d.Y);\n return {xmin:xmin,xmax:xmax,ymin:ymin,ymax:ymax}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`### Altura da visualização`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"height = ~~(width*9/16)","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`### Margens`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"margin = ({left:20,right:20,top:20,bottom:20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`### O elemento SVG onde a visualização será mostrada`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"svg = DOM.svg(width,height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"style = html`