Introducing new chart types

This page is used to study the effectivity of introducing new chart types to a blind individual, by comparing a direct approach to a gradual approach (starting from a known chart type and explaining the transitions).

Sequence Logo

Data

Here is the data.

Direct introduction

Tasks

Chart

Description

Imagine a sequence logo plot as a series of vertical bars that are stacked on top of each other, where each bar represents a position in a sequence. Here’s how you can visualize and draw it:

  1. Vertical Bars: The chart is made up of vertical bars, each corresponding to a position along the x-axis (labeled from 0 to 9 in your case). These bars represent the data at each position.
  2. Stacked Segments: Each bar is divided into colored segments. The segments represent different types of data: The height of each segment in the bar corresponds to the proportion of that letter at that position.
  3. Ordering of Segments: Within each bar, the segments are ordered from the highest proportion at the top to the lowest at the bottom. So, if A is the most frequent letter at a position, the green segment will be on top.
  4. Bar Height: The total height of each bar represents the sum of all segments (A, G, C, T) at that position, reflecting the total value for that x-coordinate.
  5. Information Density: The overall height of the bar reflects the total amount of information at that position, which can vary from position to position.
  6. Visual Pattern: As you move from left to right across the x-axis, you'll see variations in the height and color distribution of the segments in the bars, reflecting changes in the data.
In summary, each vertical bar has stacked colored segments that show the frequency of different letters at each position, ordered from most to least frequent. The height of the bar indicates the total value at that position.

Pause here to sketch the chart.

Gradual introduction

We now introduce the sequence logo in three steps. We start with a bar chart, then transition to a stacked bar chart, before introducing the sequence logo. Base the sketches for these charts solely on the descriptions you hear here, and not on the previous description.

Tasks

For each gradual chart, first read the description, then sketch the chart. The tasks are the same as in the direct approach. They are repeated here.

Bar Chart

Chart
Description

Imagine a series of vertical bars arranged side by side on a horizontal axis. Each bar represents a different position along the x-axis, from 0 to 9. The height of each bar corresponds to the total value for that position, given by `y_total`. Visual Elements:

  1. X-Axis: A horizontal line at the bottom, labeled from 0 to 9.
  2. Bars: Ten vertical bars, one for each x-value. The height of each bar corresponds to the value of `y_total` for that x-position. Each bar is the same color, black, and its height varies based on the `y_total` value.

Pause here to sketch the chart.

Stacked Bar Chart

Chart
Description

To transform the bar chart into a stacked bar chart, you break each black bar into four segments stacked on top of each other, with each segment representing a different letter: A, G, C, and T. The height of each segment within a bar corresponds to the value of A, G, C, and T, respectively.

Visual Elements:

  1. Bars: The bars remain vertical and side by side. Each bar is divided into four colored segments:
    1. Green Segment: Represents A.
    2. Yellow Segment: Represents G.
    3. Blue Segment: Represents C.
    4. Red Segment: Represents T.
  2. Order: The segments are stacked from bottom to top in the order of A, G, C, and T.

Pause here to sketch the chart.

Sequence Logo

Chart
Description

In a sequence logo plot, each position along the x-axis is depicted as a stack of letters, with the height of each letter representing its frequency. The letters are arranged in order of their predominance, with the most frequent letter at the top.

Visual Elements:

  1. X-Axis: A horizontal line labeled from 0 to 9.
  2. Stacks: At each x-position, you have a vertical stack where each letter is represented by a different height:
    1. Green (A)
    2. Yellow (G)
    3. Blue (C)
    4. Red (T)
  3. Ordering: The letters are stacked in order of frequency, from most frequent at the top to least frequent at the bottom.
  4. Height Representation: The total height of the stack at each position is proportional to the `y_total` value, and the relative heights of the letters show their frequency at each position.

Pause here to sketch the chart.

Interactive introduction

Pause here and review all previous charts while getting feedback about whether visual elements are correct.

Circos Plot

Data

Since the dataset used to create the Circos plot is large, it is not easily browsed. Therefore, it is omitted.

Direct introduction

Tasks

Chart

Alt is omitted on purpose for this study

Description

Imagine a circular chart resembling a clock face, called a circos plot. Envision this plot as a ring divided into several sections, each representing a different segment of a genome, like different hours on a clock. Around the outer edge of this ring, imagine a series of vertical bars forming a bar chart. These bars represent counts of genomic features and vary in height. Some are tall, while others are short, creating a jagged, uneven ring of bars encircling the plot. Inside this outer ring, within the main circle, there are numerous lines connecting different sections of the ring. These lines come in two types: gray lines and colored lines. The gray lines are more numerous and connect different segments of the genome, showing relationships between pathway genes. These lines crisscross the interior of the circle, forming a complex web of connections. In addition to the gray lines, there are also colored lines inside the circle. These lines are fewer but more vivid, representing highly similar genomic regions. They stand out against the gray lines due to their bright colors and also connect different segments of the genome, forming distinct, colorful arcs. In summary, a circos plot features a ring with a bar chart around the outer edge, while the inside of the ring is filled with a web of gray lines and colorful arcs, illustrating connections and similarities between different genomic regions.

Pause here to sketch the chart.

Gradual introduction

Rectangle

Chart
Alt is omitted on purpose for this study
Description

Imagine a long, horizontal black rectangle. This rectangle is a solid color and stretches wide across your drawing area. Along the top edge of this rectangle, evenly spaced, are the names of the human chromosomes. These names are simple labels, starting from "1" on the left side and progressing sequentially to "22," followed by "X" and "Y" towards the right side. Each name is written in a small, clear font, positioned directly above its corresponding section of the rectangle.

Pause here to sketch the chart.

Ideogram

Chart
Alt is omitted on purpose for this study
Description

Now, envision transforming this black rectangle into a series of individual segments. Each segment represents one of the human chromosomes. To do this, draw vertical lines from the top to the bottom of the rectangle, splitting it into distinct sections, each one labeled with a chromosome name. The length of each segment corresponds to the relative size of the chromosome it represents. This creates a visual map of the chromosomes laid out in a linear sequence.

Pause here to sketch the chart.

Ideogram with barchart

Chart
Alt is omitted on purpose for this study
Description

Next, imagine drawing a bar chart directly above each chromosome segment. The bars vary in height, corresponding to different counts or values. Each bar is positioned directly above its respective chromosome segment. The height of each bar represents data counts related to that chromosome. For example, if chromosome 1 has a high count, its bar will be taller compared to chromosome 2 if it has a lower count. This creates a combined visual of the ideogram with a bar chart above it.

Pause here to sketch the chart.

Circular ideogram with barchart

Chart
Alt is omitted on purpose for this study
Description

Now, visualize bending the entire structure into a circle. The linear ideogram and the bar charts above it form a continuous loop, creating a circular shape. The chromosome segments curve around the circle's circumference, maintaining their relative sizes and positions. The bar charts also curve outward, forming a ring around the ideogram. The result is a circular layout where the chromosome names and segments are on the inner side of the circle, and the bar charts extend outward, forming an outer ring.

Pause here to sketch the chart.

Circos with gray lines

Chart
Alt is omitted on purpose for this study
Description

Imagine drawing connections within the circular ideogram. Inside the circle, there are thin, gray lines connecting different chromosome segments. These lines represent pathway genes, showing relationships between specific positions on different chromosomes. The lines vary in length and curve smoothly, connecting various points around the inner circle, resembling a network of pathways or threads linking different genomic regions.

Pause here to sketch the chart.

Circos with gray and colored lines

Chart
Alt is omitted on purpose for this study
Description

Finally, enhance the plot with additional colored lines. Alongside the gray connecting lines, add thicker, colored lines inside the circle. These colored lines represent highly similar genomic regions. Each line has a distinct color, such as red, blue, green, or yellow, indicating different similarities. These colored lines also connect various chromosome segments, weaving through the gray lines, creating a vibrant and complex web of connections within the circular ideogram. The final plot is a detailed, colorful representation of genomic relationships, with both gray and colored lines illustrating different types of connections.

Pause here to sketch the chart.

Interactive introduction

Pause here and review all previous charts while getting feedback about whether visual elements are correct.