Learning d3

I have continued to teach myself D3 and Javascript.  I used D3 for my midterm project in Introduction to Visualization.  The project visualization about my own music listening habits using parallel coordinates.  I had previously created a similar visualization using VTK, but I wanted to improve on it by using D3 to create it.

Original visualization using VTK

D3 allowed more flexibility, because the visualization was not using a rigid class.  Everything was explicitly drawn and based on the data it was given.  I used D3's CSV parser to quickly import the data.  I then ran the data through my own implementation of K-means clustering.  I then drew the lines, axises and other features.  I also included a brush tool to help in analysis.  Below are screenshots of the visualization.

This shows the parallel coordinates with K-means Clustering, where K is equal to 3

K-means clustering takes k random data points.  It then assigns every point to one of these k points.  Then the k points are computer to be the average of all points assigned to it.  This is repeated until the assignment of labels does not change.  Since, K-means starts with k random points, the results are different every time it is run.

The pictures below show the usefulness of  the brush tool.  The clusters overlapped and it was difficult to see them, but the brush tool was able to limit what points were in the foreground.

This is the visualization with k equal to 4 and without the brush tool

This is the same visualization, with the brush tool to limit what points are visible