Browser SVG Gallery - UI analysis

Browser SVG Gallery
Originally uploaded by ajstarks

This grid shows four modern browsers: Chrome (5.0.307.11) , Firefox (3.6) , Opera (10.10) , and Safari (4.0.5) displaying SVG content generated by SVGo. The browser UI's have been muted to emphasize the content. Some observations:

1) Chrome: shows more "chrome" than any of the others. Lot's of head space with it's tab structure, with an emphasis on the omnibox, but with a minimal number of controls (back, forward, refresh)

2) Firefox: as minimal as it gets, except for the OS X furniture, only minimal tab controls are visible

3) Opera: lots of buttons with space for the address box, but all in a single row

4) Similar to Opera, but with fewer buttons (only back and forward). The big ol' Google box looks conspicuous.

Note that both Opera and Safari allow for all controls to be suppressed so that you are left with pure content:

Processing vs. SVG Go

Processing vs. SVG Go
Originally uploaded by ajstarks

This screenshot compares developing the same graphic using Processing and the SVG Go Library.

Top row: from the left: Processing code, Go Code (in TextWrangler), Command lines to run the Go code

Bottom row: Processing output, Go-generated SVG rendered in Safari and Chrome

The workflow for Processing is familiar: enter code, hit the run button. For Go: edit/write code, move to a shell window, compile, open a browser.
For subsequent runs, just hit refresh in the browser to see the result.

Both methods support rapid prototyping and sketching -- the Go compiles are so fast it's almost the same as hitting the run button in Processing. As you can see the results are identical

In terms of code, both environments are similar -- there is almost a one-to-one correspondence, however SVG and Processing treat ellipse width differently.

I note that the syntax highlighting of graphics functions in Processing tells me at a glance what the program is doing -- this is less apparent with the Go program.

TweetFreq Go Language web Server (wtf): Browser, console, source

wtf is a specialized web server that also acts as client to twitter. wtf acts as a "compiler" for the browser, responding to requests with optimized "pre-cooked" JavaScript canvas directives---think of it as assembly language for the code in the browser that interprets canvas tag data. For example:

C.beginPath();C.arc(799,167,8,0,p2,true);C.fill(); 

draw the markers. All computations like coordinate and object positioning is done by the wtf, not the browser.
Currently, wtf retrieves JSON from twitter. The XML results were over 2 times slower (with a slight loss of data, the JSON results lack the full name of the twitter user).

wtf takes about 5.6 seconds to build a tweetfreq from 10 users
(abcnews,nytimes,wsj,cbsnews,cnn,foxnews,techcrunch,techmeme,arstechnica,slashdot)
consisting of 500 tweets. The bulk of the time is waiting for the
twitter search engine to respond.

wtf responds to requests in this format:

 /users/{userlist}?b={date}&e={date}&c={count}&m={marker-width}&p={picture width}&l={line-width}&s={spacing}

which specify the users and search/graphics/layout parameters

/users/ajstarks,nytimes,%23golang,cnn?b=2009-12-05&e=2009-12-09&c=100&m=12&p=48&l=24&s=60 

builds a visualization of the twitter update frequency for the users ajstarks, nytimes, cnn, and the mentions of the #golang hashtag during the period between December 5-9, 2009 (UTC), up to 100 tweets/user, with a marker width of 12 pixels, a picture width of 48 pixels,
line width of 24 pixels, with spacing of 60 pixels.

Planned updates include support for twitter lists in the form of

/lists/{user}/{listname}

(improved support for authentication in the http package would be
helpful here...)

More on TweetFreq

Parsing JSON and ATOM Twitter Search Results in Go

Parsing JSON and ATOM Twitter Search Results in Go
Originally uploaded by ajstarks

The top chart shows the time a Go program takes to search twitter, parse the results, and output the tweets, varying the number of search results from 10-100. The blue shows the results for JSON, the green for ATOM (XML).

Also depicted is the number of bytes to parsed, and the resulting parsing rate.

The conclusion is that JSON is more efficient; HTTP rates are constant, but JSON requires less data, with less complex data structures to unmarshal. Both methods deliver identical results:

ts -f json -n 10 '#golang'

RT @koizuka: RT @tokuhirom: #golang は C/C++ のかわりにつかうというよりは。python のかわりに使うという領域の方がおおきいんだとおもう
RT @tokuhirom: #golang は C/C++ のかわりにつかうというよりは。python のかわりに使うという領域の方がおおきいんだとおもう

Here is the program: it demonstrates command line parsing, error checking, http processing and unmarshaling both JSON and XML.

// ts -- twitter search
//
// Anthony Starks (ajstarks@gmail.com)
//

package main

import (
 "fmt"
 "http"
 "io"
 "io/ioutil"
 "flag"
 "os"
 "xml"
 "json"
)


type JTweets struct {
 Results []Result
}

type Result struct {
 From_user string
 Text      string
}

type Feed struct {
 XMLName xml.Name "http://www.w3.org/2005/Atom feed"
 Entry   []Entry
}

type Entry struct {
 Title  string
 Author Person
}

type Person struct {
 Name string
}

type Text struct {
 Type string "attr"
 Body string "chardata"
}

var (
 format   = flag.String("f", "atom", "Output format (json or atom)")
 nresults = flag.Int("n", 20, "Maximum results (up to 100)")
 since    = flag.String("d", "", "Search since this date (YYYY-MM-DD)")
)

const (
 queryURI  = "http://search.twitter.com/search.%s?q=%s&rpp=%d"
 outputfmt = "%s \u27BE %s\n"
)


func ts(s string, how string, date string, n int) {

 var q string
 if len(date) > 0 {
  q = fmt.Sprintf(queryURI+"&since=%s", how, http.URLEscape(s), n, date)
 } else {
  q = fmt.Sprintf(queryURI, how, http.URLEscape(s), n)
 }

 r, _, err := http.Get(q)
 defer r.Body.Close()
 if err != nil {
  fmt.Fprintf(os.Stderr, "%v\n", err)
  return
 }
 if r.StatusCode == http.StatusOK {
  switch how {
  case "atom":
   readatom(r.Body)
  case "json":
   readjson(r.Body)
  }
 } else {
  fmt.Fprintf(os.Stderr,
   "Twitter is unable to search for %s as %s (%s)\n", s, how, r.Status)
 }
}

func readatom(r io.Reader) {
 var twitter Feed
 err := xml.Unmarshal(r, &twitter)
 if err != nil {
  fmt.Fprintf(os.Stderr, "Unable to parse the Atom feed (%v)\n", err)
  return
 }
 for _, t := range twitter.Entry {
  fmt.Printf(outputfmt, t.Author.Name, t.Title)
 }
 
}

func readjson(r io.Reader) {
 var twitter JTweets
 b, err := ioutil.ReadAll(r)
 if err != nil {
  fmt.Fprintf(os.Stderr, "%v\n", err)
  return
 }
 jerr := json.Unmarshal(b, &twitter)
 if jerr != nil {
  fmt.Fprintf(os.Stderr, "Unable to parse the JSON feed (%v)\n", jerr)
  return
 }
 for _, t := range twitter.Results {
  fmt.Printf(outputfmt, t.From_user, t.Text)
 }
}

func main() {
 flag.Parse()
 for i := 0; i < flag.NArg(); i++ {
  ts(flag.Arg(i), *format, *since, *nresults)
 }
}

Go vs. Curl for twitter search

Go vs. Curl for twitter search
Originally uploaded by ajstarks

Twitter Search Grid: #artandcode #4

Twitter Search Grid: #artandcode #4
Originally uploaded by ajstarks

TweetFreq: Scobleblog followers

TweetFreq: Scobleblog followers
Originally uploaded by ajstarks