2a:null 2b:["$","title",null,{"children":"Mapa de Queimadas do Brasil | André Ricardo | Observable"}] 30:T7fd,chart = { // Define map size on screen var height = 600; var year = 1998; var formatTime = d3.timeFormat("%m/%Y"); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var g = svg.append("g"); // Align center of Brazil to center of map var projection = d3_geo.geoMercator() .scale(650) .center([-52, -15]) .translate([width / 2, height / 2]); var path = d3.geoPath(projection); var estados = g.selectAll(".estado") .data(states.features) .enter() .append("path") .attr("class", "state") .attr("d", path) .attr("fill", d => color(queimadas[d.id][year])); var linha = g.append("path") .datum(states_contour) .attr("d", path) .attr("class", "state_contour") .attr("fill", "none") .attr("stroke", "black"); //Slider var slider = simple_slider .sliderHorizontal() .min(1998) .max(2020) .step(1) .width(500) .displayValue(true) //.tickValues([1,276]) //.tickFormat(v => formatTime(new Date(1998,v-1,1))) //.displayFormat(v => formatTime(new Date(1998,v-1,1))) .on('onchange', (val) => { year = val; estados.remove(); linha.remove(); estados = g.selectAll(".estado") .data(states.features) .enter() .append("path") .attr("class", "state") .attr("d", path) .attr("fill", d => color(queimadas[d.id][year])); linha = g.append("path") .datum(states_contour) .attr("d", path) .attr("class", "state_contour") .attr("fill", "none") .attr("stroke", "black"); }); svg.append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', 'translate(230,550)') .call(slider); // Legend var leg = legend({marginLeft: (width-320)/2, width: (width+320)/2,color}); svg.node().appendChild(leg); return svg.node(); }31:T59e,chart2 = { const tool = new Tooltip(); const tool2 = new Tooltip(); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, 600]); var line = d3.line() .defined(d => !isNaN(d.focos)) .x(d => lineX(d.date)) .y(d => lineY(d.focos)) var line2 = d3.line() .defined(d => !isNaN(d.focos)) .x(d => lineX(d.date)) .y(d => lineY(d.media)) svg.append("path") .datum(media) .attr("fill", "none") .attr("stroke", 'blue') .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); // Média svg.append("path") .datum(media) .attr("fill", "none") .attr("stroke", 'red') .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line2); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(media)) .join("rect") .attr("x", ([a, b]) => lineX(a.date)) .attr("height", height) .attr("width", ([a, b]) => lineX(b.date) - lineX(a.date)) .on("mouseover", (event, [a]) => {tool.show(a, 'focos'); tool2.show(a, 'media')}) .on("mouseout", () => {tool.hide(); tool2.hide()}); svg.append(() => tool.node); svg.append(() => tool2.node); return svg.node(); }32:[] 2e:{"id":"2a4d0a6d2be031bf","slug":"brazil-fire-map","title":"Mapa de Queimadas do Brasil","thumbnail":"f798710b07375df09915df3eaec73cd802a8d9a1deca02e0ca9834e6444d11b3","access_level":"public","create_time":"$D2020-09-27T15:18:18.580Z","update_time":"$D2020-10-04T14:46:13.467Z","view_time":null,"first_public_time":"$D2020-09-27T16:22:35.000Z","has_unpublished_edits":null,"fork":{"id":"5f9864b9218b81d3","slug":"brazil-map","title":"Brazil Map","owner":{"id":"3e973dfcefa5d8c5","login":"arbezerra","name":"André Ricardo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3e973dfcefa5d8c5","login":"arbezerra","name":"André Ricardo","avatar_url":"https://avatars-next.observableusercontent.com/6ea063f347b80806df31ab74c521f3be55145b2b8a78cff08a038f3667f4f830","tier":"starter_2024"},"version":832,"publish_version":832,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb18bc0c9bf5d3d7","login":"arbezerra","name":"André Ricardo","avatar_url":"https://avatars-next.observableusercontent.com/6ea063f347b80806df31ab74c521f3be55145b2b8a78cff08a038f3667f4f830","tier":null}],"members":[{"type":"individual","id":"fb18bc0c9bf5d3d7","login":"arbezerra","name":"André Ricardo","avatar_url":"https://avatars-next.observableusercontent.com/6ea063f347b80806df31ab74c521f3be55145b2b8a78cff08a038f3667f4f830","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mapa de Queimadas do Brasil","cells":[{"id":0,"value":"md`# Mapa de Queimadas do Brasil\nMapa de [Ronie Uliana](https://gist.github.com/ruliana/1ccaaab05ea113b0dff3b22be3b4d637)\n\nDados de [Curso de Ciência de Dados na UFCG](https://github.com/cienciadedados-ufcg/vis-queimadas)\n\n

As queimadas são um grande problema quanto a preservação da fauna e flora de nosso país. No decorrer do ano de 2020, tem-se notado um aumento no número de focos de calor em relação ao ano anterior. Este trabalho visa analisar padrões nos dados disponibilizados pelo Instituto Nacional de Pesquisas Espaciais (INPE), quanto ao número e localização dos focos de queimada. Estão registrados dados mensais separados por estados, com localização aproximada, bem como dados agrupados por bioma, sem informações da geolocalização.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"md` # Existe correlação entre a localização e quantidade de queimadas?\n

A visualização abaixo, mostra de forma interativa a quantidade de queimadas anuais de cada estado. Nota-se uma maior quantidade no estado do Mato Grosso onde predomina a vegetação do Cerrado.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"md`# Existe sazonalidade nos dados?\n\n

Temos abaixo, uma visualização da quantidade mensal de queimadas no Brasil. Em azul, está descrito a quantidade total de quemadas no determinado mês e em vermelho temos a média de 5 anos. Podemos perceber que no periodo do verão ocorre um aumento significativo das queimadas.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"md`# View Box`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 60})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"md`# Line chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(lineY))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Queimadas\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(lineX).ticks(width / 40).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"lineY = d3.scaleLinear()\n .domain([0, lineMax]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"lineX = d3.scaleUtc()\n .domain(d3.extent(linhas, d=>d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"lineMax = {\n return d3.max(linhas,d=>d.focos);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"media = {\n var mediaDe = 60;\n \n var a = []\n var soma = 0;\n for(var i=0;i {\n var index = (i.ano-1998)*12+mesToID[i.mes];\n a[index]['focos']+=i.focos;\n });\n \n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`# Heatmap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"color = d3.scaleLinear()\n .domain([1, heatMax])\n .range(['lightgray', 'crimson'])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"heatMax = {\n var m = 0;\n Object.keys(queimadas).forEach((q)=>{\n Object.keys(queimadas[q]).forEach((a)=>{\n m = queimadas[q][a] > m ? queimadas[q][a] : m;\n });\n });\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"queimadas = {\n var q = {};\n \n Object.keys(estadoToID).forEach((k) => {\n q[estadoToID[k]] = {};\n });\n \n dados.forEach((i) => {\n if(q[estadoToID[i.bioma]][i.ano]){\n q[estadoToID[i.bioma]][i.ano]+=i.focos;\n } else {\n q[estadoToID[i.bioma]][i.ano] = i.focos;\n }\n });\n \n return q;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"dados = d3.csv(\"https://raw.githubusercontent.com/cienciadedados-ufcg/vis-queimadas/master/data/ready/estados.csv\", d3.autoType);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"states_contour = topojson.mesh(br, br.objects.estados);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"states = topojson.feature(br, br.objects.estados);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"br = (await d3.json(\"https://gist.githubusercontent.com/ruliana/1ccaaab05ea113b0dff3b22be3b4d637/raw/196c0332d38cb935cfca227d28f7cecfa70b412e/br-states.json\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"md`# Mask`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"mesToID = {\n return {\n 'JANEIRO': 0,\n 'FEVEREIRO': 1,\n 'MARÇO': 2,\n 'ABRIL': 3,\n 'MAIO': 4,\n 'JUNHO': 5,\n 'JULHO': 6,\n 'AGOSTO': 7,\n 'SETEMBRO': 8,\n 'OUTUBRO': 9,\n 'NOVEMBRO': 10,\n 'DEZEMBRO': 11\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"estadoToID = {\n return {\n \"Pará\": \"PA\",\n \"Rio Grande do Norte\": \"RN\",\n \"Amazonas\": \"AM\",\n \"Bahia\": \"BA\",\n \"Mato Grosso do Sul\": \"MS\",\n \"Goiás\": \"GO\",\n \"Alagoas\": \"AL\",\n \"Espírito Santo\": \"ES\",\n \"Mato Grosso\": \"MT\",\n \"Rio de Janeiro\": \"RJ\",\n \"Distrito Federal\": \"DF\",\n \"Paraná\": \"PR\",\n \"Roraima\": \"RR\",\n \"Santa Catarina\": \"SC\",\n \"Piauí\": \"PI\",\n \"Rio Grande do Sul\": \"RS\",\n \"Rondônia\": \"RO\",\n \"Tocantins\": \"TO\",\n \"Acre\": \"AC\",\n \"Pernambuco\": \"PE\",\n \"Sergipe\": \"SE\",\n \"Ceará\": \"CE\",\n \"Amapá\": \"AP\",\n \"São Paulo\": \"SP\",\n \"Minas Gerais\": \"MG\",\n \"Paraíba\": \"PB\",\n \"Maranhão\": \"MA\",\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"md`# Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"class Tooltip {\n constructor() {\n this._date = svg``;\n this._close = svg``;\n this.node = svg`\n \n ${this._date}\n ${this._close}\n \n`;\n }\n show(d, attr) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${lineX(d.date)},${lineY(d[attr])})`);\n this._date.textContent = formatDate(d.date);\n this._close.textContent = d[attr];\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"formatDate = d3.utcFormat(\"%B %Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"simple_slider = require(\"https://unpkg.com/d3-simple-slider\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"d3_geo = require(\"d3-geo\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"