Material Explorer Interface
The material explorer interface was a prototype developed for a work related project which aimed to quantify the experiential attributes of materials, colors, and scents. This project is associated with the chemical descriptor analysis article. The goal of this interface was to create an interactive experience for exploring experiential attributes of materials with dynamic, event responsive graphics. While this prototype only reached proof of concept, the effort to develop the interface was a fruitful exploration into D3.JS, concepts of data-binding and event listeners. For this prototype, I used a custom made dataset of Pantone colors with dummy experiential data associated with each color. The dataset contained around four thousand unique colors, each of which had experiential categories pertaining to stimulation, scale and temperature.
Interface Components
The interface consists of two main components, the material selector and the material attribute display. The material selector represents the colors in the dataset as dots in an RGB space color model, where R,G and B are used as the X, Z and Y coordinates of the point. The Display converts the 3D color space model to a 2D plane as if the user were looking into the color space model from above. The user can use their mouse to select colors simply by clicking on them in the material selector window.
The attribute display, visualizes the attributes of the selected color as a spider graph. Each time the user clicks on a color a new filled polygon which represents the attributes of the color is added to the spider graph. If the user hovers over a filled polygon, the attributes of the respective color are displayed as text in the upper left corner of the attribute display window.
To make the interactions feel more dynamic and responsive, materials and filled polygons are highlighted on mouseover events.
To remove filled polygons from the spider graph, the user can click the "clear spider graph" button in the upper right corner of the attribute display window. On click events, the most recently added data will be removed from the spider graph.