Martin Krzywinski / Genome Sciences Center / mkweb.bcgsc.ca Martin Krzywinski / Genome Sciences Center / mkweb.bcgsc.ca - contact me Martin Krzywinski / Genome Sciences Center / mkweb.bcgsc.ca on Twitter Martin Krzywinski / Genome Sciences Center / mkweb.bcgsc.ca - Lumondo Photography Martin Krzywinski / Genome Sciences Center / mkweb.bcgsc.ca - Pi Art Martin Krzywinski / Genome Sciences Center / mkweb.bcgsc.ca - Hilbertonians - Creatures on the Hilbert Curve
Tango is a sad thought that is danced.Enrique Santos Discépolothink & dancemore quotes

pragmata: beautiful


Visualizaiton workshop at UBC B.I.G. Research Day. 11 May 2016


visualization + design

ASCII Art—Proportional Spacing, Tone/Structure Mapping and Fixed Strings

contents

  1. ASCII art
  2. proportional spaced fonts
  3. structural character selection
  4. tone-based character selection
  5. fixed string ASCII art
  6. angled text ASCII art
  7. multi-layer ASCII art
  8. recursive ASCII art

download code

asciifyimage-0.02.tgz

This is a Perl script and requires Imager. See README in the archive for instructions. I cannot provide installation support, but welcome questions and ideas about the method.

examples

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Part of the Pioneer plaque rendered with the sequence of human chromosome 1, using 8 weights of Gotham. (zoom)
Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
DNA helix rendered with string 'dna'. (zoom)

After finding a typographic portrait of Christopher Hitchens, created out of Gill Sans letters by Miles Chic at Capilano University, I thought to resurrect software I wrote a long time ago that converts images into letters and expanding traditional ASCII art by using

  • proportionally spaced fonts
  • a variety of font weights in a single image
  • both tone and structure of the image to select characters
  • fixed strings to render an image in legible text

ASCII Art

The representation of images by characters—ASCII art—has a long history. ASCII art extends the emoticon (or smiley) to represent a larger piece of work. Typically, the works use a fixed-space font (e.g. Courier), originally designed for display on a terminal. Despite the sophistication of computer graphics today, ASCII art continues to have a strong following with new work continually added to public online galleries.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Community contributions to ASCII Art Museum. ASCII art can vary from simple cartoon-like depictions to photorealistic interpretations. (source, zoom)

Photos and paintings can be ASCIIfied using a tone-based approach and automated methods exist to do this (Paul D. O’Grady and Scott T. Rickard (2008) Automatic ASCII Art Conversion of Binary Images Using Non-Negative Constraints).

Many artists generate new creations, exclusive to the medium. Typically this kind of ASCII art is based on the interpretation of structure rather than tone—this method has also been automated (Xuemiao Xu, Linling Zhang, Tien-Tsin Wong (2010) Structure-based ASCII Art).

Proportional spaced and multi-font art

I have written code to generate ASCII art from images by using proportional spaced fonts.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Fixed width fonts (e.g. Pragmata) are popular. ASCII art can be extended to proportionally spaced fonts (e.g. Gotham). More than one weight (or font) can be used to add contrast.

Below is an example of how Pragmata and Gotham can be used to different effect to render an image. When a proportional spaced font is used, the ASCII shape can more fully fill the image.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Comparison of fixed and proportional spaced fonts in ASCII art. Employing multiple weights adds contrast. The grey background is added to emphasize the original image. (zoom)

Let's see how these methods work on a real image. Many ASCII art Mona Lisa versions exist. Below, I render the Mona Lisa with Pragmata, Gotham Book and 8 weights of Gotham.

structural character selection

Two-tone shapes like the S in the figure above require selecting characters that match the structure of the image. (e.g. "|" matches vertical lines). For a given character and image position there are four distinct match possibilities—a combination of whether the character and image have a signal at a position. I show this in the figure below.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Finding the best character involves maximizing overlap (s1, s3) and minimizing penalty (s2, s4).

By maximizing scores derived from matches (s1, s3) and minimizing any penalties (s2, s4), a character is identified based on maximal coverage of the image region and minimum coverage of areas that are blank.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Ink artwork, or thresholded bitmaps in which there are only two tone values, are approximated using structural matching. Here I compare the method of O'Grady and Rickard with my naive structural matching. (zoom)

When proportional text is used, edges are better approximated, such as in the Homer Simpson example below which uses Gotham Book.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
For this image, 17pt text matches the detail well. (zoom)

tone-based character selection

Images that are not two-tone require that we match both structure and tone. Structure is approximated by the choice of character, while tone by choice of font weight. To select the best character based on tone, the character's average tone is compared to the average tone of the section of the image to which it is being compared.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Heavier weights are used to match dark areas of the image. (zoom)

It is possible to combine both structure and tone metrics in character selection. Below is an example of how an image with both tone and structure is interpreted as the tone and structure score weights are varied. The balance between these two metrics can be very hard to find—it greatly depends on the image. Tone-based mapping works well when font size is small and the image is viewed from larger distance—in this case, characters play the role of individual pixels with varying brightness. Structure-based mapping works with larger type and closer viewing distance.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
A tone:structure ratio of 1:0.5 works well for the Star Trek logo. (zoom)

Continuous tone bitmaps are an idea application of multi-font ASCII art—images no longer need to be thresholded or dithered.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Applying both tone and structure character selection metrics to a greyscale image. (source, zoom, )

fixed string ASCII art

ASCII art is generated by dividing the image into a grid and finding the letter (the choice of characters is often expanded to include punctuation) that best matches the grid section. Typically, for each grid the entire set of allowable characters is sampled. Instead, we can limit the choice of character by successively sampling from a fixed string.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Fixed string ASCII art limits the choice of characters available at each grid. Characters can be drawn from a short string (e.g. 'ilovegotham') or from a larger corpus (e.g. Wikipedia entry for Mona Lisa). The string can be contiguous within the image, or locally within the font. (zoom)

rendered with the fixed string "monalisa" using 8 weights of Gotham.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Fixed string ASCII art rendering of Mona Lisa. (zoom)
Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
DNA helix rendered with string 'dna'. (zoom)
Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
DNA helix rendered with sequence from human chromosome 1. (zoom)

angled text ASCII art

Things get even more interesting when the text is angled.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
By applying rotations to the input and output images, the image can be approximated by angled text. (zoom)

multi-layer ASCII art

The image can be textured with multiple layers of ASCII art. In the example below, four layers of text are used, each with a different font size.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Part of the Pioneer plaque rendered with the sequence of human chromosome 1, using 4 layers of sizes (17pt, 33pt, 59pt and 93pt) and 8 weights of Gotham. (zoom)

Instead of varying size, the angle of the text can be changed among layers. This results in a pattern reminiscent of a halftone.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Part of the Pioneer plaque rendered with the sequence of human chromosome 1, using 4 layers with different text rotation (-45, -15, 15, 45 degrees) and 8 weights of Gotham. (zoom)

recursive ASCII art

An image can be asciified several times, with each iteration the asciified output of the previous step used as input for the next. At each step, the font size should be reduced to s → √s.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
ASCII, set in Gotham Ultra (zoom)
Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
The above image asciified using 8 weights of 105pt Gotham and the fixed string 'ASCII'. (zoom)
Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
The asciified example above, asciified again using 8 weights of 11pt Gotham and the fixed string 'ASCII'. (zoom)

VIEW ALL

news + thoughts

Pathways

Mon 04-01-2016

Apply visual grouping principles to add clarity to information flow in pathway diagrams.

We draw on the Gestalt principles of connection, grouping and enclosure to construct practical guidelines for drawing pathways with a clear layout that maintains hierarchy.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Nature Methods Points of View column: Pathways. (read)

We include tips about how to use negative space and align nodes to emphasizxe groups and how to effectively draw curved arrows to clearly show paths.

Hunnicutt, B.J. & Krzywinski, M. (2016) Points of Viev: Pathways. Nature Methods 13:5.

background reading

Wong, B. (2010) Points of Viev: Gestalt principles (part 1). Nature Methods 7:863.

Wong, B. (2010) Points of Viev: Gestalt principles (part 2). Nature Methods 7:941.

...more about the Points of View column

Multiple Linear Regression

Mon 04-01-2016

When multiple variables are associated with a response, the interpretation of a prediction equation is seldom simple.

This month we continue with the topic of regression and expand the discussion of simple linear regression to include more than one variable. As it turns out, although the analysis and presentation of results builds naturally on the case with a single variable, the interpretation of the results is confounded by the presence of correlation between the variables.

By extending the example of the relationship of weight and height—we now include jump height as a second variable that influences weight—we show that the regression coefficient estimates can be very inaccurate and even have the wrong sign when the predictors are correlated and only one is considered in the model.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Nature Methods Points of Significance column: Multiple Linear Regression. (read)

Care must be taken! Accurate prediction of the response is not an indication that regression slopes reflect the true relationship between the predictors and the response.

Altman, N. & Krzywinski, M. (2015) Points of Significance: Multiple Linear Regression Nature Methods 12:1103-1104.

Background reading

Altman, N. & Krzywinski, M. (2015) Points of significance: Simple Linear Regression Nature Methods 12:999-1000.

...more about the Points of Significance column

Circos and Hive Workshop Workshop—Poznan, Poland

Sun 13-12-2015

Taught how Circos and hive plots can be used to show sequence relationships at Biotalent Functional Annotation of Genome Sequences Workshop at the Institute for Plant Genetics in Poznan, Poland.

Students generated images published in Fast Diploidization in Close Mesopolyploid Relatives of Arabidopsis.

Workshop materials: slides, handout, Circos and hive plot files.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Drawing synteny between modern and ancient genomes with Circos.

Students also learned how to use hive plots to show synteny.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
Hive plots are great at showing 3-way sequence comparisons. Here three modern species of Australian Brassicaceae (S. nutans, S. lineare, B. antipoda) are compared based on their common relationships to the ancestral karotype.

Mandakova, T. et al. Fast Diploidization in Close Mesopolyploid Relatives of Arabidopsis The Plant Cell, Vol. 22: 2277-2290, July 2010

Play the Bacteria Game

Mon 14-12-2015

Choose your own dust adventure!

Nobody likes dusting but everyone should find dust interesting.

Working with Jeannie Hunnicutt and with Jen Christiansen's art direction, I created this month's Scientific American Graphic Science visualization based on a recent paper The Ecology of microscopic life in household dust.

Martin Krzywinski @MKrzywinski mkweb.bcgsc.ca
An analysis of dust reveals how the presence of men, women, dogs and cats affects the variety of bacteria in a household. Appears on Graphic Science page in December 2015 issue of Scientific American.

We have also written about the making of the graphic, for those interested in how these things come together.

This was my third information graphic for the Graphic Science page. Unlike the previous ones, it's visually simple and ... interactive. Or, at least, as interactive as a printed page can be.

More of my American Scientific Graphic Science designs

Barberan A et al. (2015) The ecology of microscopic life in household dust. Proc. R. Soc. B 282: 20151139.