Comparing width values of two fonts.

  • Full screen scatterplot with glyph width values stacked in the same column.
  • Full screen histogram of two fonts with the same number of glyphs.
  • Full screen histogram of two fonts, one more complete than the other.
  • Full screen histogram comparing all "Letter" glyphs.
  • Histogram broken up into multiple charts. Values were ordered, then displayed
  • Histogram that accounts for glyph sets (Latin-1).
  • Histogram that accounts for glyph sets (A-Z, a-z).
    var chart = Histogram() .width(800) .height(400) .data([font_1, font_2]) .set(sets[init_set]) .metric(metrics[init_metric]) .render();
  • Histogram can be broken up into sets and a particular number of items.
    var chart1 = Histogram() .id("#viz1") .width(800) .height(400) .setRange({ start: 0, end: 99 }) .data([font_1, font_2]) .set(sets[init_set]) .metric(metrics[init_metric]) .render();
  • Histogram can be rotated into horizontal bars
    var chart1 = HorizontalBarsHistorgram() .id("#viz") .width(800) .barHeight(30) .data([font_1, font_2]) .set(sets[init_set]) .metric(metrics[init_metric]) .render();
  • Character map showing percentage of glyph coverage
    var chart = CharacterMap() .id("#viz") .width(800) .charBox({ height: 50, width: 50 }) .data([font_1]) .set(sets[init_set]) .render();
  • Character map showing percentage of glyph coverage. Three font.
  • Character map showing percentage of glyph coverage. Single font.
  • Character map showing percentage of glyph coverage. Single font. With animation to width comparison of the same two glyph sets.
    var chart = Chart() .id("#viz") // or just add your own div, // because its taking over the whole jam?

  • Grid map

    All fonts as lines. Skinny lines.
    var chart = ListOfNames() .id("#viz") .data(font_list.getresult) .render();
  • All fonts as squares.
    var chart = NamesAsBoxes() .id("#viz") .data(font_list.getresult) .render();
  • All fonts as squares. Transition from alphabetical ordering to being ordered by length.
    var chart = NamesAsBoxes() .id("#viz") .data(font_list.getresult) .render(); chart.sort_by('length') .render();
  • All fonts as squares. Zoomable. but not in a particular direciton.
    var chart = NamesAsBoxes() .id("#viz") .data(font_list) .render();
  • All fonts as squares. Zoomable. Still no panning. Introduces type samples in zoomed boxes
    var chart = NamesAsBoxes() .id("#viz") .data(font_list.getresult) .render(); // set by user action, rather // than a setTimeout like before chart.sort_by('width') .render();
  • All fonts as squares. Zoomable. Still no panning. Introduces type samples in zoomed boxes. Color coded by family
    var chart = NamesAsBoxes() .id("#viz") .data(font_list.getresult) .render(); chart.sort_by('width') .render();
  • Looking to implement proper pan/zoom.
    var chart = NamesAsBoxes() .id("#viz") .data(font_list.getresult) .render(); chart.sort_by('width') .render();

  • Radial representation of entire library.

    First cut. Aligned in top left.
    var chart = RadialFamily() .id("#viz") .data(data) .render();
  • Centered. They are all tiny pieces thought.
    var chart = RadialFamily() .id("#viz") .data(data) .render();
  • Centered. Hover makes an element to make it bigger.
    var chart = RadialFamily() .id("#viz") .data(data) .render();

  • Trends in character widths in series.

    Series level comparison of character widths.
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Alpha sorted.
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values.
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values. A-Z, a-z only. Intro the legend.
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values. A-Z, a-z only. Intro the legend. Legend shows +/- from average.
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values. A-Z, a-z only. Intro the legend. Legend shows characters on absolute scale
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values. A-Z, a-z only. Intro the legend. Legend shows characters relative scale.
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values. A-Z, a-z only. Legend shows characters relative scale with characters, absolute scale with bars. Now includes average line.
    Productus
    Turnip RE
    Turnip (sans RE)
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values. A-Z, a-z only. Legend shows characters relative scale with characters, absolute scale with bars. Now includes average line in legend only.
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values. A-Z, a-z only. Legend shows characters relative scale with characters, absolute scale with bars. Now includes average line in legend only. Includes trendline for all values
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values. A-Z, a-z only. Legend shows characters relative scale with characters, absolute scale with bars. Trendlines.
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values. A-Z, a-z only. 'A' and 'a' share a column.
    Also with Productus.
    Turnip RE
    Turnip (sans RE)
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();
  • Series level comparison of character widths. Highlight current character. Average width sort. Shows range of values behind actual values. A-Z, a-z only. Legend shows characters relative scale with characters, absolute scale with bars. 'A' and 'a' share a column. Individual style comaprisons not shown.
    Also in Productus
    Turnip RE
    Turnip (sans RE)
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();

  • Relationship between upper and lowercase characters across a series.

    Charts of styles on A-Z and a-z axis, displaying width differences between characters.
    Also in Productus
    var chart = SeriesCharacters() .id("#viz") .data(data) .render();

    FLOQ data

  • Starting