Что я узнал о визуализации данных от Хилари Мэйсон из Bit.ly

Именно тогда я решил, что целью моих выходных было заставить ее взломать что-нибудь, что угодно, связанное со сбором данных со мной. Проверьте ее в Твиттере @hmason или на ее сайте @ http://www.hilarymason.com/

Милостиво, она согласилась, и мы установили время и место. В итоге около десяти человек взломали около часа в маленьком кафе здесь, в Сент-Луисе. Я опубликовал окончательный продукт здесь: http://github.com/jcbozonier/Strangeloop-Data-Visualization

и Хилари проводит здесь визуализацию:

Это фон, и вот что из этого вышло для меня.

Собравшись с Хилари, я надеялся получить представление о ее профессиональном рабочем процессе, о том, какими инструментами она пользуется, а также о ее общем подходе и мышлении для ответа на заданный вопрос с ее фу-фью.

Вопрос, над которым мы в конечном итоге решили поработать, был: «Как выглядит социальная сеть Strangeloop в Twitter?» Другими словами, кто с кем разговаривает и сколько? Наша общая ментальная модель для этой проблемы была, по сути, графиком узлов, связанных между собой множеством ненаправленных ребер, которые указывали на то, что эти два человека общались через Twitter. Хилари уже взяла Протовиса вместе с образцом его использования для создания силового макета, поэтому он идеально подходил для ответа на этот вопрос.

Три шага

Сегодня я научился думать об анализе данных как о трех основных шагах или фазах (так как шаги могут стать немного большими).

1. Получить данные — получить данные. В любой удобной форме просто соберите все данные, которые вам нужны, и поместите их на диск. Не волнуйтесь о том, как это красиво и аккуратно.

2. Сократите это — Теперь вы можете взять эту массу данных и начать думать о том, какие их части вы можете использовать. Фаза обрезки — это ваш шанс обрезать данные и немного их сфокусировать. Здесь вы устраняете все аспекты данных, кроме тех, которые вы хотите визуализировать.

3. Гламур — вот где вы выясняете, что вам нужно сделать, чтобы получить ваши данные в визуализируемой форме.

1. Получение данных из Twitter

Чтобы получить наши данные, я написал скрипт, который использовал поисковый API Twitter для загрузки всех твитов, содержащих хеш-тег #strangeloop. Так как данные разбиты на страницы, мой код должен был пройти около 15 страниц, пока он не исчерпал записи Твиттера.

Это код. Это довольно просто, но эффективно.

require 'net/http'

pages_remain = true
number = 1
file_containing_tweets = 'strangeloop_tweets.json'

while(pages_remain)
  open(file_containing_tweets, 'a') { |f|
    Net::HTTP.start("search.twitter.com") { |http|
      response = http.get("/search.json?q=%23strangeloop&rpp=100&page=#{number}")
      
      if response.body == '{"error":"page parameter out of range"}'
        pages_remain = false
      else
        f.puts response
        number += 1
      end
    }
  }
end

require 'json'

def get_file_as_string(filename)
  data = ''
  f = File.open(filename, "r")
  f.each_line do |line|
    data += line
  end

  return data
end

def get_strangeloop_tweets
  text_file_containing_tweets = 'formatted_tweets.json'
  raw_json_text = get_file_as_string text_file_containing_tweets
  tweets = JSON.parse(raw_json_text)
  
  return tweets
end

Edge = Struct.new(:from, :to)

def get_tweep_connections_from tweets
  tweep_edges = {}
  tweets.each{ |tweet|
    tweep = tweet['from_user']
    to_nodes = extract_all_tweeps_from tweet
    
    if to_nodes.length > 0
      to_nodes.each{ |node|
        raise "node is blank!!" if node == ''
        edge_a = Edge.new(tweep, node)
        edge_b = Edge.new(node, tweep)

        if tweep_edges.has_key? edge_a
          tweep_edges[edge_a] += 1
        elsif tweep_edges.has_key? edge_b
          tweep_edges[edge_b] += 1
        else
          tweep_edges[edge_a] = 1
        end
      }
    end
  }
  
  return tweep_edges
end

import json, re

RE_MENTION = re.compile(r'@(\w+)')

f = open('formatted_tweets.json')
tweets = json.load(f)
f.close()

graph = {}

for tweet in tweets:
    from_user = tweet['from_user']
    for m in RE_MENTION.finditer(tweet['text']):
        to_user = m.group(0)[1:]

        pair1 = (from_user, to_user)
        pair2 = (to_user, from_user)

        if pair1 in graph:
            graph[pair1] += 1
        elif pair2 in graph:
            graph[pair2] += 1
        else:
            graph[pair1] = 1

for key, value in graph.items():
    print "%s, %s, %d" % (key[0], key[1], value)

var miserables = {
  nodes:[
    {nodeName:"Myriel", group:1},
    {nodeName:"Napoleon", group:1},
    {nodeName:"Mlle. Baptistine", group:1},
    {nodeName:"Mme. Magloire", group:1},
    {nodeName:"Countess de Lo", group:1},
    {nodeName:"Geborand", group:1},
    {nodeName:"Champtercier", group:1},
    {nodeName:"Cravatte", group:1},
    {nodeName:"Count", group:1},
    {nodeName:"Old Man", group:1}
  ],
  links:[
    {source:1, target:0, value:1},
    {source:2, target:0, value:8},
    {source:3, target:0, value:10},
    {source:3, target:2, value:6},
    {source:4, target:0, value:1},
    {source:5, target:0, value:1},
    {source:6, target:0, value:1},
    {source:7, target:0, value:1},
    {source:8, target:0, value:2},
    {source:9, target:0, value:1}
  ]
};

def create_protovis_data_from tweeps, tweep_edges
  counter = 0
  tweep_index_lookup = {}

  File.open('strangeloop_words.js', 'w'){|file|
    file.puts 'var miserables = {'
    file.puts 'nodes:['
    
    tweeps.each{|tweep|
      tweep_index_lookup[tweep] = counter
      file.puts "{nodeName:\"#{tweep}\", group:1}, //#{tweep_index_lookup[tweep]}"
      counter += 1
    }
    
    file.puts '],'
    file.puts 'links:['
    
    tweep_edges.each{ |edge, strength|
      from_tweep = edge[:from]
      to_tweep = edge[:to]
      
      raise "bad to tweep!!" if not tweep_index_lookup.include? to_tweep
      raise "bad to tweep!!" if not tweep_index_lookup.include? from_tweep
      
      from_index = tweep_index_lookup[from_tweep]
      to_index = tweep_index_lookup[to_tweep]
      
      file.puts "{source:#{from_index}, target:#{to_index}, value: #{(2)**strength}},"
    }
    
    file.puts ']};'
  }
end