A3-NivayAnandarajah
From CS294-10 Visualization Fa08
Contents |
Selecting Data Domain
Area of Interest
I've chosen to revisit a concept me and a group of engineers developed in a sustainable manufacturing course last semester. The primary goal for the project was to create a tool that would help facilitate sustainable practices between Industrial Designers and Engineers. The problem held that sustainability was a feature tacked on by engineers at the end of the product development cycle. By this point, all that could be done was superficial modifications. The industrial designers had the power to choose the materials but often lacked the knowledge of what materials were sustainable. Hence, starting a conversation between engineers and industrial designers could help introduce sustainability earlier into the product development cycle. The concept that resulted was ecoLook.
Background
ecoLook was made as a design tool to help industrial designers make sustainable decisions along side the insight of engineers. The idea was that:
1.) Industrial Designers would input the aesthetic appearance they desired in the terms they were familiar with
2.) A material comparison would result of the materials that were closest to their aesthetic input ordered by minimal embodied energy
3.) Materials could be added to a compare list
4.) A comparison sheet could be printed
A Mock UI created for sustainable manufacturing project concept
The goal for this assignment would be to actually create a working model that would find and compare materials from a database
Potential Sources of Data
The program CES Edupack 2007 has a large database of embodied energies and various other material properties. Other sources could be material data sheets, and internet databases.
Implementation
Visualization Techniques
There are two major visualization goals. The first would be to showcase the aesthetic input. This will include using a realtime swatch that updates accordingly by encoding values of color, transparency, and sheen. These values must be inputted in a logical way. Simple slider bars from 0-100% could suffice for this. The idea would be to make the input not overwhelming while dynamic to industrial designers.
The second visualization would be the presentation of the material comparison. This would include balancing the level of similarity to aesthetic input with sustainable and design parameters. These parameters include embodied energy, C02 footprint, Recycle Fraction, and Price. These could be presented on a x-y scatter plot, encoding aesthetic match and embodied energy with position, and price with size of the dot. Then the user could be given the option of changing the sustainable parameter of interest. Experimentation with encoding more values using color, hue, and transparency could be tried as long as clarity is maintained.
Storyboard
The story board is modified from the original concept in order to create a tight concept. The ecoLook storyboard is as follows:
1.) User inputs diffuse color, shininess, transparency, and max price and clicks on go to material comparison.
2.) A material comparison page is loaded showing all relevant materials on one x-y scatter plot.
3.) The sustainable quantity of interest can be changed. Additionally hovering the mouse over points gives additional information.
4.) The user can return to the main screen and attempt a different aesthetic input.
This stands as a baseline storyboard. If time permits, more analysis may be added.
Resultant Application
Application can be run here: http://www.kidrising.com/schoolwork/ecoLook/bin-release/ecoLook.html
Tools Used
The ecoLook application was programmed in a combination of MXML and ActionScript using the Flare libraries. Adobe Flex Builder 3 was used to both visually compile the design and code the software.
Flex's MXML libraries proved to be very useful in implementing nice UI components. The built in horizontal sliders, and dropdown menu's were used. The process was very similar to coding a website with additional event listener tags.
Flare's built in libraries made implementing the data input and output reasonable easy. Built in scatter plot visualization libraries, legend creation tools, visibility filters, and linear and log scalers were used. Basic sprites were used often to create any loose end graphic. Combining the flare visualization sprite with the MXML application required a fair amount of prepping. Using a UIComponent box, the two were combined smoothly.
Adobe Photoshop was used to create all graphics.
Data Retrieval
Data was unfortunately not as easy as anticipated to acquire. I had hoped to use the CES EduPack 2007 software. This had decent embodied energy values. However, my student license had expired and it cost an inordinate amount of money to purchase. So I opted for scouring the internet.
A comprehensive list of values for embodied energy and embodied carbon were found at http://people.bath.ac.uk/cj219/. These values were compiled by Geoff Hammond and Craig Jones from the Department of Mechanical Engineering at the University of Bath. From these 400 values, only values that pertain to design were selected.
Values for price, max transparency, and max shininess were found through a wide variety of sources. Some sources had to be postulated and many might not be consistent (price values tend to fluctuate tremendously depending on country and time). In the future, a consistent data source must be used to populate values of price, max transparency, and max shininess. This will atleast give accurate relative values which would make the comparisons reasonable more accurate.
Data was aquired from the following sources:
http://plasticker.de/preise/pms_en.php?show=ok&make=ok&aog=A&kat=Ballenware
http://www.ttiinc.com/page/ME_Materials.html
http://www.ides.com/resinprice/resinpricingreport.asp
Data compiled in excel was then converted to tab delimited text data to read through Flare. The data was then put online at the wiki to be dynamically loaded. The final inputted data can be read here:
http://vis.berkeley.edu/courses/cs294-10-fa08/wiki/images/8/88/EcoLookMatData.txt
Visualization Description
Visualization can be found: http://www.kidrising.com/schoolwork/ecoLook/bin-release/ecoLook.html
The visualization allows industrial designers to input the aesthetic parameters they wish to achieve (in terms of color, transparency, and shininess) and input a maximum price. If they are overwhelmed with these parameters, a quickstart drop down tab can be used to preload parameters for familiar materials. These parameters are dynamically shown on the swatch so designers can see if the parameters match their specifications.
Color was initially intended to be used as an additional parameter to filter values. However, since each material could be processed in a variety of colors, the parameter lost it's effect. It was left simply for the swatch to allow users more accurately match their desired look.
The right side of the application displays graphical data in terms of price vs embodied energy. The material type is encoded using shape and the CO2 emissions are encoded using size. A log scale was chosen to easily represent the wide range of values (measuring values relative to one another was not as important as being able to see and select the full range).
As the user changes the shininess or transparency, the graph dynamically updates only showing remaining materials that meet specified requirements. As price is updated, the graph scales in the Y axis accordingly.
The user can hover over materials to find the material name and exact sustainability information.
Ideally the tool will allow users to quickly select materials that have minimum environmental impact while being in their price range.
Differences between Story Board and Final Visualization
The initial design called for a two page interaction where the user specifies all inputs and then goes to a material comparison page.
Once I realized the powers of Flare, I decided a dynamically loading page would be much more useful. The range of values could be seen in one plot without overwhelming the user. Starting from the full unfiltered data and allowing the designer to slowly parse will give a better feel for the spectrum of data.
As stated earlier, color was not useful as a filtering tool. It was still included for the swatch to allow users more accurately match their desired look.
Additionally, seeing the powers of flare for encoding variables though size and shape, I placed all the attributes on one graph. The original intention was to allow the user to select which attributes they wanted graphed. It was found the data could be reasonably graphed all in one plot.
Source Code
The entire ecoLook package can be found here: http://vis.berkeley.edu/courses/cs294-10-fa08/wiki/images/f/f7/EcoLook.zip
The source code is located in the src folder -> ecoLook.mxml
Commentary on Development Process
Difficulties
I am a mechanical engineer. And I suck at programming. This is an unfortunate but true fact. I haven't taken a dedicated programming course since high school. My background was based mainly off of hobbyist knowledge.
Therefore, my development process consisted of absorbing tutorials word for word, a lot of test applications, and living my weekends in the flex and flare APIs.
Assembling the data base consisted of searching the internet for any bits and pieces of prices data and material properties. A consistent data source is needed to avoid fluctuations.
Creating the basic UI using flex reasonably easy. Making the UI interact with the swatch took some research.
Programming in Flare however was the most overwhelming task due to the lack of resources. Simply adding a legend took me a few hours to figure out.
Now I feel I have a good feel for making use of the libraries of APIs.
Time Management
Due to my inexperience with programming, I probably spent about 30-40 hours on this project. A decent amount of this was just going through tutorials and sample code. Most of it was trying to make sense of Flex and Flare's APIs. I felt like the knowledge was all very useful, and could be easily used for a wide range of internet applications.
