HexBinning Ontario

By Andrew Thompson – Geovis course project, SA8905 (Dr. Rinner)

The power of data visualization is becoming increasingly more robust and intricate in nature. The demand to deliver a variety of complex information has lead to the development of highly responsive visual platforms. Libraries such as d3 are providing increased flexibility to work along multiple web technology stacks (HTML, CSS, SVG) allowing for nearly unlimited customization and capacity to handle large datatypes.

hexbin

In this development, a combination of d3 and Leaflet is used to provide a data-driven visualization within an easy to use mapping engine framework; made possible through the developments of Asymmetrik.  This collection of plugins, has allowed the creation of dynamic hexbin-based heatmaps and dynamically update/visualize transitions.

The web mapping application is avaiable at: HexBinning Ontario

Discussion of data & techniques follows below…

The Data

The data behind this technique is based on a series of raster processing to achieve a raster cell centroid to point conversion. After these points have been extracted, the hexbinning technique will automatically assign each point to its respective hexagon,shown below. workflow

This aggregation technique is dynamic in nature as hexagons are evenly redistributed at each zoom level prior to aggregation; allowing for an infinite resolution.

Six layers were extracted for this application, with the purpose of showing the potential for large data visualization and increased complexity at the micro-level.

Wooded Area – Acquired from Ontario Ministry of Natural Resources (1976-2006), # of records: 17,206
Resource & Industrial Land Use – Acquired from: Dmti Spatial Inc (2014),
# of records: 8,555
Residential Land Use – Acquired from: Dmti Spatial Inc (2014),
# of records: 41,300
Highway Junctions – Acquired from Ontario Ministry of Natural Resources (2010), # of records: 14,871
Local Street Intersections – Acquired from Ontario Ministry of Natural Resources (2010), # of records: 16,684
Winter/Seasonal Road Intersections – Acquired from Ontario Ministry of Natural Resources (2010), # of records: 2,460

The Console

cosnole-lab

  1. Selection Pane: This message box provides the percent coverage of the clicked hexagon.
  2. Layer Selection Pane: These tabs will change the respective layer when clicked.
  3. Legend: A gradient colour ramp of the assigned values of the respective layer.
  4. Regional Statistics: A graphical representation of the selected hexagon compared to the regional average (in this case, Ontario).

How to Develop the Console

Selection Pane

The code below takes the selected hexagon from the active d3 elements and apply it to the msg-box div.sel-code

Layer Selection Pane

The code below takes the selected layer from the layer selection div and activates a function generateData2(active) to change the layer.layer-sel

Try it out yourself!                                        GitHub_LogoMark304x200

I have uploaded the completed web app on GitHub if you’d like to try this app out with some of your own data and ideas.

Please follow the link to get started developing on Hexbin-d3

Happy coding! =)