2d:null 2e:["$","title",null,{"children":"Mapa do Brasil - Querido Diário | Adolfo Guimarães | Observable"}] 33:T43a,# Mapa do Brasil - Querido Diário Esse notebook tem uma proposta de mapeamento do status das informações do Brasil na plataforma **Querido Diário** (https://queridodiario.ok.org.br/). Os gráficos foram criados a partir de uma discussão de como visualizar as informações do Querido Diário em um Mapa. Construi usando D3.js na plataforma do `ObservableHQ` porque acredito que facilita a incorporação do que foi criado aqui em outros sites. A seguir segue as visualizações criadas e informações sobre os dados. Ao final do notebook faço um relato de como isso pode ser incorporado a partir dos `ObservableHQ`. Faço também algumas observações sobre o que criei caso desejem incorporar o código D3.js diretamente. Este notebook possui as seguintes seções: * [Mapa do Brasil](#titulo_mapabrasil) * [Mapa por Estado](#titulo_mapaestado) * [Arquivos dos Mapas](#titulo_arquivosmapas) * [Informações do Querido Diário](#titulo_arquivosqd) * [Mapeamento das Cores](#titulo_mapeamentocores) * [Informações para incorporar este código](#titulo_infoincorporar) 34:Tdff,chart = { const width=700, height=700; const svg = d3.select(DOM.svg(width, height)) .attr("style", "background-color: #FFFFFF;") // Use Mercator projection var projection = d3.geoMercator() // Powerfull stuff! I didnt know where exactly my dataset was located projection-wise, // but .fitExtent() allows you to fit your dataset within a specified canvas .fitExtent([[0, 60], [width, height]], br_map); var path = d3.geoPath() .projection(projection); // Draw each province as a path svg.append('g').selectAll('path') .data(br_map.features) .enter().append('path') .attr('d', path) // Styling .attr('id', d => d.properties.CD_MUN) .attr('fill', d => map_colors[data_qd[d.properties.CD_MUN] ? data_qd[d.properties.CD_MUN].level : 0].color) .attr('stroke', '#FFFFFF') .attr('stroke-width', '0px') .attr('opacity', 1) .attr('cursor', 'pointer') .on("mouseover", function() { d3.select(this).attr("fill", '#bc80bd').attr("stroke", "#FFFFFF").raise(); d3.select('#text_').text(data_qd[d3.select(this).attr('id')] ? data_qd[d3.select(this).attr('id')].territory_name + " (" + data_qd[d3.select(this).attr('id')].state_code + ")" : 'Sem informação'); d3.select('#subtext_').text(data_qd[d3.select(this).attr('id')] ? map_colors[data_qd[d3.select(this).attr('id')].level].description : 'Sem informação'); }) .on("mouseout", function() { d3.select(this).attr("fill", d => map_colors[data_qd[d.properties.CD_MUN] ? data_qd[d.properties.CD_MUN].level : 0].color).attr("stroke", "#FFFFFF").lower(); d3.select('#text_').text(""); d3.select('#subtext_').text(""); }) svg.append('g').selectAll('path') .data(states_map.features) .enter().append('path') .attr('d', path) // Styling .attr('fill', 'none') .attr('stroke', '#C0C0C0') .attr('stroke-width', '1px') .attr('opacity', 1) svg.append("g") .selectAll("rect") .data(Object.values(map_colors)) .join("rect") .attr("x", (d, i) => 500) .attr("y", (d, i) => 600 + i * 20) .attr("width", 10) .attr("height", 10) .attr("fill", d => d.color) svg.append("g") .selectAll("text") .data(Object.values(map_colors)) .join("text") .attr("x", (d, i) => 515) .attr("y", (d, i) => 610 + i * 20) .attr('fill', '#121212') .style('font-size', '0.7em') .style('font-family', "'Assistant', sans-serif") .text(d => d.description) svg.append('g').append("text") .text("") .attr('id', 'text_') .attr('fill', '#bc80bd') .attr('x', 450) .attr('y', 550) .style('font-size', '1.0em') .style('font-weight', 'bold') .style('font-family', "'Assistant', sans-serif") svg.append('g').append("text") .text("") .attr('id', 'subtext_') .attr('fill', '#121212') .attr('x', 450) .attr('y', 565) .style('font-size', '0.8em') .style('font-family', "'Assistant', sans-serif") svg.append('g').append("text") .text("Mapeamento do Querido Diário - Brasil") .attr('fill', '#121212') .attr('x', 10) .attr('y', 30) .style('font-size', '1.3em') .style('font-weight', 'bold') .style('font-family', "'Assistant', sans-serif") svg.append('g').append("text") .text("Passe o mouse nos municípios para outras informações") .attr('fill', '#808080') .attr('x', 10) .attr('y', 50) .style('font-size', '0.7em') .style('font-family', "'Assistant', sans-serif") return svg.node() } 35:Td6c,chart_state = { const width=700, height=700; const svg = d3.select(DOM.svg(width, height)) .attr("style", "background-color: #FFFFFF;") // Use Mercator projection var projection = d3.geoMercator() // Powerfull stuff! I didnt know where exactly my dataset was located projection-wise, // but .fitExtent() allows you to fit your dataset within a specified canvas .fitExtent([[0, 80], [width, height]], {type: "FeatureCollection", features: br_map_filter}); var path = d3.geoPath() .projection(projection); console.log(); // Draw each province as a path svg.append('g').selectAll('path') .data(br_map_filter) .enter().append('path') .attr('d', path) // Styling .attr('id', d => d.properties.CD_MUN) .attr('fill', d => map_colors[data_qd[d.properties.CD_MUN] ? data_qd[d.properties.CD_MUN].level : 0].color) .attr('stroke', '#FFFFFF') .attr('stroke-width', '0px') .attr('opacity', 1) .attr('cursor', 'pointer') .on("mouseover", function() { d3.select(this).attr("fill", '#bc80bd').attr("stroke", "#FFFFFF").raise(); d3.select('#textfilter_').text(data_qd[d3.select(this).attr('id')] ? data_qd[d3.select(this).attr('id')].territory_name + " (" + data_qd[d3.select(this).attr('id')].state_code + ")" : 'Sem informação'); d3.select('#subtextfilter_').text(data_qd[d3.select(this).attr('id')] ? map_colors[data_qd[d3.select(this).attr('id')].level].description : 'Sem informação'); }) .on("mouseout", function() { d3.select(this).attr("fill", d => map_colors[data_qd[d.properties.CD_MUN] ? data_qd[d.properties.CD_MUN].level : 0].color).attr("stroke", "#FFFFFF").lower(); d3.select('#textfilter_').text(""); d3.select('#subtextfilter_').text(""); }) svg.append('g').selectAll('path') .data(br_state_filter) .enter().append('path') .attr('d', path) // Styling .attr('fill', 'none') .attr('stroke', '#C0C0C0') .attr('stroke-width', '1px') .attr('opacity', 1) svg.append("g") .selectAll("rect") .data(Object.values(map_colors)) .join("rect") .attr("x", (d, i) => 10 + i * 100) .attr("y", (d, i) => 40) .attr("width", 10) .attr("height", 10) .attr("fill", d => d.color) svg.append("g") .selectAll("text") .data(Object.values(map_colors)) .join("text") .attr("x", (d, i) => 25 + i * 100) .attr("y", (d, i) => 50) .attr('fill', '#121212') .style('font-size', '0.7em') .style('font-family', "'Assistant', sans-serif") .text(d => d.description) svg.append('g').append("text") .text("") .attr('id', 'textfilter_') .attr('fill', '#bc80bd') .attr('x', 10) .attr('y', 680) .style('font-size', '1.0em') .style('font-weight', 'bold') .style('font-family', "'Assistant', sans-serif") svg.append('g').append("text") .text("") .attr('id', 'subtextfilter_') .attr('fill', '#121212') .attr('x', 10) .attr('y', 695) .style('font-size', '0.8em') .style('font-family', "'Assistant', sans-serif") svg.append('g').append("text") .text("Mapeamento do Querido Diário - " + select) .attr('fill', '#121212') .attr('x', 10) .attr('y', 30) .style('font-size', '1.3em') .style('font-weight', 'bold') .style('font-family', "'Assistant', sans-serif") return svg.node() } 36:T1589,Uma vez que o notebook é criado, ele permite que as células sejam incorporadas em qualquer página HTML. Para isso, basta clicar nos três pontinhos de uma célula e escolher a opção `embed`. Caso essa opção esteja inativa é porque aquela célular não pode ser incorporada. Note que a maioria das células é uma variável. Só células que retornam uma variável podem ser incorporadas. Basta selecionar as células que deseja incorporar. Nos exemplos citados marquei apenas as células do inputs e das visualizações. As células que carregam dados, imports não precisa. Caso tenha alguma célula com estilos CSS, essas precisam ser incorporadas para que o estilo seja aplicado. Isso nã acontece nesse exemplo porque o estilo está direto no D3.js. O `ObservableHQ` permite incorporar de 3 formas: (1) usando iFrame, (2) usando Javascript e (3) usando React. A seguir eu detalho um pouco mais isso. ### **1 - Usando iframe:** Seleciono quais células quero que sejam incorporadas e ele gera o código para incorporar na página HTML. **Código Gerado** ```html ``` No link a seguir, criei um exemplo incorporando na página HTML: https://jsfiddle.net/adolfoguimaraes/dwxv7zf5/ ### **2 - Usando JavaScript** Outra forma é incorporara utilizando código javascript. Basicamente ele cria um script com as importações e na página basta criar os divs correspondentes. Desta forma é possível personalizar as divs de acordo com o site, diferente do iFrame que não temos opção de personalização. **HTML** ```html

``` **Javascript** ```javascript import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js"; import define from "https://api.observablehq.com/@adolfoguimaraes/br-queridodiario-mapa.js?v=3"; new Runtime().module(define, name => { if (name === "viewof search") return new Inspector(document.querySelector("#observablehq-viewof-search-48090f8d")); if (name === "viewof table") return new Inspector(document.querySelector("#observablehq-viewof-table-48090f8d")); if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-48090f8d")); if (name === "viewof select") return new Inspector(document.querySelector("#observablehq-viewof-select-48090f8d")); if (name === "chart_state") return new Inspector(document.querySelector("#observablehq-chart_state-48090f8d")); return ["br_map_filter","br_state_filter"].includes(name); }); ``` Também criei um exemplo mostrando como posso incorporar: https://jsfiddle.net/adolfoguimaraes/Lawrt5en/ ### **3 - Usando React** Uma terceira forma de incorporar é a partir do uso do React. A partir da instalação de uns pacotes próprios do Observable é possível importar os componentes direto no site. Ainda não testei esse tipo de incorporação. ### Usando o código produzido Caso não incorpore direto do notebook e deseja colocar os código D3.js direto nas páginas é necessário entender o que cada parte deste notebook faz para saber como levar esse código para lá. A seguir explico um pouco mais cada ponto do notebook. Os `inputs de busca` e `tabelas` são componentes próprios do ObservableHQ. Caso fosse usar esse código em uma outra página sem utilizar os mecanismos de incorporação do ObservableHQ, essas funcionalidades teriam que ser implementadas. Já o mapa é código D3.js puro. As interações são feitas a partir do `mouseover` e `mouseout` que modifica o conteúdo dos textos a partir de qual polígono o mouse está. O mapa também acessa alguns objetos criados como mapeamento de cores e de informações dos municípios. O mapeamento de cores está no objeto `map_color` e as informações dos municípios vem do objeto `data_qd` que carrega os dados do Querido Diário a partir de um JSON. Os mapas foram carregados a partir dos arquivos: * **BR_Municipios_2020_small.json**: Polígonos de todos os municípios do Brasil. * **BR_UF_2020.json**: Polígonos dos estados. Ele é utilizado para criar os contornos dos estados em um mapa de municípios. Esses arquivos foram gerados por mim a partir dos dados que são disponibilizados no site do IBGE. Os detalhes deste processo estão explicados no repositório: https://github.com/adolfoguimaraes/mapas_dataset. Para este projeto, basta que os arquivos sejam carregados e passados para o D3.js. As informações do Querido Diário foram coletadas a partir da API e salvos em um arquivo json: **br.json**. Esse arquivo tem informações dos municípios e o nível que cada município está na plataforma. Da forma que está, a atualização das informações no mapa fica dependente deste arquivo. Isso pode ser resolvido hospedando esse arquivo em algum lugar que permitisse atualiza-lo sempre que plataforma fosse atualizada ou usando o JavaScript para fazer `request` na API. No entanto, a API só permite pegar cidade por cidade, o que implicaria em custo. Acredito que as informações são atualizadas de tempos em tempos. Creio que o arquivo seria mais viável no momento. 37:[{"id":"729f8c9708f01f258280a650871dbb87c3bbf58955f2cbbf58f047aa1b638e544a6d45024a35ccee4fa390c6aebfa7b644fafe5a9bc69144e10280e81245804d","href":"https://static.observableusercontent.com/files/729f8c9708f01f258280a650871dbb87c3bbf58955f2cbbf58f047aa1b638e544a6d45024a35ccee4fa390c6aebfa7b644fafe5a9bc69144e10280e81245804d","name":"BR_Municipios_2020_small@1.json","type":"application/json","lastModified":1638556870869.428,"size":24964849},{"id":"f4c170381040daeb0ed91d66c999d7a59ccceec28d3c46206c718a7f1ec9195030118a38cca012004bcf66c1f9dad51bdb2d5b58e93bba67b27e8babd3ec4cbb","href":"https://static.observableusercontent.com/files/f4c170381040daeb0ed91d66c999d7a59ccceec28d3c46206c718a7f1ec9195030118a38cca012004bcf66c1f9dad51bdb2d5b58e93bba67b27e8babd3ec4cbb","name":"BR_UF_2020_small.json","type":"application/json","lastModified":1638590830635.444,"size":1885522},{"id":"d4b6b379348bf478d57475d907458b5345a03f9289a1928b6bf6fcb0493d90ed9bd0423c4155888a64677e79baebbbd3a8cd26b82bd8550e1331ec092eebe337","href":"https://static.observableusercontent.com/files/d4b6b379348bf478d57475d907458b5345a03f9289a1928b6bf6fcb0493d90ed9bd0423c4155888a64677e79baebbbd3a8cd26b82bd8550e1331ec092eebe337","name":"br@21.json","type":"application/json","lastModified":1638898461265.905,"size":668915}] 31:{"id":"d436cacf7af6f500","slug":"br-queridodiario-mapa","title":"Mapa do Brasil - Querido Diário","thumbnail":"2c126a9da140fc0f58b917ccf2a27beea0b4c637a528b1b9ed7ff32047dbb772","access_level":"public","create_time":"$D2021-12-03T18:28:44.324Z","update_time":"$D2021-12-16T20:05:41.230Z","view_time":null,"first_public_time":"$D2021-12-03T19:31:02.576Z","has_unpublished_edits":null,"fork":{"id":"39b8eb6f4102c0d2","slug":"br-se-queridodiario-mapa","title":"Mapa de Sergipe - Querido Diário","owner":{"id":"0fed76bc24ee2abb","login":"adolfoguimaraes","name":"Adolfo Guimarães"}},"stars":2,"starred":false,"owner":{"type":"team","id":"0fed76bc24ee2abb","login":"adolfoguimaraes","name":"Adolfo Guimarães","avatar_url":"https://avatars-next.observableusercontent.com/88672ad9fd16fb1365fed00041d8fc8d950122ea98716a8993e614c5c88bc2de","tier":"starter_2024"},"version":727,"publish_version":727,"role":null,"authored":false,"authors":[{"type":"individual","id":"f25e789ad38b28fb","login":"adolfoguimaraes","name":"Adolfo Guimarães","avatar_url":"https://avatars-next.observableusercontent.com/88672ad9fd16fb1365fed00041d8fc8d950122ea98716a8993e614c5c88bc2de","tier":null}],"members":[{"type":"individual","id":"f25e789ad38b28fb","login":"adolfoguimaraes","name":"Adolfo Guimarães","avatar_url":"https://avatars-next.observableusercontent.com/88672ad9fd16fb1365fed00041d8fc8d950122ea98716a8993e614c5c88bc2de","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Mapa do Brasil - Querido Diário","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"titulo_mapabrasil = md`## Mapa do Brasil`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"viewof search = Inputs.search(\n all_cities, \n {\n placeholder: \"Digite o nome de um município\", \n columns: ['name'], \n locale: 'pt-BR',\n format: x => \"\",\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"viewof table = Inputs.table(\n search.length === all_cities.length ? [] : search, \n {\n columns: ['name','state', 'id'], \n header: {name: 'Nome do Município', state: 'Estado', id: 'Nível'},\n format: {\n id: x => { const level = data_qd[x].level; return level + \" - \" + map_colors[level].description }\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"viewof select = Inputs.select(states_arr, {label: \"Escolha um estado\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"titulo_mapaestado = md`## Mapa por Estado`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"titulo_arquivosmapas = md`## Arquivos dos Mapas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"\n\nO arquivo utilizado para gerar o mapa está disponível em: https://github.com/adolfoguimaraes/mapas_dataset \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"br_map = FileAttachment(\"BR_Municipios_2020_small@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"states_map = FileAttachment(\"BR_UF_2020_small.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"states_arr = states_map.features.map((x) => x.properties.SIGLA_UF).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"br_map_filter = br_map.features.filter( x => x.properties.SIGLA_UF == select)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"br_state_filter = states_map.features.filter(x => x.properties.SIGLA_UF == select)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"titulo_arquivosqd = md`## Informações do Querido Diário`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"Informações de cada município extraídas através da API do Querido Diário. Coletei a parte essa informação para não ficar fazendo `request` direto na API.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"data_qd = FileAttachment(\"br@21.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"Lista de todos os municípios. Estou trazendo do arquivo `territories.csv` do GitHub do Querido Diário. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"all_cities = d3.csv(\"https://raw.githubusercontent.com/okfn-brasil/querido-diario/main/data_collection/gazette/resources/territories.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"titulo_mapeamentocores = md`## Mapeamento das Cores`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"As cores foram testadas em relação a serem distinguidas por pessoas com alguma deficiência visual. O teste está [neste link](https://projects.susielu.com/viz-palette?colors=[%22#267800%22,%22#449ddb%22,%22#fdb462%22]&backgroundColor=%22#F0F0F0%22&fontColor=%22#000000%22&mode=%22normal%22) do site Viz Pallete. Foram utilizadas as cores \"#267800\",\"#449ddb\" e \"#fdb462\" (para representar os níveis 1, 2 e 3). O nível zero está com a cor `#F0F0F0`. No teste coloquei como background.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"map_colors = Object({\n 0: {description: 'Não mapeado', color: \"#F0F0F0\"},\n 1: {description: 'Mapeado', color: \"#449ddb\"},\n 2: {description: 'Com raspador', color: \"#267800\"},\n 3: {description: 'Integrado à plataforma do QD', color: \"#fdb462\"}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"titulo_infoincorporar = md`## Informações para incorporar esse código`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"not_use = { /* Marcação do mapa - não implementado.\nviewof search_ids = Inputs.button(\"Localizar no mapa\", {value: [], reduce: () => search_ids_function()})\nsearch_ids_function = () => search.length === all_cities.length ? [] : search.map(a => a.id)\n//.attr('fill', d => search_ids.includes(d.properties.CD_MUN) ? '#bc80bd' : map_colors[data_qd[d.properties.CD_MUN] ? data_qd[d.properties.CD_MUN].level : 0].color)\nSet3 = swatches(\"Set3\")\ncolors_ = [\"#8dd3c7\",\"#ffffb3\",\"#bebada\",\"#fb8072\",\"#80b1d3\",\"#fdb462\",\"#b3de69\",\"#fccde5\",\"#d9d9d9\",\"#bc80bd\",\"#ccebc5\",\"#ffed6f\"]\n*/}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"