JDR VI4 for CS725@ODU

Member: Joel D. Rodriguez-Ortiz

Note:

I'm still having problems with the bl.ocks.org preview. I'll have this figured out. Raw Image Link

1. Magnitude as Position on a Common Scale

• Common:
  Channel Type: Magnitude
  Channel: Position on Common Scale
  Marks: Points and Lines

• D3: The goal of the visualization was to demonstrate the effect of manipulating the position channel. This was achieved by placing small marks at different positions and emphasized by using small lines to reinforce the mark's position. The line's guide the eye to the dot's actual position and can be used as relative measurement for comparison with other marks. Even though the position of the mark communicates the actual information the lines play a big role in communicating this information effectively.

• Tableau:
  
  We can achieve the same effect in tableau. Although I was unable to create the distinct marks I was able to create in D3, the different bar positions on a unified scale communicate the same meaning across. Because the bars are rectangular there is no need to draw additional lines for emphasis.

2. Magnitude as an Area on a Common Scale

• Common:
  Channel Type: Magnitude
  Channel: 2 Dimensional Size (Area)
  Marks: Shaded Areas

• D3: The classic example for areas being used as an expressiveness channel feels like the pie chart. I mean, I'm no info vis expert, but initially I was trying to draw sphere's at arbitrary positions to deliberately show how this channel isn't particularly good to communicate magnitude. But at some point I started again trying to figure out which type of idiom could take advantage of expressing areas and I realized the pie chart suits this channel. It tosses away two dimensional positions in favor of a single idea, magnitude. Even if not precisely, you can certainly tell some slices are bigger than others. Briefly, the pie chart demonstrates the use of expressing magnitudes as areas.

  Note this chart is inspired from: https://bl.ocks.org/mbostock/3887235. There was a particularly useful aspect to making this chart. As I dissected the example line by line I was able to realize how to navigate the DOM more fluently using D3. I also learned about inducing false selections to create more elements of a type that already exists. I also learned about D3's different layout types and about the useful SVG path element.

• Tableau:
  
  The same pie chart was made in Tableau. I really, prefer making these in D3. It's a little bit more effort but the amount of flexibility you get has no comparison.

3. Identify as Color Hue

• Common:
  Channel Type: Identity
  Channel: Color Hue
  Marks: Color

• D3: A bar chart like we've done several times allows portraying this channel cleanly. By associating categories to the differnt data items, we can associate each to a different color and demonstrate the use of the identity channel. This dataset is a small sample of a grocery store's fruit stock. Although the dataset is small it demonstrates the use of the color channel by associating each fruit type to a given color. The more challenging part to this chart was making the legend in D3.

• Tableau:
  
  The same effect can be shown using Tableau. However the legend in Tableau was nowhere near as hard as in D3. I still prefer D3 any day of the week though.

4. Identify as Spatial Region

• Common: Channel Type: Identity Channel: Spatial Region Marks: Lines as Specific Containment Areas

• D3: This visualization reads a portion of Pride and Justice from the Gutenberg Project. It then maps the number of words counted that begin with alphabetic characters to a spatial region (area) shown in the visualization. It simuluates finding all the words with the letter "a" and tossing them into the same box, find all the words with "b" and tossing them into the same box, and so forth. Boxes mimic categorical groups an din this visualization areas of containment are explicitly demarcated by lines. Intead of showing all the words found in this box, the count of words found is displayed. Because we already associate the alphabet with a given order and naturally begin from the top left, it's pretty easy to use this visualization to the number of words read from Pride and Justice with the letter "a" or the number of words read with the letter "x". This type of visualization is well suited towards exploring the different categoies

• Tableau:
  
  I wasn't able to mimic exactly the same type of visualization in Tableau, but I was able to produce a table that carries more or less the same effect. Categories are denoted by explicit lines of containment with order of the categories following the natural order of the alphabet.