Визуализация графика и Neo4j

До сих пор мы узнали, как настроить Neo4j и запустить его с Neography , как найти друзей друзей и степень разлуки с помощью REST API Neo4j и немного языков Gremlin и Cypher . Тем не менее, все, что мы видели, это вывод текста. Мы еще не «увидели» график, но это скоро изменится.

Vouched содержит график конкретных рекомендаций, которые люди давали друг другу, и визуализирует их. Я извлек визуализацию и разместил ее на github в качестве неовигатора . Вы можете запустить свою собственную визуализацию или посмотреть на этот экземпляр, работающий на Heroku .

Давайте запустим его и запустим, а затем пройдемся по некоторым частям кода.

git clone git@github.com:maxdemarzi/neovigator.git
cd neovigator
bundle install
rake neo4j:install
rake neo4j:start
rackup

Затем посетите localhost: 9292, чтобы увидеть, как он работает.

Веб-сайт является приложением Sinatra только с двумя маршрутами. Домашняя страница и маршрут ресурсов, который возвращает объект JSON одного узла и всех его «соседей следующего узла».

Созданный нами объект JSON будет иметь такую ​​структуру:

{"details_html":"Information which replaces the side panel",
 "data":{
         "id":"the id of the current node",
         "name":"the name of the current node",
         "attributes":[{"id":"id of 1st relationship type",
                        "name":"name of 1st relationship type",
                        "values":[{"id":"the id of our 1st neighbour",
                                   "name":"the name of our 1st neighbour"},
                                  {"id":"the id of our 2nd neighbour",
                                   "name":"the name of our 2nd neighbour"}]},
                       {"id":"id of 2nd relationship type",
                        "name":"name of 2nd relationship type",
                        "values":[{"id":"the id of our 3rd neighbour",
                                   "name":"the name of our 3rd neighbour"},
                                  {"id":"the id of our 4th neighbour",
                                   "name":"the name of our 4th neighbour"}]}]
        }
}

Когда мы заполняем этот объект JSON и передаем его визуализации, мы получаем следующее:

Мы создаем маршрут в Синатре и устанавливаем его для возвращения JSON.

get '/resources/show' do
  content_type :json

От нашего начального узла мы собираемся пройти график на глубину 1 и получить все, кроме нашего начального узла.

neighbours =
  {"order"         => "depth first",
   "uniqueness"    => "none",
   "return filter" => {"language" => "builtin", "name" => "all_but_start_node"},
   "depth"         => 1}

Затем мы получаем наш узел и пересекаем график, используя опцию «fullpath», которая дает нам узлы и отношения.

node = neo.get_node(params[:id])
connections = neo.traverse(node, "fullpath", neighbours)

Мы собираемся разделить наши входящие и исходящие отношения и получить идентификаторы «другого узла», чтобы мы могли связываться с ним.

incoming = Hash.new{|h, k| h[k] = []}
outgoing = Hash.new{|h, k| h[k] = []}

connections.each do |c|
   c["nodes"].each do |n|
     nodes[n["self"]] = n["data"]
   end
   rel = c["relationships"][0]

   if rel["end"] == node["self"]
     incoming["Incoming:#{rel["type"]}"] << {:values => nodes[rel["start"]].
                                                        merge({:id => node_id(rel["start"]) }) 
                                            }
   else
     outgoing["Outgoing:#{rel["type"]}"] << {:values => nodes[rel["end"]].
                                                        merge({:id => node_id(rel["end"]) }) 
                                            }
   end
end

Затем мы объединяем их вместе для создания массива соседей и помещаем их в часть атрибутов нашего объекта JSON.

incoming.merge(outgoing).each_pair do |key, value|
  attributes << {:id => key.split(':').last, 
                 :name => key, 
                 :values => value.collect{|v| v[:values]} 
                 }
end

Затем мы загружаем наш объект JSON с несколькими дополнительными деталями, такими как идентификатор узла, имя и некоторые его свойства.

{:details_html => "<h2>Neo ID: #{node_id(node)}</h2>#{get_properties(node)}",
 :data => {:attributes => attributes,
           :name => node["data"]["name"],
           :id => node_id(node)}
 }.to_json
end

Я расскажу более подробно о том, как визуализация была сделана на FOSDEM 2012 в зале обработки графиков 5 февраля 2012 года в 15:20 в зале здания AW 1.125.

Обработка кредитов — это язык и среда программирования с открытым исходным кодом для людей, которые хотят создавать изображения, анимацию и взаимодействия. Processing.js переносит обработку в браузер. Он написан на JavaScript и использует HTML-элемент canvas. Майкл Ауфрайтер адаптировал библиотеку анимации движения для использования с processing.js и создал радиальный навигатор ( Donut ) для проекта ASKKEN . Майкл дал разрешение использовать Donut, как вам хочется, проверить его удивительную работу с Substance .