Skip to content

Instantly share code, notes, and snippets.

@vsvasconcelos

vsvasconcelos/.block

Last active September 2, 2017 16:44
Show Gist options
  • Save vsvasconcelos/a50da4bc91498a34e4fb28cfda35cf13 to your computer and use it in GitHub Desktop.
Save vsvasconcelos/a50da4bc91498a34e4fb28cfda35cf13 to your computer and use it in GitHub Desktop.
Download ZIP
Fixação da População Ocupada RMSP
Raw
.block
license: gpl-3.0
height: 600
scrolling: no
border: no
Raw
README.md

Fixação da População Ocupada (FPO) na Região Metropolitana de São Paulo Segundo a Pesquisa O/D-2007

Autor: Vagner Sanches Vasconcelos (Setembro/2017)

vsvasconcelos@gmail.com

Resumo:

Na Análise Exploratória dos Dados da Pesquisa Origem e Destino (Pesquisa O/D) de 2007 na Região Metropolitana de São Paulo (RMSP) realizada pelo autor, chamou atenção a necessidade das pessoas deixarem sua zona de domicílio para trabalharem. Com este pano de fundo, essa visualização de dados apresenta o indicador de Fixação da População Ocupada (FPO) - proposto por Hiroi (2014) - que representa o percentual da população que ocupa empregos localizados na mesma zona de residência, em relação ao total de população ocupada residente nessa zona. Conforme Hiroi 2014), [...] quanto maior o FPO, melhor a adequação dos empregos locais à população ocupada residente,indicando melhor harmonia de determinado espaço no que se refere a distâncias e tempos de viagens entre locais de residência e trabalho".

Design

A visualização é um Mapa Coroplético no qual quanto maior a tonalidade da cor vermelha maior é o FPO da zona, isto é, mais pessoas não necessitam sair de sua zona de domicílio para trabalharem; já para a cor amarela, quanto maior sua tonalidade menor é o FPO; as cores intermediárias são uma escala linear calculada em função do valor do FPO da respectiva zona. Os Mapas Coropléticos são elaborados com dados quantitativos, e são os mais adequados para representar distribuições espaciais de dados de uma área em questão; "[...] são indicados para expor índices expressos em porcentagens os quais refletem a variação da densidade de um fenômeno [...]". (Archela & Théry (2008)). O valor do FPO pode ser observado passando o cursor do mouse na zona de interesse. Também é possível utilizar o scroll do mouse para ampliar/diminuir o mapa. No desenvolvimento deste trabalho, um destaque especial para o site mapstater que possui várias funcionalidades que ajudam no desenvolvimento de visualizações com mapas.

Feedbacks

Feedback Avaliador A - 1ª versão:

1A) O que você percebeu na visualização? Resp.: As regiões mais afastadas parecem ter mais fixação, porém, por serem muito maiores não quer dizer que o deslocamento não é grande....

2A) Que perguntas você tem sobre os dados? Resp.: Por que tantos indefinidos? Os dados são referentes a que mora e trabalha na mesma região, certo? Mas tem regiões muito pequenas e outras muito grandes. Talvez valesse a pena fazer ou dar a opção de visualização por distância percorrida. Acho que mudaria bastante o resultado apresentado, principalmente nas regiões próximas ao centro...

3A) Que relacionamentos você percebeu? Resp.: Tirando alguns casos, como Marsilac, Itapeti, Reservatório de Mogi, Luz e Pq Dom Pedro, as regiões grandes tem maior FPO e regiões pequenas tem baixo FPO. Pode ser interessante colocar as principais vias de acesso, para perceber o porque de algumas conclusões, como o isolamento da região de Salesópolis, Pirapora e Juquitiba (esta tem a Regis, mas é único acesso).

4A) O que você acha que é o principal destaque dessa visualização? Resp.: A interatividade: ver os dados ao passar o mouse e o zoom.

5A) Existe algo que você não entende no gráfico? Resp.: Não.

6A) Outras observações/questões? Resp.: Não.

Feedback Avaliador B - 1ª versão:

1B) No código (arquivo html), mesmo sendo comentários, é importante tentar deixar estas linhas com no máximo uns 80 a 100 caracteres. Padronizar os comentários em Português e citar nas seções de resumo ou design eventuais códigos base que tenham sido utilizados neste trabalho. 2B) Acrescentar título e legenda. 3B) Por quê os dados estão sendo apresentados na forma de um mapa, e não em um outro tipo de gráfico, como por exemplo um gráfico de barras? 4B) Há algum motivo em especial para termos usado uma escala entre azul e amarelo? 5B) Escrever um pouco mais sobre mapas coropléticos e sua função.

Feedback Avaliador C - 1ª versão:

1C) Seria interessante se o mapa você do tipo "Google Maps".

Modificações Realizadas conforme Feedbacks da 1ª versão.

1B) Revisado o código. 2B) Acrescentado título. 3B) e 5B) Foi utilizado a apresentação por meio de mapa para propiciar contexto espacial aos dados, neste sentido o mapa Coroplético foi adotado pois apresenta uma forma rápida de comparação entre as zonas. 4B) As cores adotadas (azul e amarelo) foram escolhidas após varias outras terem sido testadas; optou-se em não utilizar vermelho e verde devido a pessoas com problema de deltonismo terem dificuldades de visualizá-las.

Feedback Avaliador B - 2ª versão:

1B) Duas linhas no código ainda identadas incorretamente. 2B) Acrescentar legenda com um intervalo de cores, conforme exemplo. 3B) Em relação as cores utilizadas (amarelo e azul), verificar na seção "End of the Rainbow" deste artigo a recomendação de utilização da tonalidade vermelha mais escura no fim do espectro. 4B) Explicar um pouco mais o que são Mapa Coropléticos.

Modificações Realizadas conforme Feedbacks da 2ª versão.

1B) Ajustado problemas nas linhas. 2B) Acrescentado legenda. 3B) Ajustado cor conforme recomendação do artigo. 4B) Melhorado explicação do Mapa.

Modificações não implementadas. 1A) Na pesquisa OD as regiões mais afastadas do centro de SP são mais agregadas, isto é, possuem menos zonas, com isto, realmente o FPO pode ser alto, mas o trabalhador pode demorar muito tempo para chegar ao trabalho. Para trabalhos futuros, o indicador Tempo Médio de Deslocamento (TMD) pode ser testado. 2A) O dados indefinidos são devidos a ausência destes na Pesquisa OD/2007. Quanto a sugestão da distância, acredito que o tempo (TMD) possa ser uma variável melhor, uma vez que pode haver uma pequena distância, mas com um tempo de chegada demorado. 3A) e 1C) Para trabalhos futuros tentaremos utilizar mapas tipo "Google Maps", como este, resultante do Topojson.json utilizado neste trabalho e carregado no site geojson.io.

Recursos

Raw
csv_data.csv
Zona Entrevistados SemOcupacao TrabZonaVive Ocupados FPO Comp_FPO
1 276 87 57 189 30.2 69.8
2 287 113 87 174 50 50
3 307 122 55 185 29.7 70.3
4 638 217 104 421 24.7 75.3
5 575 140 203 435 46.7 53.3
6 549 212 125 337 37.1 62.9
7 650 241 225 409 55 45
8 521 231 122 290 42.1 57.9
9 504 167 134 337 39.8 60.2
10 386 176 43 210 20.5 79.5
11 358 146 50 212 23.6 76.4
12 489 225 113 264 42.8 57.2
13 378 103 130 275 47.3 52.7
14 343 118 91 225 40.4 59.6
15 474 229 65 245 26.5 73.5
16 342 88 61 254 24 76
17 305 129 49 176 27.8 72.2
18 488 181 106 307 34.5 65.5
19 394 171 47 223 21.1 78.9
20 410 147 41 263 15.6 84.4
21 791 314 115 477 24.1 75.9
22 323 122 43 201 21.4 78.6
23 248 91 16 157 10.2 89.8
24 271 75 46 196 23.5 76.5
25 362 98 73 264 27.7 72.3
26 267 77 38 190 20 80
27 516 172 97 344 28.2 71.8
28 561 254 82 307 26.7 73.3
29 675 221 158 454 34.8 65.2
30 697 267 186 430 43.3 56.7
31 742 245 152 497 30.6 69.4
32 544 195 79 349 22.6 77.4
33 1336 444 302 892 33.9 66.1
34 927 341 166 586 28.3 71.7
35 265 105 22 160 13.8 86.2
36 463 180 74 283 26.1 73.9
37 492 222 61 270 22.6 77.4
38 425 182 64 243 26.3 73.7
39 351 149 39 202 19.3 80.7
40 316 118 53 198 26.8 73.2
41 412 193 48 219 21.9 78.1
42 433 181 107 252 42.5 57.5
43 465 208 21 257 8.2 91.8
44 572 244 101 328 30.8 69.2
45 710 297 125 413 30.3 69.7
46 453 212 82 241 34 66
47 422 226 52 196 26.5 73.5
48 434 207 63 227 27.8 72.2
49 524 166 36 358 10.1 89.9
50 574 217 36 357 10.1 89.9
51 729 256 69 473 14.6 85.4
52 527 141 60 386 15.5 84.5
53 584 247 69 337 20.5 79.5
54 574 168 150 406 36.9 63.1
55 654 256 103 398 25.9 74.1
56 697 163 87 534 16.3 83.7
57 761 298 122 463 26.3 73.7
58 650 243 43 407 10.6 89.4
59 545 200 81 345 23.5 76.5
60 700 295 89 405 22 78
61 676 264 94 412 22.8 77.2
62 239 96 48 143 33.6 66.4
63 1280 436 261 844 30.9 69.1
64 495 179 97 316 30.7 69.3
65 478 204 49 274 17.9 82.1
66 1096 387 148 709 20.9 79.1
67 719 229 160 490 32.7 67.3
68 390 154 50 236 21.2 78.8
69 477 180 90 297 30.3 69.7
70 638 270 99 368 26.9 73.1
71 354 134 75 220 34.1 65.9
72 401 108 112 293 38.2 61.8
73 593 188 108 405 26.7 73.3
74 583 221 80 362 22.1 77.9
75 993 401 230 592 38.9 61.1
76 516 169 75 347 21.6 78.4
77 750 326 161 424 38 62
78 488 173 96 315 30.5 69.5
79 523 171 67 352 19 81
80 1099 510 253 589 43 57
81 454 156 133 298 44.6 55.4
82 648 222 134 426 31.5 68.5
83 881 409 70 472 14.8 85.2
84 875 330 151 545 27.7 72.3
85 860 212 127 648 19.6 80.4
86 597 194 97 403 24.1 75.9
87 861 311 118 550 21.5 78.5
88 416 171 47 245 19.2 80.8
89 639 209 91 430 21.2 78.8
90 350 130 71 220 32.3 67.7
91 318 115 79 203 38.9 61.1
92 349 144 48 205 23.4 76.6
93 443 169 72 274 26.3 73.7
94 852 334 149 518 28.8 71.2
95 1559 605 259 954 27.1 72.9
96 720 286 131 434 30.2 69.8
97 358 179 88 179 49.2 50.8
98 367 130 53 237 22.4 77.6
99 460 184 113 276 40.9 59.1
100 653 245 88 408 21.6 78.4
101 794 388 125 406 30.8 69.2
102 704 331 84 373 22.5 77.5
103 643 273 78 370 21.1 78.9
104 749 312 101 437 23.1 76.9
105 863 415 36 448 8 92
106 502 180 82 322 25.5 74.5
107 353 133 38 220 17.3 82.7
108 295 139 63 156 40.4 59.6
109 673 281 100 392 25.5 74.5
110 458 206 71 252 28.2 71.8
111 419 199 73 220 33.2 66.8
112 339 152 85 187 45.5 54.5
114 407 168 50 239 20.9 79.1
115 403 180 58 223 26 74
116 434 210 62 224 27.7 72.3
117 482 215 74 267 27.7 72.3
118 344 177 61 167 36.5 63.5
120 341 138 45 203 22.2 77.8
121 384 192 57 192 29.7 70.3
122 393 178 44 215 20.5 79.5
123 340 154 43 186 23.1 76.9
124 306 119 36 187 19.3 80.7
125 416 164 77 252 30.6 69.4
126 280 125 35 155 22.6 77.4
127 355 154 46 201 22.9 77.1
128 475 190 85 285 29.8 70.2
129 320 130 41 190 21.6 78.4
131 528 227 77 301 25.6 74.4
132 556 290 79 266 29.7 70.3
133 472 221 73 251 29.1 70.9
134 421 175 94 246 38.2 61.8
135 455 204 57 251 22.7 77.3
136 511 206 81 305 26.6 73.4
137 361 132 71 229 31 69
138 454 195 69 259 26.6 73.4
139 314 153 24 161 14.9 85.1
141 442 216 52 226 23 77
142 413 183 61 230 26.5 73.5
144 378 151 42 227 18.5 81.5
145 644 283 80 361 22.2 77.8
147 409 196 55 213 25.8 74.2
148 390 144 49 246 19.9 80.1
149 382 165 48 217 22.1 77.9
150 509 211 65 298 21.8 78.2
151 366 179 29 187 15.5 84.5
152 358 185 43 173 24.9 75.1
153 382 168 63 214 29.4 70.6
154 457 173 99 284 34.9 65.1
155 384 146 70 238 29.4 70.6
156 378 180 81 198 40.9 59.1
157 346 129 75 217 34.6 65.4
158 524 201 188 323 58.2 41.8
159 340 147 68 193 35.2 64.8
160 477 210 74 267 27.7 72.3
161 529 220 99 309 32 68
162 330 142 73 188 38.8 61.2
163 603 260 95 343 27.7 72.3
164 506 227 74 279 26.5 73.5
165 533 214 54 319 16.9 83.1
166 545 233 76 312 24.4 75.6
167 434 212 81 222 36.5 63.5
168 460 205 79 255 31 69
169 516 233 91 283 32.2 67.8
170 336 150 35 186 18.8 81.2
171 355 163 58 192 30.2 69.8
172 334 167 27 167 16.2 83.8
175 494 205 72 289 24.9 75.1
176 508 220 81 288 28.1 71.9
177 350 169 48 181 26.5 73.5
178 369 165 43 204 21.1 78.9
179 301 165 31 136 22.8 77.2
180 419 191 65 228 28.5 71.5
181 416 226 47 190 24.7 75.3
182 381 188 57 193 29.5 70.5
183 452 208 53 244 21.7 78.3
184 521 260 55 261 21.1 78.9
185 343 151 37 192 19.3 80.7
186 368 181 57 187 30.5 69.5
187 356 166 66 190 34.7 65.3
188 368 193 76 175 43.4 56.6
189 336 167 36 169 21.3 78.7
190 416 181 65 235 27.7 72.3
191 314 150 29 164 17.7 82.3
192 329 163 32 166 19.3 80.7
193 436 234 62 202 30.7 69.3
194 429 210 36 219 16.4 83.6
195 388 200 56 188 29.8 70.2
196 332 154 33 178 18.5 81.5
197 481 222 85 259 32.8 67.2
198 417 169 102 248 41.1 58.9
199 624 291 86 333 25.8 74.2
200 386 192 51 194 26.3 73.7
201 456 204 23 252 9.1 90.9
202 539 224 118 315 37.5 62.5
203 380 156 47 224 21 79
204 335 136 59 199 29.6 70.4
205 394 160 63 234 26.9 73.1
206 395 165 53 230 23 77
207 392 151 67 241 27.8 72.2
208 351 151 36 200 18 82
209 526 253 74 273 27.1 72.9
210 472 254 40 218 18.3 81.7
211 573 294 47 279 16.8 83.2
213 443 220 41 223 18.4 81.6
214 456 238 31 218 14.2 85.8
215 343 170 41 173 23.7 76.3
216 460 237 57 223 25.6 74.4
217 431 218 45 213 21.1 78.9
218 314 156 57 158 36.1 63.9
219 439 219 73 220 33.2 66.8
220 415 215 47 200 23.5 76.5
221 410 187 84 223 37.7 62.3
222 499 184 77 315 24.4 75.6
223 452 164 60 288 20.8 79.2
224 523 166 114 357 31.9 68.1
225 569 196 147 373 39.4 60.6
226 599 232 95 367 25.9 74.1
227 535 172 83 363 22.9 77.1
228 383 184 56 199 28.1 71.9
229 464 183 67 281 23.8 76.2
230 386 130 35 256 13.7 86.3
231 454 183 66 271 24.4 75.6
233 416 185 68 231 29.4 70.6
234 615 300 83 315 26.3 73.7
235 638 222 106 416 25.5 74.5
236 573 235 51 338 15.1 84.9
237 460 267 24 193 12.4 87.6
238 568 220 74 348 21.3 78.7
239 390 182 62 208 29.8 70.2
240 384 171 52 213 24.4 75.6
241 450 181 70 269 26 74
242 458 221 66 237 27.8 72.2
243 364 136 41 228 18 82
244 358 184 44 174 25.3 74.7
245 416 141 73 275 26.5 73.5
246 354 189 39 165 23.6 76.4
247 422 211 46 211 21.8 78.2
248 374 179 54 195 27.7 72.3
249 349 165 37 184 20.1 79.9
250 455 175 60 280 21.4 78.6
251 747 226 191 521 36.7 63.3
252 782 312 106 470 22.6 77.4
253 685 258 116 427 27.2 72.8
255 510 166 68 344 19.8 80.2
256 442 174 73 268 27.2 72.8
257 516 188 69 328 21 79
258 459 153 87 306 28.4 71.6
259 455 228 63 227 27.8 72.2
260 394 139 66 255 25.9 74.1
261 332 128 51 204 25 75
262 371 165 38 206 18.4 81.6
263 565 223 123 342 36 64
264 608 220 108 388 27.8 72.2
265 501 209 56 292 19.2 80.8
266 355 142 23 213 10.8 89.2
267 319 175 36 144 25 75
268 384 196 23 188 12.2 87.8
269 382 180 63 202 31.2 68.8
270 654 275 149 379 39.3 60.7
271 392 172 58 220 26.4 73.6
272 429 161 55 268 20.5 79.5
273 377 163 34 214 15.9 84.1
274 428 178 43 250 17.2 82.8
275 351 146 49 205 23.9 76.1
276 323 184 58 139 41.7 58.3
277 367 166 60 201 29.9 70.1
278 192 89 23 103 22.3 77.7
279 362 184 51 178 28.7 71.3
280 230 127 15 103 14.6 85.4
281 571 250 115 321 35.8 64.2
282 1066 431 175 635 27.6 72.4
283 581 222 114 359 31.8 68.2
284 570 209 84 361 23.3 76.7
285 281 127 44 154 28.6 71.4
286 370 155 20 215 9.3 90.7
287 412 191 74 221 33.5 66.5
288 401 191 32 210 15.2 84.8
289 361 175 29 186 15.6 84.4
290 372 184 48 188 25.5 74.5
291 438 233 43 205 21 79
292 341 134 34 207 16.4 83.6
293 330 154 44 176 25 75
294 336 166 40 170 23.5 76.5
295 944 368 199 576 34.5 65.5
296 1191 443 324 748 43.3 56.7
297 1099 455 187 644 29 71
298 943 393 157 550 28.5 71.5
299 270 141 28 129 21.7 78.3
300 829 287 99 542 18.3 81.7
301 821 289 105 532 19.7 80.3
302 355 165 40 190 21.1 78.9
303 363 149 37 214 17.3 82.7
304 304 130 31 174 17.8 82.2
305 394 210 39 184 21.2 78.8
306 665 305 100 360 27.8 72.2
307 449 209 66 240 27.5 72.5
308 771 321 123 450 27.3 72.7
309 455 192 35 263 13.3 86.7
310 323 143 19 180 10.6 89.4
311 349 160 53 189 28 72
312 429 175 86 254 33.9 66.1
313 375 155 67 220 30.5 69.5
314 508 213 74 295 25.1 74.9
315 400 187 69 213 32.4 67.6
316 312 143 58 169 34.3 65.7
318 747 275 179 472 37.9 62.1
319 492 195 45 297 15.2 84.8
320 485 191 101 294 34.4 65.6
322 307 151 65 156 41.7 58.3
324 304 148 129 156 82.7 17.3
325 332 228 54 104 51.9 48.1
327 372 185 66 187 35.3 64.7
330 367 187 67 180 37.2 62.8
332 368 193 98 175 56 44
336 493 194 106 299 35.5 64.5
337 840 369 221 471 46.9 53.1
338 297 117 46 180 25.6 74.4
339 363 167 25 196 12.8 87.2
340 386 165 50 221 22.6 77.4
341 459 180 79 279 28.3 71.7
342 290 162 58 128 45.3 54.7
344 291 144 59 147 40.1 59.9
345 324 130 22 194 11.3 88.7
347 456 241 49 215 22.8 77.2
350 375 187 114 188 60.6 39.4
352 276 146 90 130 69.2 30.8
354 435 232 78 203 38.4 61.6
356 311 180 36 131 27.5 72.5
357 383 185 36 198 18.2 81.8
358 321 168 82 153 53.6 46.4
359 461 241 126 220 57.3 42.7
360 303 148 67 155 43.2 56.8
361 346 201 33 145 22.8 77.2
362 373 199 79 174 45.4 54.6
363 349 180 96 169 56.8 43.2
364 348 217 67 131 51.1 48.9
365 364 213 56 151 37.1 62.9
366 396 170 106 226 46.9 53.1
367 366 151 48 215 22.3 77.7
368 554 260 83 294 28.2 71.8
369 479 229 104 250 41.6 58.4
370 322 174 47 148 31.8 68.2
371 509 326 48 183 26.2 73.8
372 423 226 34 197 17.3 82.7
373 309 142 59 167 35.3 64.7
374 997 447 202 550 36.7 63.3
375 395 207 76 188 40.4 59.6
376 352 151 139 201 69.2 30.8
377 311 138 126 173 72.8 27.2
378 235 125 89 110 80.9 19.1
379 653 319 165 334 49.4 50.6
380 456 194 99 262 37.8 62.2
381 392 181 37 211 17.5 82.5
382 569 175 187 394 47.5 52.5
383 538 245 118 293 40.3 59.7
384 590 244 90 346 26 74
385 474 193 63 281 22.4 77.6
386 448 202 71 246 28.9 71.1
387 391 219 28 172 16.3 83.7
388 429 204 61 225 27.1 72.9
389 459 235 54 224 24.1 75.9
390 355 158 72 197 36.5 63.5
391 255 147 46 108 42.6 57.4
392 581 250 127 331 38.4 61.6
393 365 204 45 161 28 72
394 468 210 67 258 26 74
395 424 231 35 193 18.1 81.9
396 471 274 90 197 45.7 54.3
397 507 251 68 256 26.6 73.4
398 572 290 104 282 36.9 63.1
399 352 171 39 181 21.5 78.5
400 395 213 57 182 31.3 68.7
401 415 207 56 208 26.9 73.1
402 444 206 78 238 32.8 67.2
403 544 211 142 333 42.6 57.4
404 403 173 49 230 21.3 78.7
405 360 182 35 178 19.7 80.3
407 459 197 46 262 17.6 82.4
408 422 186 73 236 30.9 69.1
409 373 178 93 195 47.7 52.3
410 393 185 64 208 30.8 69.2
411 387 160 94 227 41.4 58.6
412 342 133 62 209 29.7 70.3
413 220 117 33 103 32 68
414 417 175 109 242 45 55
415 345 176 48 169 28.4 71.6
416 350 183 52 167 31.1 68.9
419 375 189 121 186 65.1 34.9
420 332 164 130 168 77.4 22.6
421 360 188 58 172 33.7 66.3
423 313 174 125 139 89.9 10.1
424 380 189 94 191 49.2 50.8
425 360 183 41 177 23.2 76.8
428 330 150 39 180 21.7 78.3
429 342 186 31 156 19.9 80.1
430 347 205 45 142 31.7 68.3
432 319 153 54 166 32.5 67.5
433 393 183 59 210 28.1 71.9
434 301 157 38 144 26.4 73.6
435 338 168 25 170 14.7 85.3
436 487 210 115 277 41.5 58.5
437 364 136 28 228 12.3 87.7
438 459 214 43 245 17.6 82.4
439 385 207 55 178 30.9 69.1
440 326 149 46 177 26 74
441 344 149 44 195 22.6 77.4
442 314 151 61 163 37.4 62.6
443 398 150 58 248 23.4 76.6
444 506 204 83 302 27.5 72.5
445 290 168 30 122 24.6 75.4
446 352 182 61 170 35.9 64.1
447 397 179 25 218 11.5 88.5
448 378 175 79 203 38.9 61.1
449 359 166 73 193 37.8 62.2
450 187 89 31 98 31.6 68.4
451 421 159 119 262 45.4 54.6
452 323 162 65 161 40.4 59.6
455 319 201 62 118 52.5 47.5
456 442 204 144 238 60.5 39.5
457 239 84 14 155 9 91
458 267 153 50 114 43.9 56.1
459 435 196 158 239 66.1 33.9
460 357 173 108 184 58.7 41.3
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Mapa Coroplético do Indicador de Fixação da População Ocupada na RMSP em 2007 </title>
</head>
<style>
body {
font: 12px sans-serif;
}
h1 {
font-family: sans-serif;
color: #555;
text-align: center;
font-size: 16pt;
}
path {
stroke-width: 1px;
stroke: #050700;
fill: #83ff00;
cursor: pointer;
}
path:hover,
path.highlighted {
fill: #0800ff;
}
#chart {
position: relative;
width: 4000px;
}
.tooltip {
position: absolute;
background-color: lightgrey;
border: 1px solid black;
color: black;
font-weight: bold;
padding: 4px 8px;
display: none;
z-index: 10;
}
</style>
<body>
<div class="w3-container">
<h1>Mapa Coroplético do Indicador de Fixação da População Ocupada (FPO) na Região Metropolitana de São Paulo, com base nos resultados da Pesquisa Origem/Destino de 2007 </h1>
<text font-family="sans-serif" font-size="2px"> Pior </text>
<div id="chart"></div>
<div id="legenda"></div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
/*permite que o navegador saiba que deseja-se forçar um subconjunto
restrito de JavaScript com essa função. Com isto, ele lançará erros
explícitos sempre que o JS falhar silenciosamente*/
"use strict";
//Dimensões do mapa e da legenda em pixels
var margin = 10,
width = 1200 - margin,
height = 600 - margin;
//Paths baseados na projeção
var projection = d3.geo.mercator()
.scale(30000) // Escala adotada
.center([-46.45177344602454, -23.62465638892686])//Centro Projeção
.translate([width/2.3, height/2.4]);//Posicionam. do centro do mapa
//Paths baseados na projeção
var path = d3.geo.path()
.projection(projection);
//Criando um SVG
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin);
//Agrupando as características do mapa
var features = svg.append("g")
.attr("class", "features");
//Criando uma escala linear de cores
var color_scale = d3.scale.linear()
.range(['#fffa00', '#ff0000']);
//Criando um listener para o zoom/pan
var zoom = d3.behavior.zoom()
.scaleExtent([1, Infinity])
.on("zoom", zoomed);
svg.call(zoom);
//Criando uma dica de contexto (tooltip)
var tooltip = d3.select('#chart')
.append("div")
.attr("class", "tooltip");
tooltip.append('div')
.attr('class', 'NOMEZONA');
tooltip.append('div')
.attr('class', 'NOMEMUNICI');
tooltip.append('div')
.attr('class', 'FPO');
//Carregando os dados da Pesquisa OD 2007
d3.csv("csv_data.csv", function(error, csv_data) {
//debugger;
if (error) {
console.log(error);
} else {
//console.log(csv_data);
var minFPO = d3.min(csv_data, function(d) {return +d.FPO; });
var maxFPO = d3.max(csv_data, function(d) {return +d.FPO; });
color_scale.domain([minFPO, maxFPO]);
}
//Carregando o mapa TopoJson das 460 zonas da RMSP
d3.json("json_data.json", function(error, json_data) {
//debugger;
if (error) {
console.log(error);
} else {
//console.log(json_data);
}
for (var i = 0; i < csv_data.length; i++) {
var zonaindex = parseFloat(csv_data[i].Zona);
//console.log(zonaindex);
json_data.objects.collection.geometries[zonaindex - 1].properties.FPO = parseFloat(csv_data[i].FPO);
}
//Vinculando os dados ao SVG e criando um caminho por recurso GeoJSON
features.selectAll("path")
//Gerando características do mapa TopoJSON
.data(topojson.feature(json_data, json_data.objects.collection).features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
//Obtendo os valores dos dados
var value = d.properties.FPO;
if (value) {
//Existindo valor, pinta a zona conforme FPO
return color_scale(value);
} else {
//Não existindo pinta a zona na cor branca
return "#f7f7f9";
}
})
.on("mouseover", showTooltip)
.on("mousemove", moveTooltip)
.on("mouseout", hideTooltip)
.on("click", clicked);
}); //fim json
}); //fim csv
//Dimensões da legenda
var width_leg = 200,
height_leg = 30,
divisions = 40;
var newData = [];
var sectionWidth = Math.floor(width_leg / divisions);
for (var i = 0; i < width_leg; i += sectionWidth) {
newData.push(i);
}
//Criando uma escala linear de cores para legenda
var colorScaleLin = d3.scale.linear()
.domain([0, newData.length - 1])
.interpolate(d3.interpolateRgb)
.range(['#fffa00', '#ff0000']);
var vis = d3.select("#legenda")
.append("svg")
.attr("width", width_leg)
.attr("height", height_leg);
//Colorindo a legenda
vis.selectAll('rect')
.data(newData)
.enter()
.append('rect')
.attr("x", function(d) { return d; })
.attr("y", 0)
.attr("width", width_leg)
.attr("height", 3 * sectionWidth)
.attr('fill', function(d, i) { return colorScaleLin(i) });
//Tratando eventos de click do mouse
//Obs.: não utilizado nesta versão
function clicked(d, i) {
/*tooltip.style("display","block")
.text("FPO: " + d.properties.FPO + "%");*/
}
//Atualizando o mapa no zoom/pan
function zoomed() {
features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
.selectAll("path").style("stroke-width", 1 / zoom.scale() + "px");
}
//Posicionando a dica (tooltip) em função do cursor do mouse
var tooltipOffset = { x: 5, y: -25 };
//Criando uma dica de contexto (tooltip)
function showTooltip(d) {
moveTooltip();
tooltip.select('.NOMEZONA').html("Zona: " + d.properties.NOMEZONA);
tooltip.select('.NOMEMUNICI').html("Cidade: " + d.properties.NOMEMUNICI);
tooltip.select('.FPO').html("FPO: " + d.properties.FPO + "%");
tooltip.style('display', 'block');
}
//Posicionando a dica de contexto (tooltip) em função do movimento do mouse
function moveTooltip() {
tooltip.style("top", (d3.event.pageY + tooltipOffset.y) + "px")
.style("left", (d3.event.pageX + tooltipOffset.x) + "px");
}
//Criando uma dica de contexto (tooltip)
function hideTooltip() {
tooltip.style("display", "none");
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
json_data.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment