Visualizing the LA Skyline over time with a 3D, dynamic bar graph | JavaScript, WebGL
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
materialize
LA_Skyscrapers.css
LA_Skyscrapers.csv
LA_Skyscrapers.js
MV.js
README.md
index.html
initShaders.js
webgl-utils.js

README.md

LA Skyscrapers

Visualizing the Los Angeles skyline over time with a 3D, dynamic bar graph using WebGL. The project can be found here.

Data

Using the data gathered from here, I was able to gather information about the following:

  • Building height (feet)
  • Year construction began
  • Year construction ended

Description

Buildings are displayed from tallest on the left to shortest on the right.
The current year is visible on the canvas, and the graph grow dynamically as buildings are constructed.
The faster the building was built, the faster the corresponding bar grows on the graph.
A full navigation system was implemented, allowing the user to fly around in 3D space.
Each bar is color-coded depending on when the building was constructed. (Legend shown on page)

Screenshots

alt tag