Building a website for the future of computing. We worked hard to migrate a huge and complex database to a new contemporary website. Complete with its own quantum matrix interface.
Before
After
Sketch
Final
How to display a set of complex, interrelated data, in a compact and unique way?
We displayed the filtering options for their data in a counter rotating 3 ringed-matrix, with each element linked via it's parent and child relationships. To facilitate the functional build of this matrix, we utitlised CSS3 and SVG for the frontend, communication via AJAX to a backend database to create the data sets, and retrieve content based on the selected filter options.
Custom CSS3 styles are then applied to colour and size the SVG elements, and apply animation to the matrix rings, and to apply hover and state change events. All of the frontend JavaScript is contained in a 240 line file with comments (less that 1k minified), and the CSS3 in a 140 line file with comments (less that 1k minified)
Click here to see it in action
