PONTIFÍCIA UNIVERSIDADE CATÓLICA DO RIO GRANDE DO SUL 
FACULDADE DE INFORMÁTICA - FACIN 
AccidentMap Poa 
Cleverson Lopes ...
Roteiro 
● Motivação 
● Objetivos 
● OpenLayers 
● Dados 
● Construção 
● Dificuldades 
● Demonstração 
● Conclusão
Introdução 
● Visualização geográfica dos acidentes de 
Porto Alegre. 
○ 2000 - 2013 
○ Sem agrupamentos 
○ Diferentes mar...
Motivação 
O acidente de trânsito é uma ocorrência que afeta 
diretamente o cidadão. (ferimentos, mortes, 
psicologicament...
Objetivos 
● Criar uma visualização sobre os acidentes 
de trânsito em Porto Alegre. 
● Demonstrar os locais dos acidentes...
OpenLayers 
“OpenLayers is a pure JavaScript library for displaying map data in most 
modern web browsers, with no server-...
OpenLayers - Criando Mapa
OpenLayers - Adicionando Marcadores
Dados 
● Utilizados os dados do DataPoa sobre Acidentes de 
trânsito em Porto Alegre. 
● 13 arquivos no formato CSV dividi...
Dados 
Os arquivos possuem informações de: 
● Data; 
● Local; 
● Tipos e quantidades de veículos; 
● Tempo; 
● Período do ...
Dados 
● Cada arquivo possui aprox. 
entre 15.000 e 22.000 
linhas. 
● De 35 - 42 colunas
Construção 
● OpenLayers 
○ Criação do mapa e marcações. 
● PHP, CSS, JavaScript e HTML 
○ Extração dos dados, preparação ...
Arquivos 
CSV Index.php 
Filtragem 
OpenLayers myScript.js
Marcadores 
Dia / Noite 
Tempo 
= 
Mortes / Feridos 18 ícones 
diferentes
Criação do Mapa 
São exibidos os acidentes divididos por mês e 
ano. 
- Por ano fica ilegível (devido ao grande 
número de...
Mapa
Clicando no Marcador
Heatmap (Calendário) 
● Permitir visualizar os meses do ano que 
ocorrem mais acidentes. 
● Ao clicar na cor do mês, carre...
Heatmap (calendário) 
● Feito sem utilização de nenhuma biblioteca. 
● Somente foi utilizado HTML e PHP.
Calendário
Calendário
Controles
Dificuldades 
● Colunas dos arquivos CSV diferentes. 
● Javascript 
● Memória do Host
Acesso 
http://cleversonledur.com.br/trabalhovis/ 
→ Mozilla Firefox
Demonstração da 
Visualização
Conclusão 
Com o desenvolvimento desta visualização foi 
possível verificar os locais onde ocorreram 
acidentes analisando...
Referências 
HAZZARD, Erik. OpenLayers 2.10 Beginner's Guide. Packt Publishing Ltd, 2011. 
PAIXÃO, Wdnei R. Uma Aplicação ...
Referências e trabalhos 
relacionados 
HAZZARD, Erik. OpenLayers 2.10 Beginner's Guide. Packt Publishing Ltd, 2011. 
PAIXÃ...
AccidentMap Poa - DataPoa
Próximos SlideShares
Carregando em…5
×

AccidentMap Poa - DataPoa

222 visualizações

Publicada em

Geo Visualization of DataPoa data about Porto Alegre accidents.

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
222
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

AccidentMap Poa - DataPoa

  1. 1. PONTIFÍCIA UNIVERSIDADE CATÓLICA DO RIO GRANDE DO SUL FACULDADE DE INFORMÁTICA - FACIN AccidentMap Poa Cleverson Lopes Ledur Tópicos Especiais em Visualização I
  2. 2. Roteiro ● Motivação ● Objetivos ● OpenLayers ● Dados ● Construção ● Dificuldades ● Demonstração ● Conclusão
  3. 3. Introdução ● Visualização geográfica dos acidentes de Porto Alegre. ○ 2000 - 2013 ○ Sem agrupamentos ○ Diferentes marcadores para cada tipo de acidente. ● Heatmap (calendário) ○ Dividido por meses e anos
  4. 4. Motivação O acidente de trânsito é uma ocorrência que afeta diretamente o cidadão. (ferimentos, mortes, psicologicamente,...) É algo que pode acontecer com qualquer pessoa. A adoção de melhorias de segurança no trânsito são sempre bem-vindas.
  5. 5. Objetivos ● Criar uma visualização sobre os acidentes de trânsito em Porto Alegre. ● Demonstrar os locais dos acidentes em um mapa. ● Demonstrar os meses em que ocorreram mais acidentes. ● Oferecer interatividade na visualização.
  6. 6. OpenLayers “OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a JavaScript API for building rich web-based geographic applications, similar to the Google Maps APIs, with one important difference -- OpenLayers is Free Software, developed for and by the Open Source software community.” (http://openlayers.org/)
  7. 7. OpenLayers - Criando Mapa
  8. 8. OpenLayers - Adicionando Marcadores
  9. 9. Dados ● Utilizados os dados do DataPoa sobre Acidentes de trânsito em Porto Alegre. ● 13 arquivos no formato CSV divididos por ano.
  10. 10. Dados Os arquivos possuem informações de: ● Data; ● Local; ● Tipos e quantidades de veículos; ● Tempo; ● Período do dia (noite/dia); ● Tipo de acidente; ● Número de mortos/feridos;
  11. 11. Dados ● Cada arquivo possui aprox. entre 15.000 e 22.000 linhas. ● De 35 - 42 colunas
  12. 12. Construção ● OpenLayers ○ Criação do mapa e marcações. ● PHP, CSS, JavaScript e HTML ○ Extração dos dados, preparação e configurações da página.
  13. 13. Arquivos CSV Index.php Filtragem OpenLayers myScript.js
  14. 14. Marcadores Dia / Noite Tempo = Mortes / Feridos 18 ícones diferentes
  15. 15. Criação do Mapa São exibidos os acidentes divididos por mês e ano. - Por ano fica ilegível (devido ao grande número de marcadores) - Agrupamento não foi possível devido aos diversos ícones.
  16. 16. Mapa
  17. 17. Clicando no Marcador
  18. 18. Heatmap (Calendário) ● Permitir visualizar os meses do ano que ocorrem mais acidentes. ● Ao clicar na cor do mês, carregar os marcadores referentes ao período no mapa.
  19. 19. Heatmap (calendário) ● Feito sem utilização de nenhuma biblioteca. ● Somente foi utilizado HTML e PHP.
  20. 20. Calendário
  21. 21. Calendário
  22. 22. Controles
  23. 23. Dificuldades ● Colunas dos arquivos CSV diferentes. ● Javascript ● Memória do Host
  24. 24. Acesso http://cleversonledur.com.br/trabalhovis/ → Mozilla Firefox
  25. 25. Demonstração da Visualização
  26. 26. Conclusão Com o desenvolvimento desta visualização foi possível verificar os locais onde ocorreram acidentes analisando os dados históricos e também verificar os períodos do ano onde existe um número maior de acidentes na cidade de Porto Alegre.
  27. 27. Referências HAZZARD, Erik. OpenLayers 2.10 Beginner's Guide. Packt Publishing Ltd, 2011. PAIXÃO, Wdnei R. Uma Aplicação baseada em SIG para Análise de Acidentes de Trânsito: Estudo de caso na Rodovia BR-101/ES. IFES–Campus Serra, 2011. SANTOS, L. (2006) Análise dos acidentes de trânsito do Município de São Carlos utilizando Sistema de Informação Geográfica – SIG e ferramentas de estatística espacial. Dissertação de Mestrado em Eng. Urbana, UFSCar. W3C Schools (2014). JavaScript Tutorial. http://www.w3schools.com/js/DEFAULT.asp, Maio. W3C Schools (2014). PHP Tutorial. http://www.w3schools.com/PHP/DEFAULT.asp, Maio. W3C (2014). Guia de Referência CSS 2.1. http://www.w3c.br/divulgacao/guiasreferencia/css2/ , Maio.
  28. 28. Referências e trabalhos relacionados HAZZARD, Erik. OpenLayers 2.10 Beginner's Guide. Packt Publishing Ltd, 2011. PAIXÃO, Wdnei R. Uma Aplicação baseada em SIG para Análise de Acidentes de Trânsito: Estudo de caso na Rodovia BR-101/ES. IFES–Campus Serra, 2011. SANTOS, L. (2006) Análise dos acidentes de trânsito do Município de São Carlos utilizando Sistema de Informação Geográfica – SIG e ferramentas de estatística espacial. Dissertação de Mestrado em Eng. Urbana, UFSCar. QGis: QGIS is a user friendly Open Source Geographic Information System (GIS) licensed under the GNU General Public License. QGIS is an official project of the Open Source Geospatial Foundation (OSGeo). It runs on Linux, Unix, Mac OSX, Windows and Android and supports numerous vector, raster, and database formats and functionalities. W3C Schools (2014). JavaScript Tutorial. http://www.w3schools.com/js/DEFAULT.asp, Maio. W3C Schools (2014). PHP Tutorial. http://www.w3schools.com/PHP/DEFAULT.asp, Maio. W3C (2014). Guia de Referência CSS 2.1. http://www.w3c.br/divulgacao/guiasreferencia/css2/ , Maio.

×