2d:null 2e:["$","title",null,{"children":"Oficina Visualização de Dados | Carlos de Oliveira Junior | Observable"}] 33:T4a2,md`# Levantamento de dados ## Coletar dados Nossa primeira tarefa é tornar os dados da nossa fonte, que agora está em formato de lista, e transportá-los para [nossa planilha](https://docs.google.com/spreadsheets/d/1d9N1wpiHK4tqf0kv1rRDXLgyGJu07FogPbIOzZBj7yc/edit?usp=sharing) do Google Spreadsheets. Vamos coletar o "Nome", "Link" e "Município". ## Refinar os dados Em seguida, vamos buscar outras informações: ### Informações geográficas Vamos converter o município em [Latitude e Longitude](https://pt.wikipedia.org/wiki/Coordenadas_geogr%C3%A1ficas). Para isso vamos pegar o nome do múnicipio e buscá-lo no [Google Maps](https://maps.google.com), ao clicar com o botão direito no local encontrado, selecione "O que há aqui.".

. Você irá encontrar a Latitude e Longitude:

### Tipo de dado Vamos classificar os dados em "evento", "projetoNacional", "projetoInternacional" ou "instituicao". ` 34:T684,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([-14.235004,-51.92528], 4);//Brazillllllll let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', { attribution: 'Wikimedia maps beta | © OpenStreetMap contributors' }).addTo(map); //wait for L.ExtraMarkers or L.markerClusterGroup load... 😠 while(!L.ExtraMarkers || !L.markerClusterGroup){ await new Promise(resolve => setTimeout(resolve, 100)) } let icons = { evento: L.ExtraMarkers.icon({ icon: 'fa-calendar', markerColor: 'yellow', shape: 'square', prefix: 'fa' }), projetoNacional: L.ExtraMarkers.icon({ icon: 'fa-users', markerColor: 'blue', shape: 'square', prefix: 'fa' }), projetoInternacional: L.ExtraMarkers.icon({ icon: 'fa-users', markerColor: 'red', shape: 'square', prefix: 'fa' }), instituicao: L.ExtraMarkers.icon({ icon: 'fa-building', markerColor: 'green', shape: 'square', prefix: 'fa' }) }; var markers = L.markerClusterGroup(); data.map((d, index) => { //d = ["Nome", "Link", "Município", "Latitude", "Longitude", "Tipo"] if(index == 0) return;//ignore header let marker = L.marker([d[3],d[4]], {icon: icons[d[5]]}); let description = "" + d[0] +"
" + d[1] + "
" + d[2]; marker.bindPopup(description); markers.addLayer(marker); }); map.addLayer(markers); }35:[] 31:{"id":"82ee843ab33f2372","slug":"oficina-visualizacao-de-dados","title":"Oficina Visualização de Dados","thumbnail":"4f1cbf98d9f98f49a8dadf1037a19a25b14d69550764a63d8d090aa029feeebb","access_level":"public","create_time":"$D2019-10-06T00:37:26.645Z","update_time":"$D2022-09-20T20:12:20.867Z","view_time":null,"first_public_time":"$D2019-10-06T01:11:14.541Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7a7bb070c482138b","login":"vamoss","name":"Carlos de Oliveira Junior","avatar_url":"https://avatars-next.observableusercontent.com/94f23b53d15914777665f3dd2fd78f4cf6869369798d3c2ac08ebfd66825f20f","tier":"starter_2024"},"version":372,"publish_version":372,"role":null,"authored":false,"authors":[{"type":"individual","id":"6c74e7e4992cbdef","login":"vamoss","name":"Carlos de Oliveira Junior","avatar_url":"https://avatars-next.observableusercontent.com/94f23b53d15914777665f3dd2fd78f4cf6869369798d3c2ac08ebfd66825f20f","tier":null}],"members":[{"type":"individual","id":"6c74e7e4992cbdef","login":"vamoss","name":"Carlos de Oliveira Junior","avatar_url":"https://avatars-next.observableusercontent.com/94f23b53d15914777665f3dd2fd78f4cf6869369798d3c2ac08ebfd66825f20f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Oficina Visualização de Dados","cells":[{"id":41,"value":"md`# Oficina Visualização de Dados\nEste material foi elaborado para a oficina de introdução ao tema Visualização de Dados.\n\nRealizado por Alexandre Magno da Rocha Vianna, Carlos de Oliveira Junior, Eduardo José de Carvalho Neto e Manoela Maia Soares.\n\nA oficina terá duração de 1 hora e será realizada no dia 19/10/2019 na ESPM-Rio para os alunos do programa de mestrado em Economia Criativa.\n\n## Objetivo\nRefletir sobre o processo de transformação de dados em visualizações.\n\n## Como?\nAtravés de um esforço colaborativo de levantamento de dados, iremos criar uma visualização destes dados.\n\n## Por que?\nRelatamos a jornada do problema de pesquisa no artigo [Cartografia Grupos de Reflexão](https://observablehq.com/@vamoss/work-in-progress), onde contextualizamos a necessidade de trabalhar com estes dados.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# Visualização de Dados\nComo o nome sugere, a Visualização de dados busca representar os dados de forma visual, com propósito de atribuição de sentido.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`# Data vs Capta\nPara Johanna Drucker, de seu artigo [Humanities Approaches to Graphical Display](http://www.digitalhumanities.org/dhq/vol/5/1/000091/000091.html):\n> Capta são \"coletados\" ativamente enquanto dados assume-se que são \"fornecidos\", abilitando-se para ser gravado e observado. Para este distinção, um mundo diferente emerge.\n\nNo livro [Graphesis: Visual knowledge production and representation](https://www.hup.harvard.edu/catalog.php?isbn=9780674724938) da mesma autora:\n> Dados são considerados \"informações\" objetivas, enquanto capta é uma informação capturada porque ela conforma para as regras e hipóteses de um experimento.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`# Dados humanizados\nDe Giorgia Lupi, [Data Humanism, The Revolution will be Visualized](http://giorgialupi.com/data-humanism-my-manifesto-for-a-new-data-wold):\n\n> **O Big Data não pertence a um futuro distópico distante; é uma mercadoria e uma característica intrínseca e icônica de nosso presente** - como dólares, concreto, automóveis e Helvética. **As maneiras como nos relacionamos com os dados estão evoluindo mais rapidamente do que imaginamos, e nossas mentes e corpos estão se adaptando naturalmente a essa nova realidade híbrida, construída com estruturas físicas e informacionais.** E design visual - com seu poder de alcançar instantaneamente lugares em nosso subconsciente sem a mediação da linguagem e com sua capacidade inerente de transmitir grandes quantidades de informações estruturadas e não estruturadas entre culturas - será ainda mais central para essa revolução silenciosa, mas inevitável.\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`# Questões técnicas\nExistem inúmeras ferramentas para trabalhar com dados e gerar visualização de dados.\nNeste artigo, vamos utilizar o recurso do site [Observable](https://observablehq.com), mesclando o código utilizado para realizar o tratamento de dados e gerar as visualizações.\nEstamos utilizando a linguagem JavaScript por ser compatível com a Web, e a biblioteca [LeafletJS](https://leafletjs.com/index.html), que possui um conjunto de recursos que otimizam a visualização dos dados em mapas.\n## Se você quiser mergulhar\n### Observable\nPara melhor entender o Observable, recomenda-se acessar a [introdução de utilização da ferramenta](https://observablehq.com/@observablehq/five-minute-introduction).\n### Dados no Observable\nPara melhor entender como os dados são tratados no Observable, recomenda-se acessar [introdução a dados](https://observablehq.com/@observablehq/introduction-to-data).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`# Fonte de dados\nNós utilizaremos como consulta primária [129 projetos, iniciativas e pessoas que trabalham com a transformação dos homens, no Brasil e no mundo](https://papodehomem.com.br/transformacao-homens-masculinidades-projetos-iniciativas-pessoas/).\n\n## Que leituras podemos fazer destes dados?\nPoderíamos analisar a frequência de eventos, os tipos de eventos, os nomes, a data de criação, a quantidade de participantes, a regularidade de eventos... por aí vai.\n\nPor hora vamos georreferenciar(tornar geográfico) estes dados. Nosso objetivo é conectar as pessoas, e a primeira pergunta a ser respondida é:\n> Que eventos tem perto de mim?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`# Resultado\nNossa planilha é importada automaticamente pelo comando da linha abaixo:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"data = loadCsvToArray('https://docs.google.com/spreadsheets/d/1d9N1wpiHK4tqf0kv1rRDXLgyGJu07FogPbIOzZBj7yc/gviz/tq?tqx=out:csv');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`Nossa cartografia :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"markercluster = L, require(\"leaflet.markercluster@1.4.1\").catch(() => L.markerClusterGroup);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"extramarkers = L, require(\"leaflet-extra-markers@1.1.0\").catch(() => L.ExtraMarkers);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"loadCsvToArray = url => {\n //load csv url and convert to array\n return fetch(url).then(response => {\n return response.text().then(csv => {\n let rows = csv.split(\"\\n\");\n return rows.map(row => {\n return row.split(\",\").map(item => {\n //transform string from \"Text\" to Text by removing the first and last quote character\n return item.substring(1, item.length-1); \n });\n });\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"