Villo! Bikes in Brussels

Legend

  • Turquoise & red markers: A small marker represents a Villo! bike rental station. Stations with a turquoise marker are open, and stations with a red maker are closed.
  • Hexagons: Red = low availability of bikes within the region of the hexagon. Green = high availability of bikes.

User Actions

  • Left click on marker: Open information pop-up / options.
  • Right click on map: Open context menu to add special "counting markers" to count the number of available bikes within a region of the map.
  • Hold + drag counting marker: Move a counting marker to a different location of the map by left clicking (hold) and dragging the marker to a different location.
  • Resolution slider: Below the map there is a resolution slider that changes the size of the hexagons. Especially on higher resolutions, all hexagons within a radius of 250 meters of a Villo! station are coloured with the appropriate number of available bikes for that region.

8

Application output log: 

            

        

    







    

        
Implementation


        

            
Check out the code behind this application!

            
General Info

            

                This application was written using both JavaScript and Stella.
                Particularly all features related to graphics
                are still written in JavaScript for our ease of development as well as performance.
                While Stella has a usable foreign function interface (which is used in this application), it is
                cumbersome to interface with the browser DOM and a plethora of JavaScript libraries.
                Two JavaScript libraries of particular note are
                Uber's h3-js and
                Mapbox GL JS.
                While Villo! data is supplied by the Stella program, h3-js is
                doing all of the heavy lifting to compute the hexagon layer.
            

            
Even when considering the benefits of using JavaScript and its entire ecosystem,
                Stella has a couple of very appealing features that make it beneficial to use compared to
                a traditional programming language.


            
Distributed Bike Rental Stations (Represented by Digital Twins)

            

                The Villo! Open Data API is used to retrieve bike rental stations and their real-time status.
                From this data, for each bike rental station the application creates a "digital twin" actor.
                These digital twins are automatically discovered by the rest of the application via Stella's
                proximity sets.
                In essence, this means that the same discovery mechanism is used for both
                local applications and distributed applications, meaning that our application is agnostic to which
                physical computer the actors are running at.
                If Villo! bike rental stations would be running Stella code as well, this visualization will work
                out-of-the-box.
            

            
Reactive Counting Markers

            

                Users are able to add counting markers to the map which count all bikes within a region.
                The computation responsible for counting the number of available bikes within a specified region
                is written as a reactor.
                This reactor automatically (and efficiently) updates to the correct result whenever:
            

            
    
                
  1. The user changes the location of the counting marker.
    2. 
                
  2. The user changes radius of the counting marker.
    3. 
                
  3. One bike rental station within the radius of the counting marker updates (e.g. because a bike was
                    just rented).
                
    4. 
            

            
Reactors are the key technology that make these kinds of computations both easy to
                write down in code and also efficient.