| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| Work in progress | |
| <script src="path-data-polyfill.js"></script> |
This is a simple setup of Leaflet (via Mapbox) with d3 to show dots on a map. This can serve as a base for many interesting geographically based visualizations
Nice overview of using d3 + Leaflet. I found this slightly simpler to use than Mike's classic post.
Built with blockbuilder.org
forked from enjalot's block: dots on a map: setup-gl
| // original data | |
| let data = []; | |
| // filter data arraybased on another array | |
| // get the records that have a certain property | |
| let filtered = data.work.filter(function(d) { | |
| return selectedIDs.indexOf(d['property']) > -1; | |
| }) | |
| nodes = []; |
| id | titolo | conteggio | start_year | start_month | start_day | end_year | end_month | end_day | |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Alba sui rami nudi | 1 | 1947 | 0 | 1 | 1950 | 0 | 1 | |
| 2 | Andato al comando | 1 | 1945 | 1 | 1 | 1945 | 12 | 31 | |
| 3 | Angoscia in caserma | 1 | 1945 | 1 | 1 | 1945 | 12 | 16 | |
| 4 | Attesa della morte in un albergo | 1 | 1949 | 1 | 1 | 1949 | 7 | 30 | |
| 5 | Campo di mine | 1 | 1946 | 1 | 1 | 1946 | 8 | 18 | |
| 6 | Chi ha messo la mina nel mare? | 1 | 1948 | 1 | 1 | 1948 | 11 | 23 | |
| 7 | Come imparare a essere morto | 1 | 1983 | 9 | 6 | 1983 | 9 | 13 | |
| 8 | Dal terrazzo | 1 | 1982 | 11 | 21 | 1982 | 11 | 26 | |
| 9 | Del modersi la lingua | 1 | 1975 | 1 | 1 | 1975 | 8 | 1 |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title>Display a map</title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0> | |
| <style> body {padding: 0; margin: 0;} </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script> | |
| <script src="sketch.js"></script> | |
| </head> | |
| <body> |
| [ | |
| { | |
| "id": "S001", | |
| "label": "Passatempi", | |
| "attributes": { | |
| "title": "Passatempi", | |
| "txt_length": 2164, | |
| "type": "racconto", | |
| "year": null, | |
| "log_length": 136.71 |
