Simple Fourier Transform demo


(Go here to access the interactive visualization:

This little project has kept me entertained over the holidays! I thought it would be useful to come up with a really simple interactive web visualization to illustrate what a Fourier Transform is. And of course, it’s also been a great way for me to get some javascript practice.

It’s a really simple example, and could definitely be improved – with the ability to add more signals, for example. And design improvements.

If you want to check out the code, it’s up on my Github page. I decided to try out Plotly for the graphs, and used bootstrap for the layout.

Wave interference

I’m TAing a marine GIS/ocean mapping course this quarter, and will be teaching a lecture on some aspects of multibeam sonars and the data that you get from them. Which is fun since I haven’t really thought much about multibeam sonars since I worked at a sonar company about 6 years ago.

I was trying to figure out how to explain how a longer array means you can get a narrow beam. It’s all about interference patterns, right? So I wrote a little script in Python (you can access the script directly on my Github page).

Let’s say you have two elements spaced a half wavelength apart. You get something like this, with one main lobe:


Cool – there’s just one main lobe of higher amplitude. But then if you pull those elements just a bit further apart – I’m showing a 5 wavelength separation here – you can see a completely different pattern:


So: the wider separation made more beams and and those beams were narrower. Interesting…. What if we wanted to have just one main beam that we could maybe steer around? (ahem. maybe a little like a multibeam sonar??) The next picture shows a single beam produced by a line of 20 elements, all spaced at half a wavelength apart from each other. This time we’re zooming out a bit – showing 30m x 30m this time. Also this simulation shows what it would look like with a 200 kHz signal – which is a pretty common frequency for a shallow water multibeam sonar.

Beam pattern example

Adventures in javascript


After about two frenzied weeks of muddling through javascript and D3 (and html and css) Helena and I managed to wrap up what I think is a pretty neat D3 visualization of oceanographic data for the class we’re taking.

Check it out here: – just click on the map to see the temperature and salinity profiles. And if you’d like to see what’s going on under the hood (or re-create it from scratch), the whole thing is up on our github page (along with a fairly detailed readme file describing our process).

Helena has done some neat D3 stuff before – check it out on her site here.


I’m back! Maybe?

Let’s see, it looks like my last post was in November 2014. What can I say? Sometimes life gets crazy for a bit. It’s still crazy now, but I’m excited about some things that are happening. For example: I’m nearing the end of my PhD! I’m tentatively planning to defend in the next few months. Also, I’m taking a really fun (and very intense) data visualization class. So far I’ve had a chance to play around with Tableau and Trifacta Wrangler. But the biggest learning curve, but with perhaps the biggest reward (ie. awesome interactive web graphics) is D3. I’m hoping to post some stuff as I learn…

For today, I’m not making my own comic. But Helena sent me a link to this xkcd comic that captures my experience with git so far.