DataX

An innovative, adaptive, and novel tool that allows for easily customizable multi-dimensional data representation

Comment

Inspiration

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:

  • Takes your CSV file and converts it to an interpretable format in JavaScript.
  • 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.

Keshav - As a part of this project, I used JavaScript in a web application for the first time. Additionally, I learned how to implement libraries and tools such as Three.js, Papa Parse 5, and yarn.

Ben - I learned HTML and CSS further and implemented them to make a responsive web design. Traditionally, I have never incorporated JavaScript into web pages, but this time I did. Second, I learned how to incorporate the designs and logos I made into the workflow.

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.).

Additional Information

There are additional images of sample visualizations in the slideshow above.

Built With

Share this project:

Updates