Course Final Project

Charlotte

Untangling High-Dimensional Data in Web Design

As a design challenge for Wonderland, I was given two hand-drawn sketches to turn into interactive designs in just two days.

Data Viz Web Design UX/UI Research

Specs

IN A NUTSHELL

Context

Final Project in CS448B Data Visualization | Stanford 2013

Creative(s)

Victoria Flores, Maxine Lim, & Cesar Torres

Process

Brainstorming > Research > Data Analysis > Project Proposal > Design Research > Implementation > Web Visualization > Presentation > Paper

Tools

Illustrator, Ruby on Rails, d3.js, JSON, MySQL, and Webzeitgeist Database

Approach

With thousand-length feature vectors describing web design, we used k-dimensional clustering to codefy categories of visual design on the web into 'webs'. After this, we interpreted classical ideas of visual design such as blanace, harmony etc. to depict a complex visual space for concrete user exploration.

Contribution

I collaborated in all phases of development, created all presentation assets, and designed/visualized all svg webs for system.

Deliverable(s)

POSTER | FINAL PAPER PDF

Interaction

At a Glance

Overview

Birds-Eye

Background

Exploring a design space must generally be done by manual inspection of many design examples. Visualizing design data in an aggregate way can make this process more efficient, but as design data lies in a high-dimensional feature space, selecting the important elements to view is challenging.

Charlotte, is a system that enables exploration of Web designs represented in 1,713 dimensions by applying the concept of data portraits and generating visualizations that capture groups of pages with respect to a selected set of design principles. Charlotte demonstrates that meaningful patterns and trends among the design data can explored by using these principles to inform data-driven portraits.

Design

To visualize the distinguishing features of each cluster, we created data portraits using a spider “web” abstraction. Based on the notion that a data portrait can efficiently encode large amounts of disparate data, we used Illustrator to hand-craft web representations of the clusters using seven principle encodings: balance, color harmony, contrast, emphasis, movement, pattern, and rhythm. A subset of these encodings were further used to develop visualizations for the clusters’ data profiles. The web concept is fitting because it invokes the complexity and richness reflected in our data.

To encode these principles into the webs, we computed aggregate statistics for the target cluster using features such as spatial distribution of page elements, dominant color, largest leaf element or average number of siblings in the DOM tree, etc. We then translated these statistics to correspond to visual features on the webs.

Zooming-in

Data Portraiture

'Web'-Design

Balance: is represented by the proximity of radial rings on the web. More rings closer to the center indicates a page that is skewed to the right.

Color: is encoded simply by applying the three dominant colors to a ring on the web.

Contrast: is separately encoded using opacity of a checkerboard pattern in one ring of the web. For example, higher contrast will produce a black and white pattern, while lower contrast tends toward grays.

Emphasis: i s represented by a bolder ring, whose radius represents the amount of emphasis on a page.

Movement: is encoded using a zig-zagging path across the web.

Pattern: is represented by the number of elements on a page; more complex pages will have more cells in the web.

Rhythm: is represented using a series of extended web strings. Besides drawing attention, these webs enable high-level comparisons of clusters from a “zoomed-out” view.

Design Principles

Cluster Diagrams

Contrast & Harmony: For every page in the cluster we selected a palette of the dominant color along with nine others generated by median cut quantization. Swatches for each color were plotted in histograms and grouped by hue, saturation, and lightness.

Movement: To view movement, the path the viewer’s eye follows, site content was omitted to create emphasis on how elements were arranged. For the profile of each page cluster, we used the layout of its centroid, which can be considered a representative example.

Labels: For each cluster we also show the explcit descriptors or labels applied to pages in that grouping as simple text lists. The opacity of each label encodes their relative frequency.

Balance: We computed a balance metric for each Web page by summing up the vertical edges of all elements that fell on the left/right sides. The resulting ratios were then normalized with respect to page area to enable comparisons among different pages.

Unity: We used negative space to loosely approximate unity by reasoning that pages with more negative space would have more distinct groupings of elements and thus be more unified. To compute negative space, we took the background color of each page and computed the area of foreground elements based on a certain threshold.

Charlotte Landing Screen: Web Selection and Label Search

Label Search: Representative 'Web' clusters highlighted by opacity

Aggregated Cluster Data and Single Page Introspection

Wrap-up

Remarks

TBD