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

The Future of CartoDB is JS

The Future of CartoDB is JS

Andrew W Hill

January 14, 2013
Tweet

More Decks by Andrew W Hill

Other Decks in Technology

Transcript

  1. MAPS ON THE WEB
    3 WAYS TO USE CARTODB TO CREATE
    @ANDREWXHILL
    Monday, January 14, 13

    View Slide

  2. A little background
    Monday, January 14, 13

    View Slide

  3. CLOUD
    HOSTED
    SAAS
    OPEN SOURCE
    Monday, January 14, 13

    View Slide

  4. APIS
    UI
    CLIENT
    LIBS
    Monday, January 14, 13

    View Slide

  5. Monday, January 14, 13

    View Slide

  6. WHY DID WE BUILD
    CARTODB?
    Monday, January 14, 13

    View Slide

  7. ProtectedPlanet - World Database on Protected Areas
    Monday, January 14, 13

    View Slide

  8. Monday, January 14, 13

    View Slide

  9. AN EASIER AND
    MORE POWERFUL
    DATA MAPPING
    SOLUTION
    FOR THE WEB
    WANTED
    Monday, January 14, 13

    View Slide

  10. Monday, January 14, 13

    View Slide

  11. Monday, January 14, 13

    View Slide

  12. SO WE BUILT CARTODB
    Monday, January 14, 13

    View Slide

  13. CARTODB IS A LABOR OF
    LOVE
    Monday, January 14, 13

    View Slide

  14. STILL YOUNG
    BUT GROWING FAST
    Monday, January 14, 13

    View Slide

  15. CartoDB Beta released
    at FOSS 4G 2011
    Monday, January 14, 13

    View Slide

  16. Released CartoDB V1
    April 2011
    Monday, January 14, 13

    View Slide

  17. Included SQL API, Maps API,
    and numerous client
    libraries
    Monday, January 14, 13

    View Slide

  18. Monday, January 14, 13

    View Slide

  19. CartoDB 2.0
    November 2012
    Monday, January 14, 13

    View Slide

  20. TOTAL REDESIGN
    Monday, January 14, 13

    View Slide

  21. Monday, January 14, 13

    View Slide

  22. Monday, January 14, 13

    View Slide

  23. Monday, January 14, 13

    View Slide

  24. TOTALLY GUTTED
    Monday, January 14, 13

    View Slide

  25. Monday, January 14, 13

    View Slide

  26. Tile API
    Monday, January 14, 13

    View Slide

  27. SQL API
    Monday, January 14, 13

    View Slide

  28. CartoDB.js
    Monday, January 14, 13

    View Slide

  29. Monday, January 14, 13

    View Slide

  30. #1
    CartoDB.js + UI
    Monday, January 14, 13

    View Slide

  31. Monday, January 14, 13

    View Slide

  32. Monday, January 14, 13

    View Slide

  33. Monday, January 14, 13

    View Slide

  34. Monday, January 14, 13

    View Slide

  35. Viz.JSON
    Monday, January 14, 13

    View Slide

  36. simple
    Monday, January 14, 13

    View Slide

  37. growing
    Monday, January 14, 13

    View Slide

  38. growing
    Monday, January 14, 13

    View Slide

  39. Monday, January 14, 13

    View Slide

  40. flexible
    Monday, January 14, 13

    View Slide

  41. flexible
    Monday, January 14, 13

    View Slide

  42. full power of postgis from js
    Monday, January 14, 13

    View Slide

  43. flexible
    Monday, January 14, 13

    View Slide

  44. Torque
    HTML5 Canvas
    #2
    Monday, January 14, 13

    View Slide

  45. Canvas Maps
    Monday, January 14, 13

    View Slide

  46. Vecnik
    Monday, January 14, 13

    View Slide

  47. http://goo.gl/TsGsr
    Monday, January 14, 13

    View Slide

  48. SELECT * FROM YOUR_TABLE
    Monday, January 14, 13

    View Slide

  49. WITH  hgrid  
             AS  (SELECT  Cdb_rectanglegrid(Cdb_xyz_extent(8,  12,  5),  
                                   Cdb_xyz_resolution(5)  *  4,  
                                                         Cdb_xyz_resolution(5)  *  4)  AS  cell)  
    SELECT  x,  
                 y,  
                 Array_agg(c)  vals,  
                 Array_agg(d)  dates  
    FROM      (SELECT  St_xmax(hgrid.cell)                                                                                        x,  
                                 St_ymax(hgrid.cell)                                                                                        y,  
                                 Count(i.cartodb_id)                                                                                        c,  
                                 Floor((  Date_part('epoch',  built)  -­‐  -­‐10418716800  )  /  32837875)  d  
                   FROM      hgrid,  
                                 us_po_offices  i  
                   WHERE    St_intersects(i.the_geom_webmercator,  hgrid.cell)  
                   GROUP    BY  hgrid.cell,  
                                       Floor((  Date_part('epoch',  built)  -­‐  -­‐10418716800  )  /  32837875)  
                 )  f  
    GROUP    BY  x,  
                       y
    packing SQL
    Monday, January 14, 13

    View Slide

  50. {
       rows:  [
       {
           x:  0,
           y:  0,
           vals:  [2],
           dates:  [457]
       },
       {
           x:  1,
           y:  0,
           vals:  [1,1,4],
           dates:  [2,3,4]
           }
       ]
    }
    Monday, January 14, 13

    View Slide

  51. 1
    10
    100
    1000
    3mb 70mb 300mb
    1.5
    2
    1.2
    300
    70
    3
    Raw Datacube
    Payload sizes
    Simon Tokumine
    Monday, January 14, 13

    View Slide

  52. http://goo.gl/TsGsr
    Monday, January 14, 13

    View Slide

  53. growing
    Monday, January 14, 13

    View Slide

  54. SVG
    SVG
    #3
    Monday, January 14, 13

    View Slide

  55. D3 + CARTODB SQL
    Monday, January 14, 13

    View Slide

  56. CartoDB.js SQL
    Monday, January 14, 13

    View Slide

  57. simple
    Monday, January 14, 13

    View Slide

  58. simple
    Monday, January 14, 13

    View Slide

  59. d3.geo = so cool
    Monday, January 14, 13

    View Slide

  60. Monday, January 14, 13

    View Slide

  61. Monday, January 14, 13

    View Slide

  62. D3 + CARTODB SQL
    Monday, January 14, 13

    View Slide

  63. growing
    Monday, January 14, 13

    View Slide

  64. SVG
    TopoJSON
    #3.5
    Monday, January 14, 13

    View Slide

  65. Monday, January 14, 13

    View Slide

  66. Monday, January 14, 13

    View Slide

  67. Raw GeoJSON
    9.1MB
    Monday, January 14, 13

    View Slide

  68. SHAPEFILE
    3.5MB
    Monday, January 14, 13

    View Slide

  69. Raw TopoJSON
    1.7MB
    Monday, January 14, 13

    View Slide

  70. topojson
    Monday, January 14, 13

    View Slide

  71. topojson
    Monday, January 14, 13

    View Slide

  72. Monday, January 14, 13

    View Slide

  73. testing
    Monday, January 14, 13

    View Slide

  74. growing
    Monday, January 14, 13

    View Slide

  75. SVG
    Writable Tables
    BONUS
    Monday, January 14, 13

    View Slide

  76. Monday, January 14, 13

    View Slide

  77. Monday, January 14, 13

    View Slide

  78. Monday, January 14, 13

    View Slide

  79. Monday, January 14, 13

    View Slide

  80. Monday, January 14, 13

    View Slide

  81. THE FUTURE OF CARTODB
    IS JAVASCRIPT
    Monday, January 14, 13

    View Slide

  82. @ANDREWXHILL
    Monday, January 14, 13

    View Slide