ROADS ALIVE – DATA VISUALIZATION
Tech/Tools Used: P5.js/JavaScript, HTML, CSS, Premiere Pro, Photoshop
ABOUT THIS PROJECT:
Roads Alive is a data visualization project which utilizes open data from the City of Kelowna. Specifically, it incorporates data about the city’s numerous roads, employing their unique characteristics such as name, bounds, perceived traffic, and classification to create a visualization that explores the complexity and beauty of urban road networks. Using P5.js, this project visualizes roadways as squiggly lines that vary in thickness based on road class. The lines move in accordance with perceived traffic flow and are represented with different colours for the various types of roads. When a user clicks on a line, they can see information about the road it represents.
PROCESS:
Roads Alive is a web-based project that uses the P5.js language and subsequent libraries to bridge the gap between data and art. While the main portion of the project is written in P5.js, there is also a small amount of plain JavaScript, CSS, and HTML that was used to create the end product. The data set was taken from the City of Kelowna’s OpenData portal and transferred into Microsoft Excel, where Tatum converted the data into a CSV file. From here, Tatum was able to load the data into my project and manipulate it as she saw fit. Once the technical foundation was laid out, Tatum crafted the simulation logic which is as follows:
Movement: The movement of the roads is calculated based on the perceived traffic flow of a particular road class as a sine wave. For example, a highway would likely experience greater traffic flow than a residential (strata) road on average. As such, this is accounted for in the visualization by altering the amplitude and speed of the curve based on the class. Highways have a greater amplitude and lower speed, whereas, strata roads have a smaller amplitude and slower speed. All roads experience a decrease in perceived traffic flow when toggling the day/night switch to night mode.
Colour and Thickness: Colour and thickness are determined based on the road classes in the data set (Strata, Local, Collector, Minor Arterial, Major Arterial, Major Arterial (Multilane), and Highways).
Directional Tendency: Roads that are North/South in directional tendency are drawn vertically in the sketch. Contrastively, roads that are East/West in directional tendency are horizontally in the sketch.