WhereBerlin – Interactive Visualizations in the Browser

Interactive Visualizations in the Browser

@whereberlin

@aemkei

Martin Kleppe

Selected Clients

Maps API

> 150 Features> 150 Features

Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Animation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circle GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder GeocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent GeocoderGeometry GeocoderLocationType DirectionsRenderer DirectionsService DirectionsRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus DirectionsResult DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time TransitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationService LocationElevationRequest PathElevationRequest ElevationResult ElevationStatus MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService DistanceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMatrixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map TypesMapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle MapTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingLayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatmap FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerStatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer StreetView StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData StreetViewLocation StreetViewTileData StreetViewService StreetViewStatus Events MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCObject MVCArray Geometry Library encoding spherical poly AdSense Library AdUnit AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEvent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest PlaceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesServicePlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager OverlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer TemperatureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherConditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation

Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Animation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circle GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder GeocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent GeocoderGeometry GeocoderLocationType DirectionsRenderer DirectionsService DirectionsRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus DirectionsResult DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time TransitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationService LocationElevationRequest PathElevationRequest ElevationResult ElevationStatus MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService DistanceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMatrixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map TypesMapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle MapTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingLayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatmap FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerStatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer StreetView StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData StreetViewLocation StreetViewTileData StreetViewService StreetViewStatus Events MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCObject MVCArray Geometry Library encoding spherical poly AdSense Library AdUnit AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEvent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest PlaceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesServicePlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager OverlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer TemperatureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherConditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation

Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Animation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circle GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder GeocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent GeocoderGeometry GeocoderLocationType DirectionsRenderer DirectionsService DirectionsRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus DirectionsResult DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time TransitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationService LocationElevationRequest PathElevationRequest ElevationResult ElevationStatus MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService DistanceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMatrixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map TypesMapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle MapTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingLayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatmap FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerStatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer StreetView StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData StreetViewLocation StreetViewTileData StreetViewService StreetViewStatus Events MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCObject MVCArray Geometry Library encoding spherical poly AdSense Library AdUnit AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEvent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest PlaceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesServicePlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager OverlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer TemperatureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherConditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation

New Features

http://www.googleapis.com/geolocation/v1/geolocate?

{ homeMobileCountryCode: 310, homeMobileNetworkCode: 260, radioType: "gsm", carrier: "T-Mobile", cellTowers: [{ cellId: …, signalStrength: … }], wifiAccessPoints: [{ macAddress: …, signalStrength: 8, … }]}

http://www.googleapis.com/geolocation/v1/geolocate?

{ location: { lat: 51.098765, lng: 10.123456 }, accuracy: 1200.4}

Icons & Symbols

new google.maps.Marker({ icon: 'path/to/image.png'});

new google.maps.Marker({ icon: google.maps.SymbolPath.CIRCLE});

new google.maps.Marker({ icon: { path: 'M 125,5 155,90 245,90 175,145 200,230 ... z', fillColor: 'yellow', strokeColor: 'gold', scale: 1 }});

Vector

Keyhole Markup Language

<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"> <Placemark> <name>Simple placemark</name> <description>Additional information</description> <Point> <coordinates> 122.0822035425683, 37.42228990140251, 0 </coordinates> </Point> </Placemark></kml>

<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"> <Placemark> <name>Simple placemark</name> <description>Additional information</description> <Point> <coordinates> 122.0822035425683, 37.42228990140251, 0 </coordinates> </Point> </Placemark></kml>

GeoJSON

{ type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: ...

}, properties: { ... } } ]}

{ type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ] ] }, properties: { ... } } ]}

TopoJSON

{"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,624,-618,-217,-486,625,626,-229,627,628,629]],[[630]]],"properties":{"name":"Germany","iso_a2":"DE","id":"DEU","continent":"Europe"}}[58,-27],[-10,-56],[-22,-35],[-3,-42],[-33,-19],[-6,-13]],[[32791,14932],[-26,-2],[7,31],[23,21],[38,14],[-24,-35],[-7,-16],[-11,-13]],[[33931,14945],[11,-8],[9,4],[9,8],[9,19],[33,27],[31,3],[-10,-28],[74,-50],[-6,-39],[14,-32],[-30,-10],[-24,-33],[21,-13],[12,-28],[-25,-7],[-54,16],[-28,-3],[3,26],[-9,10],[-33,-5],[-14,-57],[-10,-5],[-12,9],[9,37],[-14,6],[-14,-1],[-42,-27],[-12,-1],[-25,32],[79,42],[-33,21],[-7,26],[5,36],[-29,-5],[-28,-14],[-13,-2],[-11,12],[4,26],[23,43],[18,45],[36,22],[21,17],[28,8],[12,16],[26,1],[15,-37],[-1,-22],[-12,-24],[-6,-61]],[[34062,15087],[4,-10],[56,5],[15,-14],[-31,-20],[-8,4],[-27,-6],[-76,15],[-18,23],[67,12],[18,-9]],[[33152,15053],[-35,-20],[-21,6],[-33,24],[45,7],[4,70],[22,27],[43,-16],[-26,-36],[-9,-28],[9,-24],[1,-10]],[[34480,15244],[-24,-26],[-61,39],[-16,25],[7,19],[98,17],[26,-9],[12,-40],[-42,-25]],[[34161,15338],[26,-77],[40,-38],[-15,-34],[-38,4],[-41,-8],[-9,38],[15,28],[-15,25],[-37,-6],[-49,-13],[-33,-19],[-43,-41],[-34,-23],[-113,-61],[-74,-88],[-53,-93],[-32,-63],[-47,-5],[-11,-23],[19,-18],[15,-8],[35,-7],[-6,-27],[-24,-8],[3,-21],[25,-32],[5,-46],[-29,-7],[-44,49],[-50,5],[-39,23],[-25,33],[-24,-7],[-18,-47],[11,-52],[-21,-31],[-24,14],[-9,62],[-23,11],[-32,1],[-77,-67],[-28,-2],[-14,-34],[-45,-38],[-29,-31],[-71,-102],[-40,-43],[-76,-24],[-30,3],[-18,10],[-27,7],[-28,1],[-9,-27],[44,-88],[-24,-30],[-53,2],[-26,25],[-21,-24],[-17,-23],[-17,-34],[26,-72],[41,-33],[30,-5],[11,-27],[-65,-11],[-44,-63],[-20,-44],[-23,-38],[3,-44],[34,-66],[46,-47],[46,-4],[60,15],[14,13],[59,7],[26,46],[19,3],[17,-8],[27,-2],[15,30],[20,11],[28,-8],[54,1],[15,-27],[-17,-30],[-33,-42],[-31,23],[-27,-4],[-15,-22],[29,-47],[ ...

{"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,624,-618,-217,-486,625,626,-229,627,628,629]],[[630]]],"properties":{"name":"Germany","iso_a2":"DE","id":"DEU","continent":"Europe"}}[58,-27],[-10,-56],[-22,-35],[-3,-42],[-33,-19],[-6,-13]],[[32791,14932],[-26,-2],[7,31],[23,21],[38,14],[-24,-35],[-7,-16],[-11,-13]],[[33931,14945],[11,-8],[9,4],[9,8],[9,19],[33,27],[31,3],[-10,-28],[74,-50],[-6,-39],[14,-32],[-30,-10],[-24,-33],[21,-13],[12,-28],[-25,-7],[-54,16],[-28,-3],[3,26],[-9,10],[-33,-5],[-14,-57],[-10,-5],[-12,9],[9,37],[-14,6],[-14,-1],[-42,-27],[-12,-1],[-25,32],[79,42],[-33,21],[-7,26],[5,36],[-29,-5],[-28,-14],[-13,-2],[-11,12],[4,26],[23,43],[18,45],[36,22],[21,17],[28,8],[12,16],[26,1],[15,-37],[-1,-22],[-12,-24],[-6,-61]],[[34062,15087],[4,-10],[56,5],[15,-14],[-31,-20],[-8,4],[-27,-6],[-76,15],[-18,23],[67,12],[18,-9]],[[33152,15053],[-35,-20],[-21,6],[-33,24],[45,7],[4,70],[22,27],[43,-16],[-26,-36],[-9,-28],[9,-24],[1,-10]],[[34480,15244],[-24,-26],[-61,39],[-16,25],[7,19],[98,17],[26,-9],[12,-40],[-42,-25]],[[34161,15338],[26,-77],[40,-38],[-15,-34],[-38,4],[-41,-8],[-9,38],[15,28],[-15,25],[-37,-6],[-49,-13],[-33,-19],[-43,-41],[-34,-23],[-113,-61],[-74,-88],[-53,-93],[-32,-63],[-47,-5],[-11,-23],[19,-18],[15,-8],[35,-7],[-6,-27],[-24,-8],[3,-21],[25,-32],[5,-46],[-29,-7],[-44,49],[-50,5],[-39,23],[-25,33],[-24,-7],[-18,-47],[11,-52],[-21,-31],[-24,14],[-9,62],[-23,11],[-32,1],[-77,-67],[-28,-2],[-14,-34],[-45,-38],[-29,-31],[-71,-102],[-40,-43],[-76,-24],[-30,3],[-18,10],[-27,7],[-28,1],[-9,-27],[44,-88],[-24,-30],[-53,2],[-26,25],[-21,-24],[-17,-23],[-17,-34],[26,-72],[41,-33],[30,-5],[11,-27],[-65,-11],[-44,-63],[-20,-44],[-23,-38],[3,-44],[34,-66],[46,-47],[46,-4],[60,15],[14,13],[59,7],[26,46],[19,3],[17,-8],[27,-2],[15,30],[20,11],[28,-8],[54,1],[15,-27],[-17,-30],[-33,-42],[-31,23],[-27,-4],[-15,-22],[29,-47],[ ...

{"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,624,-618,-217,-486,625,626,-229,627,628,629]],[[630]]],"properties":{"name":"Germany","iso_a2":"DE","id":"DEU","continent":"Europe"}}[58,-27],[-10,-56],[-22,-35],[-3,-42],[-33,-19],[-6,-13]],[[32791,14932],[-26,-2],[7,31],[23,21],[38,14],[-24,-35],[-7,-16],[-11,-13]],[[33931,14945],[11,-8],[9,4],[9,8],[9,19],[33,27],[31,3],[-10,-28],[74,-50],[-6,-39],[14,-32],[-30,-10],[-24,-33],[21,-13],[12,-28],[-25,-7],[-54,16],[-28,-3],[3,26],[-9,10],[-33,-5],[-14,-57],[-10,-5],[-12,9],[9,37],[-14,6],[-14,-1],[-42,-27],[-12,-1],[-25,32],[79,42],[-33,21],[-7,26],[5,36],[-29,-5],[-28,-14],[-13,-2],[-11,12],[4,26],[23,43],[18,45],[36,22],[21,17],[28,8],[12,16],[26,1],[15,-37],[-1,-22],[-12,-24],[-6,-61]],[[34062,15087],[4,-10],[56,5],[15,-14],[-31,-20],[-8,4],[-27,-6],[-76,15],[-18,23],[67,12],[18,-9]],[[33152,15053],[-35,-20],[-21,6],[-33,24],[45,7],[4,70],[22,27],[43,-16],[-26,-36],[-9,-28],[9,-24],[1,-10]],[[34480,15244],[-24,-26],[-61,39],[-16,25],[7,19],[98,17],[26,-9],[12,-40],[-42,-25]],[[34161,15338],[26,-77],[40,-38],[-15,-34],[-38,4],[-41,-8],[-9,38],[15,28],[-15,25],[-37,-6],[-49,-13],[-33,-19],[-43,-41],[-34,-23],[-113,-61],[-74,-88],[-53,-93],[-32,-63],[-47,-5],[-11,-23],[19,-18],[15,-8],[35,-7],[-6,-27],[-24,-8],[3,-21],[25,-32],[5,-46],[-29,-7],[-44,49],[-50,5],[-39,23],[-25,33],[-24,-7],[-18,-47],[11,-52],[-21,-31],[-24,14],[-9,62],[-23,11],[-32,1],[-77,-67],[-28,-2],[-14,-34],[-45,-38],[-29,-31],[-71,-102],[-40,-43],[-76,-24],[-30,3],[-18,10],[-27,7],[-28,1],[-9,-27],[44,-88],[-24,-30],[-53,2],[-26,25],[-21,-24],[-17,-23],[-17,-34],[26,-72],[41,-33],[30,-5],[11,-27],[-65,-11],[-44,-63],[-20,-44],[-23,-38],[3,-44],[34,-66],[46,-47],[46,-4],[60,15],[14,13],[59,7],[26,46],[19,3],[17,-8],[27,-2],[15,30],[20,11],[28,-8],[54,1],[15,-27],[-17,-30],[-33,-42],[-31,23],[-27,-4],[-15,-22],[29,-47],[ ...

topojson Command Line .json, .shp, .csv

How to Display> 1 Million Features?

Clusterer

Fusion Tables

Google Maps Engine

Visualization Library

http://maps.googleapis.com/maps/api/js?sensor=false

> google.maps.*

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization

> google.maps.visualization.*

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization

> google.maps.visualization.MapsEngineLayer> google.maps.visualization.DemographicsLayer> google.maps.visualization.HeatmapLayer> google.maps.visualization.WeightedLocation

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization

> google.maps.visualization.MapsEngineLayer> google.maps.visualization.DemographicsLayer> google.maps.visualization.HeatmapLayer> google.maps.visualization.WeightedLocation

new google.maps.visualization.MapsEngineLayer({ mapId: '10446176163891957399-13516001307527776624-4', layerKey: 'layer_00001', map: map});

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization

> google.maps.visualization.MapsEngineLayer> google.maps.visualization.DemographicsLayer> google.maps.visualization.HeatmapLayer> google.maps.visualization.WeightedLocation

Heatmap Layer

var data = [ new google.maps.LatLng(37.782551, -122.445367), new google.maps.LatLng(37.782745, -122.444586), new google.maps.LatLng(37.782842, -122.443688), ...];

new google.maps.visualization.HeatmapLayer({ data: data});

How to Animate> 10 Million Features?

Canvas Layer

// http://google-maps-utility-library-v3.googlecode.com/// svn/trunk/canvaslayer/src/CanvasLayer.js

var canvasLayer = new CanvasLayer({ map: map, resizeHandler: resize, animate: false, updateHandler: update});

var context = canvasLayer.canvas.getContext('2d');

WebGL

// https://github.com/ubilabs/google-maps-api-threejs-layer

new ThreejsLayer({ map: map }, function(layer){

var geometry = new THREE.Geometry(), location = new google.maps.LatLng(lat, lng), vertex = layer.fromLatLngToVertex(location);

geometry.vertices.push( vertex );

var particles = new THREE.ParticleSystem(geometry, material); layer.add(particles);});

Heatmap ToolDEMO

D3.js - Data Driven Documents

D3 Crossfilterhttp://square.github.io/crossfilter/

Q&A

Martin Kleppe @[email protected]