$30 off During Our Annual Pro Sale. View Details »

Code the Road - Berlin

Martin Kleppe
November 12, 2015

Code the Road - Berlin

At the Google API "Code the Road" tour through Europe. This talk was about "Interactive Data Visualization"

Martin Kleppe

November 12, 2015
Tweet

More Decks by Martin Kleppe

Other Decks in Technology

Transcript

  1. Martin Kleppe / Ubilabs
    Interactive Data Visualization

    View Slide

  2. s

    View Slide

  3. Martin Kleppe
    @aemkei

    View Slide

  4. .<br/>eval(z='p="<"+"pre>"/* ,.oq#+ ,._, */;for(y in n="zw24l6k\<br/>4e3t4jnt4qj24xh2 x/* =<,m#F^ A W###q. */42kty24wrt413n243n\<br/>9h243pdxt41csb yz/* #K q##H######Am */43iyb6k43pk7243nm\<br/>r24".split(4)){/* dP cpq#q##########b, */for(a in t=pars\<br/>eInt(n[y],36)+/* p##@###YG=[#######y */(e=x=r=[]))for\<br/>(r=!r,i=0;t[a/* d#qg `*PWo##q#######D */]>i;i+=.05)wi\<br/>th(Math)x-= /* aem1k.com Q###KWR#### W[ */.05,0>cos(o=\<br/>new Date/1e3/* .Q#########Md#.###OP A@ , */+x/PI)&&(e[~\<br/>~(32*sin(o)*/* , (W#####Xx######.P^ T % */sin(.5+y/7))\<br/>+60] =-~ r);/* #y `^TqW####P###BP */for(x=0;122>\<br/>x;)p+=" *#"/* b. OQ####x#K */[e[x++]+e[x++\<br/>]]||(S=("eval"/* l `X#####D , */+"(z=\'"+z.spl\<br/>it(B = "\\\\")./* G####B" # */join(B+B).split\<br/>(Q="\'").join(B+Q/* VQBP` */)+Q+")//m1k")[x/2\<br/>+61*y-1]).fontcolor/* TP */(/\\w/.test(S)&&"#\<br/>03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//<br/>

    View Slide

  5. Ubilabs

    View Slide

  6. View Slide

  7. Maps

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. > 150 Features

    View Slide

  22. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle
    ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani
    mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ
    le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G
    eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode
    rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction
    sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions
    Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr
    ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe
    rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation
    Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista
    nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat
    rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types
    MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma
    pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL
    ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma
    p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS
    tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street
    View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S
    treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event
    s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO
    bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni
    t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv
    ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla
    ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService
    PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O
    verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe
    ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC
    onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation

    View Slide

  23. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle
    ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani
    mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ
    le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G
    eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode
    rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction
    sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions
    Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr
    ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe
    rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation
    Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista
    nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat
    rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types
    MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma
    pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL
    ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma
    p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS
    tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street
    View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S
    treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event
    s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO
    bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni
    t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv
    ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla
    ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService
    PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O
    verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe
    ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC
    onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation

    View Slide

  24. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle
    ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani
    mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ
    le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G
    eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode
    rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction
    sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions
    Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr
    ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe
    rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation
    Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista
    nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat
    rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types
    MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma
    pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL
    ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma
    p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS
    tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street
    View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S
    treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event
    s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO
    bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni
    t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv
    ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla
    ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService
    PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O
    verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe
    ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC
    onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation

    View Slide

  25. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle
    ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani
    mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ
    le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G
    eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode
    rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction
    sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions
    Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr
    ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe
    rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation
    Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista
    nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat
    rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types
    MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma
    pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL
    ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma
    p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS
    tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street
    View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S
    treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event
    s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO
    bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni
    t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv
    ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla
    ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService
    PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O
    verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe
    ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC
    onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation

    View Slide

  26. How to animate
    1 Million Marker?

    View Slide

  27. Markers

    View Slide

  28. View Slide

  29. View Slide

  30. Clusterer

    View Slide

  31. View Slide

  32. View Slide

  33. github.com/googlemaps/
    js-marker-clusterer

    View Slide

  34. Marker Symbols

    View Slide

  35. View Slide

  36. Image Tiles

    View Slide

  37. new google.maps.ImageMapType({
    getTileUrl: function(coords, zoom) {
    var baseUrl = "http://my.domain.com/tiles/";
    return baseUrl + zoom + "-" + coords.y + "-" + coords.x;
    }
    });

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. Libraries

    View Slide

  42. http://maps.googleapis.com/maps/api/js?

    sensor=false

    View Slide

  43. http://maps.googleapis.com/maps/api/js?

    sensor=false&

    libraries=visualization

    View Slide

  44. 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
    });


    View Slide

  45. View Slide

  46. View Slide

  47. Data Layer

    View Slide

  48. { 

    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: {
    ...

    View Slide

  49. View Slide

  50. DOM Overlays

    View Slide

  51. class Overlay extends google.maps.OverlayView {
    constructor ...
    onAdd ...
    draw ...
    onRemove ...
    }

    View Slide

  52. constructor (position, map) {
    super();
    this.position = position;
    this.map = map;
    this.setMap(map);
    }

    View Slide

  53. onAdd () {
    this.div = document.createElement('div');
    this.div.className = 'marker';
    const panes = this.getPanes();
    panes.overlayImage.appendChild(this.div);
    }

    View Slide

  54. onRemove () {
    this.div.parentNode.removeChild(this.div);
    this.div = null;
    }

    View Slide

  55. draw () {
    const projection = this.getProjection();
    const position = this.position;
    const point = projection.fromLatLngToDivPixel(position);
    this.div.style.left = point.x + 'px';
    this.div.style.top = point.y + 'px';
    }

    View Slide

  56. draw () {
    const projection = this.getProjection();
    const position = this.position;
    const point = projection.fromLatLngToDivPixel(position);
    this.div.style.left = point.x + 'px';
    this.div.style.top = point.y + 'px';
    const zoom = this.map.getZoom();
    const scale = Math.pow(2, zoom);
    ...
    }

    View Slide

  57. SVG

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. Canvas

    View Slide

  64. var canvasLayer = new CanvasLayer({

    map: map,

    resizeHandler: resize,

    animate: false,

    updateHandler: update

    });


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

    View Slide

  65. View Slide

  66. View Slide

  67. github.com/brendankenny/
    CanvasLayer

    View Slide

  68. WebGL

    View Slide

  69. View Slide

  70. 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);

    });


    View Slide

  71. View Slide

  72. github.com/ubilabs/

    google-maps-api-threejs-layer

    View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. DEMO!

    View Slide

  80. Tools

    View Slide

  81. Node.js

    View Slide

  82. Atom Shell

    View Slide

  83. Web Sockets

    View Slide

  84. Typed Arrays

    View Slide

  85. D3 Crossfilter

    View Slide

  86. Map Styles

    View Slide

  87. View Slide

  88. View Slide

  89. View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. View Slide

  96. View Slide

  97. View Slide

  98. View Slide

  99. View Slide

  100. View Slide

  101. Maps

    View Slide

  102. Thank You!
    Martin Kleppe / Ubilabs

    View Slide