The other side of Go: Programming Pictures, the Read, Parse, Draw Pattern

Go has proven to be extremely versatile and well suited to back-end tasks, but sometimes you need a picture, and I’ve found that Go works well for generating visuals as well. This post will explore one method for generating pictures (specifically vector graphics) from data using the SVGo package.

The SVGo package API performs a single function: generate standard SVG to an io.Writer. Because of Go’s flexible I/O package, your pictures can go anywhere you need to write: standard output, files, network connections, and in web servers.

SVGo is designed so that programmers can think in terms of high-level objects like circles, rectangles, lines, polygons, and curves, using the program’s logic to manage layout and relationships, while applying styles and other attributes to the objects as needed.

The read/parse/draw pattern

One pattern for generating pictures from your own or Internet sources is the read/parse/draw pattern. The pattern has these steps:

• Define the input data structures and destination
• Read the input
• Parse and load the data structures
• Draw the picture, walking through the structures

Here is a simple example that takes data from XML (using JSON is very similar), and creates a simple visualization in SVG to standard output. Note that for your own data you are free to define the input structure as you see fit, but other sources like Internet service APIs will define their own structure.

Given the XML input (thing.xml).

1
2
3
4
5

	<thing top="100" left="100" sep="100">
    	<item width="50"  height="50"  name="Little" color="blue">This is small</item>
    	<item width="75"  height="100" name="Med"    color="green">This is medium</item>
    	<item width="100" height="200" name="Big"    color="red">This is large</item>
	</thing>

First we define the data structures that match the structure of our input. You can see the correspondence between the elements and attributes of the data with the Go struct: A “thing” has a top and left location that defines the drawing’s origin, along with an attribute that defines the separation between elements. Within the thing is a list of items, each one having a width, height, name, color, and text.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

	type Thing struct {
		Top  int `xml:"top,attr"`
		Left int `xml:"left,attr"`
		Sep  int `xml:"sep,attr"`
		Item []item `xml:"item"`
	}
	
	type item struct {
		Width  int    `xml:"width,attr"`
		Height int    `xml:"height,attr"`
		Name   string `xml:"name,attr"`
		Color  string `xml:"color,attr"`
		Text   string `xml:",chardata"`
	}

Specify the destination for the generated SVG, standard output, and flags for specifying the dimensions of the canvas.

1
2
3
4
5

	var (
		canvas = svg.New(os.Stdout)
		width = flag.Int("w", 1024, "width") 
		height = flag.Int("h", 768, "height") 
	)

Next, define a function for reading the input:

1
2
3
4
5
6
7
8
9

	func dothing(location string) {
		f, err := os.Open(location)
		if err != nil {
			fmt.Fprintf(os.Stderr, "%v\n", err)
			return
		}
		defer f.Close()
		readthing(f)
	}

An important function is to parse the and load the structs —this is straightforward using the XML package from Go’s standard library: Pass the io.Reader to NewDecoder, and Decode into the thing.

1
2
3
4
5
6
7
8

	func readthing(r io.Reader) {
		var t Thing
		if err := xml.NewDecoder(r).Decode(&t); err != nil {
			fmt.Fprintf(os.Stderr, "Unable to parse components (%v)\n", err)
			return
		}
		drawthing(t)
	}

Finally, once you have the data loaded, walk the data, making the picture. This is where you use the higher-level functions of the SVGo library to make your visualization. In this case, set the origin (x, y), and for each item, make a circle that corresponds to the specified size and color. Next add the text, with the desired attributes. Finally, apply vertical spacing between each item.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

	func drawthing(t Thing) {
		x := t.Left
		y := t.Top
		for _, v := range t.Item {
			style := fmt.Sprintf("font-size:%dpx;fill:%s", v.Width/2, v.Color)
			canvas.Circle(x, y, v.Height/4, "fill:"+v.Color)
			canvas.Text(x+t.Sep, y, v.Name+":"+v.Text+"/"+v.Color, style)
			y += v.Height
		} 
	}

The main program kicks things off, reading the input file from the command line:

1
2
3
4
5
6
7
8

	func main() {
		flag.Parse()
		for _, f := range flag.Args() {
			canvas.Start(*width, *height)
			dothing(f)
			canvas.End()
		}
	}

running the program sends the SVG to standard output

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

$ go run rpd.go thing.xml
<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="1024" height="768"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="100" cy="100" r="12" style="fill:blue"/>
<text x="200" y="100" style="font-size:25px;fill:blue">Little:This is small/blue</text>
<circle cx="100" cy="150" r="25" style="fill:green"/>
<text x="200" y="150" style="font-size:37px;fill:green">Med:This is medium/green</text>
<circle cx="100" cy="250" r="50" style="fill:red"/>
<text x="200" y="250" style="font-size:50px;fill:red">Big:This is large/red</text>
</svg>

When viewed in a browser, it looks like this:

Using this pattern, you can build many kinds of visualization tools; for example in my work I have tools that build conventional things like barcharts and bulletgraphs , but also alternatives to pie-charts, roadmaps, component diagrams, timelines, heatmaps, and scoring grids.

You can also generate data from Internet APIs as well. For example, the “f50” (Flickr50) program takes a keyword and generates a clickable grid of pictures chosen by Flickr’s “interestingness” algorithm. f50 uses the same pattern as above, but instead of reading from files, it makes a HTTPS request, parses the XML response, and makes the picture.

1

$ f50 sunset

Generates this response:

1
2
3
4
5
6

	<?xml version="1.0" encoding="utf-8" ?> 
	<rsp stat="ok">
		<photo id="15871035007" ... secret="84d59df678" server="7546" farm="8" title="flickr-gopher" ... />
		<photo id="15433662714" ... secret="3b9358c61d" server="7559" farm="8" title="Laurence Maroney 2006..." ... />
		...
	</rsp>

The f50 program uses the id, secret, farm, server and title attributes to build this picture.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

	// makeURI converts the elements of a photo into a Flickr photo URI
	func makeURI(p Photo, imsize string) string {
		im := p.Id + "_" + p.Secret

		if len(imsize) > 0 {
			im += "_" + imsize
		}
		return fmt.Sprintf(urifmt, p.Farm, p.Server, im)
	}

	// imageGrid reads the response from Flickr, and creates a grid of images
	func imageGrid(f FlickrResp, x, y, cols, gutter int, imgsize string) {
		if f.Stat != "ok" {
			fmt.Fprintf(os.Stderr, "Status: %v\n", f.Stat)
			return
		}
		xpos := x
		for i, p := range f.Photos.Photo {
			if i%cols == 0 && i > 0 {
				xpos = x
				y += (imageHeight + gutter)
			}
			canvas.Link(makeURI(p, ""), p.Title)
			canvas.Image(xpos, y, imageWidth, imageHeight, makeURI(p, "s"))
			canvas.LinkEnd()
			xpos += (imageWidth + gutter)
		}
	}

If you view the resulting SVG in a browser, and hover over a picture, you can see the title, and click on it to get the larger image.