New York City Subway System Comes Alive in HTML5 & Javascript [VIDEO]

If you live in New York City, you most likely have a love/hate relationship with the subway (one that tends to wander toward “hate” more often than not).

Well, Brooklynite, musician and Google Creative Labs employee Alexander Chen has created a little HTML5/Javascript art project that is sure to put a smile on your face next time you’re crammed into a crazy person’s armpit whilst enjoying the eclectic symphony of children crying on your morning commute.

Conductor, Chen’s recently released project, is an interactive subway map that pulls data from the MTA’s public API to illustrate the motions of the New York City transit system.

Colored lines representing each train move across the screen in accordance with the real cars, and every time they intersect, they produce a “twang!” — like a stringed instrument. You can also “play” the map by tugging on a line with your mouse.

“As a viola player, it was interesting territory to try to replicate that feeling of tugging at a string,” says Chen, who lives off of the G line (known as the “Ghost Train” to locals) in the Greenpoint neighborhood of Brooklyn.

“Once I had that code down, my wife and I were talking about what other things could work, and a subway map came to mind. My friend has a Vignelli map on his wall, and it’s really beautiful.”

“I’ve also always liked the idea of inanimate objects generating music, coming alive,” he adds. “With all of the emphasis on realtime and location-aware technology, I thought it would be interesting to create a website that begins in realtime, but time slowly unravels.”

According to Chen, the map is not wholly accurate — so, New Yorkers, we don’t suggest using it to get to work on time or anything. The train launch time in the lower left is apparently on par with reality, but the map is mostly an exercise in creativity.

“For example, the 8 train and K train, which exist on Vignelli’s map, don’t exist anymore,” Chen says. “So in my world, I run them from 12 a.m. to 2 a.m., like ghost trains.”

You mean like the G?

More About: art, HTML5, javascript, mtv, subway

For more Dev & Design coverage:

This entry was posted in art, HTML5, javascript, mtv, subway, video and tagged , , , , , , , , , . Bookmark the permalink.