what i’d really like is to make new and interesting visualizations which communicate the results of anlaysis
but for that i need to have or do analysis
but for that i need to have well formatted data
but for that i need to have data period
plotting the sensors in my Android phone with d3.js and three.js
When I saw skataviz I knew I had to try it, I’m into skateboarding and I’m into data viz so it only makes sense. The problem is I don’t spend much time thinking about 3D physics anymore and I’ve never spent much time with hardware sensors. So I decided to start with what I had: my Galaxy Nexus phone and Tributary.
I installed AndroSensor which lets you record the values for all your hardware sensors to a CSV file. I then used Android File Transfer for Mac OS X to copy the file to my machine (for some unreasonable reason you can’t just mount your phone with the latest Android…). Once on my machine I needed to clean up the file, which actually used semi-colons (;) instead of commas (,) to separate values (that would be SSV helllooo :P ).
The fun started when I copied the csv file into Tributary and plotted the data:
I was trying to integrate the accelerometer data over time to get the path that my phone took as I threw it onto my bed. You would expect a parabola but that’s not what I got. So I decided I should improve my understanding of what was going on and look at things with one less dimension, 2D (using d3.js):
This is about the time I hit up my friend and old classmate Geo who has been hacking on Tributary with me and has retained more of his Scientific Computing training than it seems I have. He suggested I drop my phone straight down to minimize the variables, and he also helped me remember how to do Euler integration because I had a couple glaring bugs in my implementation.
We ended up with these 3D examples:
We aren’t exactly finished though, after looking around the internet our approach to determining the path is pretty weak as Euler integration is susceptible to error (and it’s too late in a Saturday afternoon for me to implement an Runge-Kuta 4 in javascript, that exercise is left to the reader). Also we aren’t using the Gyroscope data to compensate for gravity, in fact we aren’t dealing with gravity at all (we should be subtracting 1g from the accel data). I’ve included some links at the bottom of this post for further investigation.
I’d also like to note that I had to change the headers of the CSV to make it more accessible for programming (you can see how in the comments in the code).
I’ve been playing with Cubism.js lately and I tried throwing together a quick horizon plot for the sensors: http://tributary.io/inlet/4242097/
It’s a little janky, but I’m still trying to wrap my head around horizon charts so any feedback is welcome. One cool thing is that I (think) I figured out how to make custom metrics from JSON time series rather than using a Cube or Graphite source.
Further reading:
- http://www.sfonge.com/forum/topic/measuring-movement-accelerometer-and-gyroscope
- http://www.sfonge.com/forum/topic/compensating-accelerometer-data-gyroscope
- Google Tech Talk on Accel/Gyro/Compass sensors and fusing them together
Floating down a Tributary
All aboard! Prepare yourself for a voyage through parameter space as we embark on project Tributary!
Tributary is a web interface for live and responsive visual coding. It includes a code editor and provides some popular javascript libraries for visual programming. The core concept of tributary comes from the inspirational Bret Victor video and the implementation is derived from Gabriel Florit’s water project.
Tributary as a project is aimed at being a learning tool and a playground for visual programming. It has already been useful to me as a rapid prototyping tool for data visualization, and I also enjoy using it to come up with unexpected visual effects and optical illusions. I hope that it can also serve as a great learning tool for those who are new to interactive visual programming in javascript as well.
Now for some technical details!
Tributary uses d3.js and SVG to provide graphics rendering capabilities. All tributary really does is provide an svg element. When the code in the editor is changed, the svg element is emptied and the code is evaluated. The assumption here is that the code will draw something in the svg element. The editor has been modified so that whenever you click on a number or a color string an interactive slider or color picker will pop up. Moving the slider will modify the number and redraw (by re-executing the code for each number change) automatically, allowing you to quickly see how a certain value affects your visualization.
Besides d3, tributary code snippets have access to Underscore.js and Backbone.js as well as jQuery. The code editor is powered by CodeMirror, with the color picker powered by Color Picker and the sliders powered by jQuery UI.
This project excites me everyday, mostly because it makes coding a much more interactive experience which also makes it much easier to code with other people. Because you get instant visual feedback it’s also possible to code live in front of other people in a way that wasn’t exciting before. As a teaching tool your words come alive as you type out the code and as a rapid prototyping tool you can iterate quickly with a domain expert as they suggest changes or ask interesting questions.
I’d like to thank EJ Fox and Kai Chang for their help with this project. If you have a difficult data visualization problem I can’t think of two better people to ask for help!
Posted in code, d3, tech
3 Comments
[dd3] d3.js selection tutorial
This weekend I made a video aimed at people just getting into d3. I use a super simple bar graph to illustrate the fundamental principle of selections with d3. At 13 minutes it’s a little over the 10 minute goal I had, but significantly shorter than my last video!
I hope this is helpful to some. My plan is to make more of these so if you have any requests I’ll try to make a video to address confusing topics. The code is available here. :)
Posted in advd3, code, d3, tutorial
2 Comments
[RTPS] Fluid and Rigid body interaction
My buddy Andrew Young at FSU DSC has made some serious progress with RTPS! He’s implemented rigid bodies with particles and they can interact with the fluid. Watch the video and be amazed as a block of particles splashes, floats and is tossed around by the fluid!
Rigid-body and Fluid interaction with velocity vectors from Andrew Young on Vimeo.
Posted in blender, opencl
5 Comments
Square Circle Spiral Illusion in d3.js
Things have been pretty intense at work the last couple weeks, we are writing hella code (you can see I’ve begun acclimating to the west coast) and a lucky few people have begun using what we’re making! This weekend was a much needed break from programming all day, so what did I do? Code all night.
What you see here is the square circle spiral optical illusion first made popular on the internets by a Dr. Richard Wiseman. What I’ve done is implemented the illusion using d3.js, a powerful javascript library for data visualization. I took it a step further and animated it.
You can get the code for the original illusion as well as a live demo. Here is the code for the animated version and a standalone demo here. Feel free to fork and come up with your own variations. Hint: there are several variables we can play with, and a little phase shift is all it takes ;)
Simple D3.js Bar Chart Webcast
So I’ve been diving head first into d3.js and I must say its a mighty fine library! I do feel like getting up to speed with it can take quite a bit of reading and playing, and now that I’ve figured out how to do a couple of things with it I wanted to share how I go about using it. So I made a screencast of myself building a bar chart.
The video is a little long at 40 minutes, and it’s just me, my terminal and the browser, but I do hope it helps people who are just starting get into a d3 frame of mind.
[d3cast] Simple Bar Chart Walkthrough from Ian Johnson on Vimeo.
You can follow along with annotated (commented) javascript or just look at the resulting html/css/javascript while I talk.
As an aside, the annotated javascript was generated with the awesome docco project.
Hope this was helpful, I plan to do more screencasts in the future as I get deeper into d3. Any feedback or suggestions are welcomed!
Posted in advd3, code, d3, tutorial
6 Comments
Go west, young man
Now what I want you to do is visualize yourself… visualizing your data.
Can you see it? Maybe you need some help? Fret not, I’m working on it!
This week I moved from Florida to California to start work at visual.ly where we are building some awesome tools to help you visualize your data. I’m super excited to be in the mix with some of the most talented (and somehow humble) designers and hackers that I’ve ever met. I’m still struggling to accept the reality of a dream come true, after all those years of reading Hacker News I’ve actually gone two full work days hardly browsing it at all! I’ve been learning a lot, both technology and startup wise and it’s way cooler than I imagined.
To top it off, the office is a quaint old brick building in downtown San Francisco, with open space inside and Sushi Burritos right around the corner outside, it’s like I’m in office heaven.
So you wont see as many OpenCL posts out of me in the near future (c’mon WebCL!) but you will see more tutorials and thoughts on the latest in web technologies related to visualization! Right now I’m learning d3.js and backbone.js and all of the curly braces are making me itch for CoffeeScript.
Well, time to get back to coding!
[RTPS] Master’s Thesis Defense Presentation
Hello World!
Today I became a computational science ninja master! Well, maybe not so much the ninja part, but my vim skills are starting to feel like Jedi powers.
This morning I gave an hour long presentation on my work putting a real-time fluid simulator and particle systems into Blender with OpenCL. It’s a pretty high level overview of the whole project, but I do dive into a little bit of math and CS for a few minutes so hopefully there is something for everyone who is interested in the project.
[RTPS] Master’s Defense Presentation from Ian Johnson on Vimeo.
Here are the slides I used (not so great out of context, and I have demos that go with them in the video)
As I’ve now graduated and moving to a sweet new job (more on that in the next post) my Blender and OpenCL dev will have to take a back seat and be more of a hobby. Luckily there are other talented students working with the project and it will be used in the third installment of the Game Design class at Florida State University (where Blender and the Blender Game Engine are used as the primary tool).
Much love to the whole Blender community for all the help and support throughout this project! I can’t thank my advisor, Gordon Erlebacher enough for everything he’s taught me, including how to think like a scientist. It’s the end of an era for me, in one week school will not be starting for me like it has my whole life. I’m excited by what’s in front of me and I feel like I’ve been slingshotted into the future!
LBL Summer Research: Final Report
The summer months certainly fly by, especially when you are running in parallel…
Anyway, the project has culminated in some working code and interesting test runs on the Longhorn visualization cluster. We are using some actual flow data sets, for example this fishtank:
 |
| From LBNL FTLE |
or this “nimrod” simulation
 |
| From LBNL FTLE |
The algorithm was implemented as described in previous blog posts, and will be written up in a paper with the performance results and conclusions we draw. Hank Childs and David Camp made this project possible, helping with everything from design, data handling and constructing an MPI framework. I was also able to use code from my RTPS project to which Gordon Erlebacher is a major contributor.
We have run studies where we fill most of the 4GB of available GPU memory, which we can scale up to more nodes with big enough data sets. One thing I really like from this project which Hank introduced me to is Gantt charts.
 |
| From LBNL FTLE |
They are a way of showing how much time each process spends on different parts of the algorithm. This one isn’t labeled, I just like the way it looks. I think I will need to do a whole separate blog post on Gantt charts.
I’d like to thank everyone in the Vis group at LBL for a fun and very educational summer! I’m back at DSC ready to put some lessons to good use in the particle code :D
@enjalot
+Ian Johnson