2d:null 2e:["$","title",null,{"children":"Focos de incêndio identificados pelo INPE, em Fortaleza - CE, nos últimos 10 anos. | Alexandre R. Cajazeira Ramos | Observable"}] 33:T1382, chart = { let width = SVGwidth; var active = d3.select(null); var svg = d3.select( DOM.svg(width, height) ).attr("width",width) .attr("height",height) const projection = d3.geoMercator() .fitSize([width, height*0.8], bairrosFortaleza); const path = d3.geoPath() .projection(projection); const zoom = d3.zoom() .scaleExtent([1, 15]) .translateExtent([[-(2 * width), -(1.5 * height)], [2 * width, 1.5 * height]]) .on("zoom", zoomed) // .on("wheel", null) ; const bar = svg.append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.05) .attr('stroke', 'red') .on("click", reset) var g = svg.append("g") .style("stroke-width", "1.5px"); // .attr("transform", "translate(0,"+(height*0.1)+")"); const parques = g.append("g") .attr("fill", "#005ce6") .attr("cursor", "pointer") .selectAll("path") .data(UCEs.features) .join("path") .attr("class", "parque") .attr("stroke-width", 0.3) .attr("opacity", 0.7) .attr("stroke", "black") .attr("fillOpacity", 0.5) .attr("fill",parques_color) .on("click", clicked) .attr("d", path) .append("title") .text(d => `${d.properties.Nome_UC}`); const bairros = g.append("g") .attr("fill", "#005ce6") .attr("cursor", "pointer") .selectAll("path") .data(bairrosFortaleza.features) .join("path") .attr("class", "bairro") .attr("id", function(d){return "e"+d.properties.GID}) .attr("stroke-width", 0.5) .attr("opacity", 0.5) .attr("stroke", "black") .attr("fillOpacity", 0.3) .attr("fill", d => d.properties.NOME == selected_bairro? selectcolor:bgcolor) .on("click", clicked) .attr("d", path) .append("title") .text(d => `${d.properties.NOME}`); // const alerta_shape = g.append("g") // .attr("fill", "#005ce6") // .attr("cursor", "pointer") // .selectAll("path") // .data(alerta.features) // .join("path") // .attr("class", "parque") // .attr("stroke-width", 0.1) // .attr("opacity", 0.7) // .attr("stroke", "black") // .attr("fillOpacity", 0.5) // .attr("fill",parques) // .attr("d", path) const points = g.append("g"); function plotPoints(dataPoints) { points.selectAll("circle").remove(); points.selectAll("circle") .data(dataPoints) .enter() .append("circle") .attr("fill", selectcolor) .attr("stroke-width", 1) .attr("stroke-color", "black") .attr("cx", d=>projection([d.lng,d.lat])[0]) .attr("cy", d=>projection([d.lng,d.lat])[1]) .attr("r", 2); } function clicked(event, d) { const thisPath = d3.select(this); const [[x0, y0], [x1, y1]] = path.bounds(d); event.stopPropagation(); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(Math.min(8, 0.8 / Math.max((x1 - x0) / width, (y1 - y0) / height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(event, svg.node()) ); } function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } function reset() { bairros.transition().style("fill", null); svg.transition().duration(1500).call( zoom.transform, d3.zoomIdentity.translate(0, height*0.1), d3.zoomTransform(svg.node()).invert([width / 2, (height) / 2]) ); } if(ZoomControl){ svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([-2, 10]) .on("zoom", zoomed)); function zoomed({transform}) { g.attr("transform", transform); } } function goAt() { const [[x0, y0], [x1, y1]] = path.bounds(bairro); svg.transition().duration(1500).call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(Math.min(8, 0.8 / Math.max((x1 - x0) / width, (y1 - y0) / height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), ); } if(WheelZoom){ svg .call(zoom) .on("wheel.zoom", null) .on('touchmove.zoom', null) // .on('touchmove.zoom', event => { // console.log("oi1"); // const t = d3.pointers(event, this); // console.log(t); // // if (d3.event.touches.length === 1) { // // d3.event.stopPropagation(); // // // i've also tried d3.event.preventDefault() but it doesn't do anything // // } // return this.update(event); // }) } return Object.assign(svg.node(), { zoomIn: () => svg.transition().call(zoom.scaleBy, 2), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.5), zoomReset: reset, zoomAt: goAt, plotPoints: plotPoints }); } 34:[{"id":"8642cc576ae42fe67a62f32522e6cfa629060b284d40e485a65c720f63426deb3d374240570619f18f14ba6375006da50a2c087c769912624dce7b173fb0de35","href":"https://static.observableusercontent.com/files/8642cc576ae42fe67a62f32522e6cfa629060b284d40e485a65c720f63426deb3d374240570619f18f14ba6375006da50a2c087c769912624dce7b173fb0de35","name":"datasetINPE.csv","type":"text/csv","lastModified":1637326123374.62,"size":36299},{"id":"12ec5c44925ee29839f6adf4e053447761d9dd5c91611161094ddb3c572b3ae0a6549e49af4e9cadfaa75c6a9d40f105cfd9590eb7b0faefe4f1560476f7a568","href":"https://static.observableusercontent.com/files/12ec5c44925ee29839f6adf4e053447761d9dd5c91611161094ddb3c572b3ae0a6549e49af4e9cadfaa75c6a9d40f105cfd9590eb7b0faefe4f1560476f7a568","name":"bairrosFortaleza.json","type":"application/json","lastModified":1637269720367.906,"size":1921743},{"id":"c98b65f71a4db455a2129f9649f08af14e67e15b6987da583afa8d421a5d358134dc172b5887069b48367df53538087d82c668523c7286239947e17f9277bcff","href":"https://static.observableusercontent.com/files/c98b65f71a4db455a2129f9649f08af14e67e15b6987da583afa8d421a5d358134dc172b5887069b48367df53538087d82c668523c7286239947e17f9277bcff","name":"Focos_2021-01-01_2021-11-18.csv","type":"text/csv","lastModified":1637269838484.101,"size":8576},{"id":"8dd48a81be2f77e3fb9d1d951f9813fb8bc920f6da1ff8e38daa6d70e227a2bc8cf197f82acb1ce660a2750d929d1ab6e3074d13bfa9e413d181df7bd1ac29bd","href":"https://static.observableusercontent.com/files/8dd48a81be2f77e3fb9d1d951f9813fb8bc920f6da1ff8e38daa6d70e227a2bc8cf197f82acb1ce660a2750d929d1ab6e3074d13bfa9e413d181df7bd1ac29bd","name":"datasetINPE@1.csv","type":"text/csv","lastModified":1637352352484.603,"size":53022},{"id":"67d465d9fbf31df049ab6ac7fadd1569c595c551aa7e03c9fdb7797a6dae703d1284062b921cc9ddc86d429b798766a35c4f7681169274db624f712bd4f3e69b","href":"https://static.observableusercontent.com/files/67d465d9fbf31df049ab6ac7fadd1569c595c551aa7e03c9fdb7797a6dae703d1284062b921cc9ddc86d429b798766a35c4f7681169274db624f712bd4f3e69b","name":"UCs@2.geojson","type":"application/geo+json","lastModified":1637348131243.45,"size":268895}] 31:{"id":"245c50e8e9f0bbc2","slug":"focos-de-incendio-fortaleza-inpe","title":"Focos de incêndio identificados pelo INPE, em Fortaleza - CE, nos últimos 10 anos.","thumbnail":"ec1db78e79bdba02888e79fb3e852284521ef704b6bf1d30986a86f8d97c65b4","access_level":"public","create_time":"$D2021-11-18T21:08:40.367Z","update_time":"$D2022-02-18T19:20:41.582Z","view_time":null,"first_public_time":"$D2021-11-23T14:37:20.716Z","has_unpublished_edits":null,"fork":{"id":"cf1ece16d9cfb807","slug":"mapa-base-fortaleza","title":"Mapa-base Fortaleza","owner":{"id":"8e753d8464d231a8","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8e753d8464d231a8","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/24092c234c1e156d4478bb8314522bb1b37a8ec8ee43d8a161f6931e7d8e6bed","tier":"starter_2024"},"version":1925,"publish_version":1925,"role":null,"authored":false,"authors":[{"type":"individual","id":"273de8807df2d5cc","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/b3a734ec21bf9f0bb7a0ecaacac5767f34267e9be1b061f79faf1fb9146aa44d","tier":null}],"members":[{"type":"individual","id":"273de8807df2d5cc","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/b3a734ec21bf9f0bb7a0ecaacac5767f34267e9be1b061f79faf1fb9146aa44d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"6ad1142fbeacff4b","slug":"datadoc","title":"DATADOC / OPOVO","owner":{"id":"8e753d8464d231a8","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos"}},"type":"notebook","body":{"title":"Focos de incêndio identificados pelo INPE, em Fortaleza - CE, nos últimos 10 anos.","cells":[{"id":1696,"value":"title = md`# Focos de incêndio identificados pelo [INPE](https://queimadas.dgi.inpe.br/queimadas/portal), em Fortaleza - CE, nos últimos 10 anos. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"count = md`\n # ${filteredPoints.length} focos de incêndio entre 01/2011 e ${d3.timeFormat(\"%m/%Y\")(time)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1589,"value":"viewof time = Scrubber(days, { delay: loopTime, format: d => \"Dados até: \"+ d3.timeFormat(\"%m/%Y\")(d), loop: loopControl})\n// d3.timeFormat(\"%m/%Y\")(d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"zoomButtons = {\n \n const form = html`\n \n \n`;\n form.in.onclick = () => chart.zoomIn();\n form.out.onclick = () => chart.zoomOut();\n form.reset.onclick = () => chart.zoomReset();\n bairro? form.goAt.onclick = () => chart.zoomAt():'' \n \n\n const form2 = html`

Ative o Controle de Zoom para os botões

`\n return ZoomControl?form:form2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1907,"value":"fonte = md`*Fonte: Levantamento DATADOC com base em dados do INPE*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1793,"value":"viewof parques_color = Inputs.color({label: \"Áreas de Proteção\", value: \"#45b07e\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"viewof bgcolor = Inputs.color({label: \"Bairros de Fortaleza\", value: \"#adb1b3\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"viewof selectcolor = Inputs.color({label: \"Focos de incêndio\", value: \"#e31a1c\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"viewof selected_bairro = autoSelect({\n options: bairrosFortaleza.features.map(d => d.properties.NOME),\n placeholder: \"Selecione um Bairro para destacar. . .\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"viewof WheelZoom = checkbox({\n title: \"WheelZoom\",\n // description: \"Clique para permitir o Zoom no mapa\",\n options: [{ value: \"True\", label: \"Bloquear rolagem do mouse\" }],\n value: \"True\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"viewof ZoomControl = checkbox({\n title: \"Controle de Zoom\",\n // description: \"Clique para permitir o Zoom no mapa\",\n options: [{ value: \"True\", label: \"Zoom\" }],\n value: \"True\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"viewof TooltipControl = checkbox({\n title: \"Tooltip\",\n // description: \"Clique para permitir o Zoom no mapa\",\n options: [{ value: \"True\", label: \"Render tooltip\" }],\n value: \"True\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"viewof height = Inputs.range([100, 2000], {value: 500, step: 1, label: \"Height\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"viewof SVGwidth = Inputs.range([100, 2000], {value: width, step: 1, label: \"Width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1636,"value":"viewof loopTime = Inputs.range([1, 10000], {value: 100, step: 10, label: \"Delay Animação\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1690,"value":"viewof loopControl = checkbox({\n // title: \"Loop na Animação?\",\n options: [{ value: \"True\", label: \"Loop na Animação?\" }],\n value: \"False\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"log","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"bairro = bairrosFortaleza.features.filter(d => d.properties.NOME == selected_bairro)[0] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"bairrosFortaleza = FileAttachment(\"bairrosFortaleza.json\").json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"import {autoSelect} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"bairro1 = bairrosFortaleza.features[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"import {callout} from \"@cronaline/mexico-with-mercator-projection-and-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"import {log} from '@sorig/console-log-without-leaving-your-notebook'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"style = {\n \n const vertical = false;\n const code = html`\n \n`\n return code\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"dataPoints = {\n\n const formatTime = d3.timeParse(\"%Y/%m/%d\");\n \n const dataRaw = d3.csvParse(await FileAttachment(\"datasetINPE@1.csv\").text())\n var data = [];\n dataRaw.forEach(d => data.push({'dtg':formatTime(d.datahora.substr(0,10)),'datahora': d.datahora, 'lat': +d.latitude, 'lng': +d.longitude,'satelite': d.satelite}));\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"dayExtent = d3.extent(dataPoints, d => d.dtg)\n// dayExtent = [\"2011-01-14T03:00Z\", \"2021-11-19T03:00Z\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"days = \n d3.timeMonth\n .range(dayExtent[0], d3.timeDay.offset(dayExtent[1],30))\n .map(d => d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"filteredPoints = dataPoints.filter(d => d.dtg <= time)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1503,"value":"layerPoints = {\n \n const features = [];\n \n filteredPoints.forEach( d=> {\n const feature = {\n \"type\":\"Feature\",\n \"geometry\":{\"type\":\"Point\",\"coordinates\": [d.lat, d.lng]},\n \"properties\": d\n }\n features.push(feature);\n })\n return features;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1775,"value":"UCEs = FileAttachment(\"UCs@2.geojson\").json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"{\n chart.plotPoints(filteredPoints);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"