With the world migrating into a more technology-oriented era, the amount of data we use has naturally grown exponentially as well. With additional data, the need to interpret, analyze, and manipulate the data is as prevalent.
The idea originally came as one of our teammates had previously used a visualization software called Gephi. However, in his time using it, the software was limited to a 2D scope and had to use characteristics like size and color to represent other dimensions making it harder to interpret. Additionally, with many data points, the plot soon seemed to look cluttered making it hard to interpret. To make this visualization and interpretation easier, we created DataX.
What it does
Cutting to the chase, our application does 3 things:
- Uses Three.js to create a multi-dimensional representation via the interpretable format previously created.
- Implements dat.GUI for customizable manipulation on the data set such as restrictions and styling.
How we built it
We divided the work into 3 phases:
- Initially, we split into two teams: one that focused on developing the home page of the website and the other that
- Familiarized themselves with three.js.
- Development of the visualization screen.
- Integration between the screens.
Challenges we ran into
- Conversion from the CSV to a readable format like lists and JSON objects.
- Originally, we were planning on using Vue + three.js, however, we later decided against it because while the Vue + three.js library was well done, it was not complete and it lacked enough functionality that we would have had to spend a lot of time implementing it ourselves.
- Finding data that worked well visualized in multiple higher dimensions was difficult as well.
Accomplishments that we're proud of
We are proud of implementing a working product in the time frame. In only 24 hours we created a tool that is functional, sleek, and has application. Also, we are proud of the way we implemented a topic that was completely unfamiliar to all of us in such a short time.
What we learned
Adam - I learned how to use three.js for 3D rendering and dat.GUI for customized controls.
David - I learned very basic spreadsheet manipulation in LibreOffice Calc and I learned how the CSV format works. I learned how to use the CSV package in python.
What's next for DataX
We would like to add in even more functionality in the form of display data restrictions, better visual scaling, and better customizable scaling for the data itself (logarithmic scaling, clamping, linear scaling, etc.).
There are additional images of sample visualizations in the slideshow above.