[understanding networks week 2] Traceroute Commute


(See the project here.)

For me, the most fascinating part of learning the traceroute command this week was the idea that each IP address the packets move through is tied to a physical place in the world. It was interesting to see the common network providers in the sites I regularly visit, but I became mostly curious about the locations they were associated with.

I decided to trace three websites of places that I have regularly commuted to in real life, including ITP (Greenwich Village), and my two most recent jobs at The New York Times (Times Square) and Kickstarter (Greenpoint). All three of these places are located in New York City, but running a traceroute shows that the packets bounced around to more far-reaching places in order to get to their respective websites.

I started by running the traceroute command in my command line:


I then used Maxmind to find the associated coordinates and other info based on IP addresses:


I then put all that data in a CSV file, which I changed into JSONs to make the data easy to work with.

From there, I used the Google Maps API to build a little page that would find a streetview location for every IP address passed through during the traceroute for itp.nyu.edu, kickstarter.com and nytimes.com.

The result is a sort of internet “commute” for the places that I have physically commuted to.


Of course these places aren’t exactly “accurate,” but it’s interesting, for example, that the last stops for both nytimes.com and kickstarter.com are in Seattle, probably because Amazon is there.

One note: I think it’s kind of funny how much more time my real world commute takes than this cyber commute, in spite of ostensibly shorter distances.

Anyway, this was a fun exercise in making the internet feel a little more physical.

The project is here, and the code is below.


[wdwod week 4] tsa claims, an attempt

I didn’t finish the assignment this week, sadly. I was trying to work with this TSA Claims Data, and spent awhile manipulating the data so that it would sum the total claims per airline. I got it to look like this (which involved figuring out how to change NaN to 0):

Screenshot 2016-04-21 10.07.48

But I couldn’t figure out how to then extract each element in the code. I’m sure this is a simple problem but I didn’t have time to fix it and make a visualization this week. 😦



[web dev with open data week 3] cheaters by religiousness

Screenshot 2016-04-13 22.14.00

(See the visualization here.)

This week we dove a little into D3.js (which made manipulating SVG quite a bit easier). I decided to use this very old dataset about extramarital affairs. There were a number of different things in the data, but I looked specifically at how religious people reported themselves to be, and what percentage of people with the same levels of religiousness had cheated on their spouse.

Originally, I had visualized it by number of people in each category, but since was a disparity between how many people were in each religiousness group, I thought showing the percentage would be more interesting.

But I also didn’t want to completely lose the info with the sheer number of people in each category. (For example, the “somewhat religious” group was much larger than the “anti religious” group). So I added an effect so that when you hover over a bar, it changes color and tells you how many people were in each category.

Screenshot 2016-04-13 22.15.28Screenshot 2016-04-13 22.15.44

(The screenshots above remove the cursor for some reason but you get the idea.)

One note is that I realize “cheaters” might not necessarily be an accurate word for what’s going on. There’s some nuance in what exactly “extramarital affair” means, and it doesn’t always mean that someone is going behind the back of their spouse without their knowledge. I’m making some assumptions about this 1969 survey, though – that the people are referring to cheating and not ethical non-monogamy.

Anyway! You can check it out here. Code is also below.

We were also asked to take a look at I Quant NY this week. I looked specifically at this post called “Parking Immunity? Diplomats Owe NYC $16 Million in Unpaid Parking Tickets. A Closer Look at the Worst Offenders.” The writer looked at a dataset showing unpaid parking tickets in NYC, and found something interesting — license plates of diplomats seemed to rack up the highest number of unpaid tickets.

I thought this was a clever insight gleaned from the data, but I am curious to know how Ben manipulated the data to get the info he ended up with. He writes:

Whats not so cool is the fact that the City loaded many rows of the data in there twice accidentally.  That meant there were multiple rows with the same ticket number and conflicting outstanding debt amounts.  Though I understand that data errors happen, I don’t understand how the City can keep putting out data sets with no ownership and no effective way to send in fixes.  A city who cares about the usability of its Open Data can do better.

He then says he “cleaned up” the data. But I wish I knew more about what he did to change it, and how he knew for sure there the duplicates were accidents.


[live web week8] recreating an older socket project with webrtc

Screenshot 2016-03-30 10.06.00

Screenshot 2016-03-30 10.06.07

(URL here.)

This week, I simply recreated the chatroom I made a few weeks back using peer.js instead of socket.io. The difference now is that you have to call the other person/people, but otherwise it works in the same way. Much more simple, but maybe less interesting?


[live web week 6] midterm: swap chat

Screenshot 2016-03-09 10.26.21

Try Swap Chat here.

For my midterm, I made a chat room that takes a picture of somebody else in the room whenever you submit a message. I built it off of the Face Chat from the other week.

One of the first things I added was a thing to tell you how many other people are currently in the room. I kept track of the client count in a variable in the server-side code, and added to it every time a new person joined the room. Once they disconnected, I removed a number, and I sent this updating number over to the client-side, which shows it on the page.

In order to take a picture of a different person in the room, I made an array of all the clients’ socket IDs, and added someone’s ID once they joined, and then removed them once they left.

I knew I had to pick a random ID from the ID array in order to take a picture of that person, but I didn’t want the user getting themselves, so I made another array called notMe[] of all the IDs in the room except for the user’s own ID on the client side. Then sending a message looked like this:

function sendmessage(message, randoPicked) {
//pick a random person each time
randoPicked = notMe[Math.floor(Math.random() * notMe.length)];
socket.emit(‘chatmessage’, message, randoPicked);

From there, I executed the picture-taking code, and added that photo to the text that the original user sent.

There were a couple other extra things I added in order to make the chat experience a little better, like the floating text box, and the auto-scrolling to the bottom of the page once new data is added.

There are still a lot of CSS related things I’d want to change so that it looks better, but getting all my divs lined up properly is a task beyond me right now. I also want to add something that prevents people who don’t allow a camera on the page to not be able to access the content.

Screenshot 2016-03-08 21.07.34

I’ve only tested it myself with two cameras, so we’ll see what happens once more users try it……

See Swap Chat here.

[live web week 4] face chat

Screenshot 2016-02-24 00.04.24

(The url for this project is here. If I’ve turned off the server, it won’t be currently running.)

Building off of the chatroom I made the other week, I added a feature that takes a picture from your webcam once you submit your message, and posts them together. It was tricky to get it up and running, and I had a lot of problems managing divs, but it looks like it generally works.


Screenshot 2016-02-24 00.46.49

Sometimes the images don’t post, and I’m not entirely sure why. Also the formatting of the whole thing leaves a lot to be desired. But I’m glad I managed to get it to generally do what I wanted it to. I’m interested in bringing this one a little further…hopefully I can continue working on this.


[live web week 3] a broken drawing thing

Screenshot 2016-02-16 22.26.00

Things did not go well for me this week for this assignment. I had a lot of trouble getting this collaborative drawing page to work, and it still basically doesn’t, even after a fair amount of work. But I figured I’ll just document my code sorrows for now and sort it out at a later time.

My goal was to let two people collaboratively draw in one canvas in different colors, with neither person’s mouse affecting the other’s drawing. This proved harder than I thought it would be. I did manage to get the drawing to only happen while the person is clicking (though it seems wonky), and for the color to be randomized with each page reload.

I made two separate canvases so that each person’s drawing would not affect the other’s. I wanted to later the canvases on top of each other, but I couldn’t get that to work, so I just separated them. Now what happens is that you draw on the left box, and it shows up in the other person’s right box, in your color.

I also made an erase button that should wipe out your own box, but for some reason the image pops back up once you start drawing again.

On the plus side, I do feel like I’m starting to get a hang of how sockets work. I’m far from mastering it, but diving in this week has made me feel like I understand it way more than I did before.

Below is my extremely dysfunctional code.


[live web week 2] chatroom to dispel loneliness

Screenshot 2016-02-09 22.17.38

Well this might be the homework assignment that resulted in the strangest experience for me. I did the assignment to spruce up the chat page and run it on a server in the cloud, and tested it with myself in different browsers when I was done (screenshot above).

Then I did something that was probably not advisable, which was tweeting the URL out to the public.

Suddenly, it got interesting:

Screenshot 2016-02-09 22.49.36

I hadn’t even considered what would happen if there were multiple people on the page chatting at once, but as some indeterminate number of people joined, it became this sort of intimate anonymous chat room.

Then, people started doing things that I didn’t even know was possible:

Screenshot 2016-02-09 23.11.07

(It turns out not disabling HTML/Javascript in the input box allows people do to….a lot of things.)

I’m not sure how many people were on the page or even who they were, but it was fascinating and felt really poignant to me. I didn’t expect to have created this strange little portal on this Tuesday evening.

I decided to shut it down before someone did something to ruin the nice experience:

Screenshot 2016-02-09 23.23.46



[live web week 1] Interactive self-portrait

Screenshot 2016-02-02 18.54.32

(See my interactive self-portrait here.)

I wasn’t sure I’d be able to get this first homework assignment done in time, given that I fell horribly sick this week (as I couldn’t help alluding to in the homework itself), but thankfully I managed to pull it off today. The code will probably not win any awards for efficiency, but I’m happy to have done a simple exercise in “pure” (non-p5) Javascript, HTML5 and CSS.