for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf ·...
Transcript of for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf ·...
![Page 1: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/1.jpg)
Boston Region Metropolitan Planning Organization
Transforming Geospatial Data for Visualization with D3
FOSS4G ─ BostonAugust 17, 2017
Beatrice Jin and Benjamin Krepp
![Page 2: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/2.jpg)
Agenda• Who we are• Project context• Implementation vehicle• Overview of dashboard data• Presentation of linear data • Conclusion• Q&A
![Page 3: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/3.jpg)
Who We Are• Metropolitan Planning Organizations (MPOs)• Boston Region MPO• Central Transportation Planning Staff (CTPS)
![Page 4: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/4.jpg)
Metropolitan Planning Organizations
• Federally mandated and federally funded transportation planning agencies
• Introduced by Federal-Aid Highway Act of 1962
• Required for all U.S. urbanized areas with populations greater than 50,000
![Page 5: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/5.jpg)
Boston Region MPO• Geographic scope• 101 municipalities in the Boston metro area• Boundary roughly defined by I-495
• Membership• MassDOT, MBTA, MBTA Advisory Board,
Massport, MAPC, RTAC, 6 cities, 7 towns• FHWA, FTA (non-voting)
![Page 6: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/6.jpg)
Central Transportation Planning Staff
• Staff to the Boston Region MPO
• Expertise in comprehensive, multimodal transportation planning and analysis
• In-house dedicated GIS, data-development and software group
![Page 7: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/7.jpg)
Project Context• Federal mandate for
performance-based planning
• Define performance metrics• Set goals• Collect data• Track and report progress
![Page 8: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/8.jpg)
The Performance Dashboard• Fulfill federal
requirements• Present data to the
public on the web• Accurate, navigable,
interactive presentation
![Page 9: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/9.jpg)
Implementation Vehicle: D3.js• D3 = Data-driven
documents• JavaScript library• Developed by Mike
Bostock at Stanford visualization lab
• First released in 2011• Free / open-source
![Page 10: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/10.jpg)
Transformation, Not Representation• A web page is a data
structure• Transform it, based on
user data• Structure• Appearance• Behavior
• Foundation: The Grammar of Graphics
![Page 11: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/11.jpg)
Dashboard Data• Tabular
• Census demographics• Crash count per town
• Geospatial• Point – crash location
• Data is confidential• Line – roads• Polygon – town- and
census-boundaries
![Page 12: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/12.jpg)
Linear Geospatial Data• Pavement
condition• Congestion• Sidewalk
coverage• Bicycle facilities
![Page 13: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/13.jpg)
Data Sources• Pavement condition, sidewalk coverage
• Annual MassDOT Road Inventory• Congestion
• INRIX speed-run data processed by CTPS• Bicycle facilities
• MassDOT Bicycle Accommodation Inventory• MAPC Bicycle and Pedestrian Mapping Index
![Page 14: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/14.jpg)
Source Data Formats• Pavement, sidewalks, congestion
• ArcSDE feature classes• Bicycle facilities
• Shapefile• ArcSDE feature class
• Source data exported to GeoJSON format• ogr2ogr, esri-to-open
![Page 15: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/15.jpg)
Linear Data• Linear transformation
• Non-linear transformation
![Page 16: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/16.jpg)
Linear Transformation• Pavement
condition
• Congestion
![Page 17: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/17.jpg)
Pavement Condition• Metric: Present
Serviceability Index (PSI)
• PSI is a measure of a road’s roughness• 5 → Excellent• 0 → Poor
![Page 18: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/18.jpg)
Sample Road Inventory Record(GeoJSON Format)
![Page 19: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/19.jpg)
One Road Segment
![Page 20: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/20.jpg)
One Road Segment in Local Context
![Page 21: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/21.jpg)
In the Context of an Entire Route
![Page 22: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/22.jpg)
In the Context of the Regional Express Highway System
![Page 23: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/23.jpg)
Temporal PSI Overview – All Interstates
![Page 24: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/24.jpg)
Temporal PSI Overview – I-90
![Page 25: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/25.jpg)
D3’s curveBasissmooths discrete data points
![Page 26: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/26.jpg)
Congestion
![Page 27: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/27.jpg)
Sample Congestion Data Record(GeoJSON Format)
![Page 28: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/28.jpg)
Speed Index: Express Highways
![Page 29: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/29.jpg)
Speed Index: Arterial Routes
![Page 30: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/30.jpg)
Speed Index: One Arterial Route
![Page 31: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/31.jpg)
Non-linear Transformation
Linear data isn’t always best presented
as a line!
![Page 32: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/32.jpg)
Dense Linear Data
Sidewalk coverage
![Page 33: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/33.jpg)
Sparse Linear Data
Off-road bicycle facilities
![Page 34: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/34.jpg)
Solution• Aggregate data by geographic unit
• Municipality• Census tract• Traffic analysis zone (TAZ)
• Display aggregated data• Choropleth map• Bar chart• Enhanced x-y scatter plot
![Page 35: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/35.jpg)
Metrics
![Page 36: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/36.jpg)
Sidewalk Coverage
• Enhanced x-y scatter plot
![Page 37: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/37.jpg)
Off-road Bicycle Facilities
• Choropleth map
• Bar chart
![Page 38: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/38.jpg)
Conclusion• Single visualization framework
• Spatial data• Non-spatial data
• Web server is spatial data server• Open format data
• CSV, TSV, GeoJSON, TopoJSON• Rich presentation
![Page 39: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/39.jpg)
Check Out the Dashboard
www.ctps.org/dv/lrtp_dashboard
![Page 40: for Visualization with D3 Transforming Geospatial Data2017.foss4g.org/post_conference/d3.pdf · Transforming Geospatial Data for Visualization with D3 FOSS4G ─ Boston August 17,](https://reader033.fdocuments.us/reader033/viewer/2022041416/5e1c066dbeff964144476ab0/html5/thumbnails/40.jpg)
Thank You• David Knudsen – CTPS GIS Analyst• Kathy Jacob – CTPS GIS Analyst• Paul Reim – CTPS GIS Analyst• Matt Archer – CTPS Intern• Jennifer Rowe – CTPS Public Participation Manager• Anne McGahan – CTPS LRTP Project Manager• Lourenço Dantas – CTPS Certification Activities Manager• Scott Peterson – CTPS Director of Technical Services• Robin Mannion – CTPS Deputy Executive Director• Karl Quackenbush – CTPS Executive Director