index.html.haml

!!!
%html{:lang => "en"}

%head
  %title="Dots on the Bus Demo"
  %link{:href => "/img/favicon.png", :rel => "icon", :type => "image/png"}/
  %link{:href => "favicon.ico", :rel => "shortcut icon"}/
  %link{:href => "/styles/leaflet.css", :rel => "stylesheet"}/
  %link{:href => "/styles/deck.core.css", :rel => "stylesheet"}/
  %link{:href => "/styles/bootstrap.min.css", :rel => "stylesheet"}/
  %link{:href => "/styles/presentation.css", :rel => "stylesheet"}/

  %script{:src => "/javascript/d3.js", :type => "text/javascript"}  
  %script{:src => "/javascript/underscore.min.js", :type => "text/javascript"}
  %script{:src => "/javascript/jquery-1.9.1.min.js", :type => "text/javascript"}
  %script{:src => "/javascript/leaflet.js", :type => "text/javascript"}
  %script{:src => "/javascript/topojson.js", :type => "text/javascript"}
  %script{:src => "/javascript/bootstrap.js", :type => "text/javascript"}
  %script{:src => "/javascript/utils.js", :type => "text/javascript"}
  %script{:src => "/javascript/deck.core.js", :type => "text/javascript"}
  %script{:src => "/javascript/presentation.js", :type => "text/javascript"}  
  %link{:href => "http://fonts.googleapis.com/css?family=Coustard", :rel => "stylesheet", :type => "text/css"}/  
  %meta{:content=>"width=device-width, initial-scale=1.0", :name=>"viewport"}
%body
  
  
  %section.intro
    .row
      .span8.offset2
        %h1 Dots on the Bus
        %h2 
          a transit viz. by
          %a{:href=> 'http://adamgreenhall.com'}Adam Greenhall
          ,
          %a{:href=> 'http://ameliagreenhall.com'}Amelia Greenhall
          , &
          %a{:href=> 'http://jaredonline.github.com/about/'} Jared McFarland.
          
        %h2.contact
          contact: 
          %a{:href=> 'mailto: hello@adamgreenhall.com'} hello@adamgreenhall.com

  %section.sunrise
    .bus-route
    
  %section.about-data
    .row
      .span8.offset2
        %h1 What would you do with a week of transit data?
        :markdown
          - almost 2M lines of data, 
          - from the transit agencies of SF (MUNI), Geneva, and Zurich 
          - included schedule, actual arrival and passenger count data
          - lasers! (for passenger counts)
  
  %section.idea
    .row
      .span8.offset2
        %h1 The idea
        %img.sketch{:src=>'img/sketches/early-sketch.jpg', :height=>'75%'}
  %section.idea
    .row
      .span8.offset2
        %h1 The idea
        %img.sketch{:src=>'img/sketches/unfurl-orig.jpg', :height=>'75%'}        
  %section.idea
    .row
      .span8.offset2
        %h1 The idea
        %img.sketch{:src=>'img/sketches/unfurl.jpg', :height=>'75%'}        
  %section.idea
    .row
      .span8.offset2
        %h1 The idea
        %img.sketch{:src=>'img/sketches/page-elements.jpg', :height=>'75%'}        
  
  
  
  %section.linear
    .row
      .span8.offset2
        %h1 Run a bus along a line
        .bus-route
  %section.linear-load
    .row
      .span8.offset2
        %h1 Scale the bus by passenger load
        .bus-route        

  %section.passenger-exits
    .row
      .span8.offset2
        %h1 
          Show passengers exiting a bus
          %br
          %small using a transition to random final positions
        .bus-stop
  %section.passenger-arrivals
    .row
      .span8.offset2
        %h1 
          Show passengers waiting for a bus
          %br
          %small using a force layout
        .bus-stop

  %section.passenger-all-together
    .row
      .span8.offset2
        :markdown
          #All together now
          
          1. passengers cluster around the stop
            - *force layout, from random point toward bus stop*
          2. bus arrives at stop
            - *transition from prev. stop*
          3. passengers on bus exit 
            - *transition to random point*
          4. passengers at stop enter 
            - *transition from stop to bus*
          5. bus scales to new passenger load 
            - *size transition* 
          
        
  %section.finished-product
    #iframe
    #next 
      %a{:href=>"#"} ->
  
  %section.sunset.conclusion
    .bus-route
    .row#final-contact
      .span8.offset2  
        %h2 
          We'd love to know what you thought!
          %br
          %a{:href=>"https://twitter.com/ameliagreenhall"} @ameliagreenhall
          ,
          %a{:href=>"https://twitter.com/adamgreenhall"} @adamgreenhall
          and
          %a{:href=>"https://twitter.com/jaredmcfarland"} @jaredmcfarland
        %h2.contact
          email: 
          %a{:href=> 'mailto: hello@adamgreenhall.com'} hello@adamgreenhall.com