JavaScript

Goodbye Summer, Hello ITP!

August 31, 2014 by michellechandra in Data Visualization, JavaScript

Looking forward to being back in the incredibly inspiring environment that is ITP – NYU this week!

Last week, I attended a Maptime NYC meetup where Adam Pearce (developer at Bloomberg) walked me through animating with D3.js, and in consequence, improved my understanding of D3 100 million times over. It’s been a slog teaching myself JavaScript and D3 this summer solely through readings, altering code and the occasional Meetup. Having someone explain concepts while working on code was incredibly helpful, and the D3 documentation is making much more sense now.

Here is a US map of my travels created in July using D3:

And a world map with an arc animation effect to connect locations created just last week at Maptime NYC:

There are TONS of resources for learning how to make maps including Mike Bostock’s incredible tutorials, documentation and examples (pretty much everything you can think of to make with D3.js, Mike has made, and nicely coded up for you), meetups including Maptime and GeoNYC, and Scott Murray’s Interactive Data Visualization for the Web.

Looking forward to hopefully finishing these “summer” projects soon, and starting new ones this upcoming semester!

Music Visualizing Experimenting with P5 and JavaScript

July 25, 2014 by michellechandra in Data Visualization, JavaScript

Summer break is almost over! Hard to believe. I went to Eyeo 2014 in Minneapolis in June, visited Yellowstone and the Grand Tetons, and since then, have been hanging out in California teaching myself JavaScript.

I have also been working on a music visualization project with Jason Sigal inspired by star trail photography. The visualization uses p5.js, a JavaScript animation library being developed by Lauren McCarthy and based on Processing, and a sound library Jason is developing for p5 based on the Web Audio API.

musicvisualizer2

Progress on the music visualization has been tediously slow as I have been teaching myself JavaScript in parallel to developing the project. I have been learning JavaScript through a mix of online readings, Lynda videos, and JavaScript workshops held by Girl Develop It San Francisco.

Thankfully, the visualization is finally starting to have a musical quality! The small size of these screenshots dosen’t quite do justice to all the beautiful details of the music visualization. Each ring of circles represents one frequency wave being analyzed via FFT. The size of the circles and color transparency is mapped to the volume of the song. The rings of circles are built over the course of the song, “painting” musically in a sense.

I like the ripply distortion affected to the ring of circles by the changes in the music. For next steps, I want to have the visuals change to beat detection as well as volume, will finesse the colors, and work on emphasizing the distortion to the visuals, and think about more patterns to create beyond radial.

An earlier screenshot of the visualization when it looked more like actual star trail photography (but was boring to watch as fairly static). Used background CSS gradients which faded out with jQuery (DOM manipulation JavaScript library):

Goal is to have this project finished and online by the end of August!

Powered by WordPress - Built by ThemeShift