WIKIзуализируй то, WIKIзуализируй это!

    Добрый вечер Дорогие друзья!

    Недавно, прогуливаясь по просторам бескрайнего интернета, я наткнулся на изумительные работы Криса Харрисона, посидев немного в шоке, я подумал «А сложно ли визуализировать википедию или нет?» и решил попробовать!

    image

    Итак, приступим!


    Приборы и инструменты


    Первым делом надо определиться что мы будем визуализировать и помощью каких средств. И немного изучив что есть и как мой выбор упал на следующие средства:


    Разработчики Wiki API его описали просто отлично, поэтому не стоит переводить описание дословно чтобы понять как вызвать тот или иной метод.

    На хабре уже писали о пакете Graphviz, поэтому я думаю не стоит его повторно описывать. Но я сразу почитав описание языка dot и средств graphviz чуть не начал писать свое формирование .dot файлов.

    Меня выручил модуль python под названием PyGraphviz, который позволяет в удобном виде работать со структурой графа, которая потом пишется в .dot файл.

    Основы


    Итак визуализировать мы будем перекрестные статьи из википедии. Для этого нам потребуется вызвать метод по ссылке:
    ru.wikipedia.org/w/api.php?action=query&format=xml&titles=ЗАГОЛОВОК_СТАТЬИ&prop=links
    где action — это тип метода, format — выходной формат ответа, в нашем случае это XML, prop — запрашиваем перекрестные сcылки links

    на выходе мы получаем следующий ответ:
    1. <api>
    2.  <query>
    3.   <normalized>
    4.    <n from="хабрахабр" to="Хабрахабр"/>
    5.   </normalized>
    6.   <pages>
    7.    <page pageid="340809" ns="0" title="Хабрахабр">
    8.    <links>
    9.     <pl ns="0" title="2006"/>
    10.     <pl ns="0" title="2006 год"/>
    11.     <pl ns="0" title="2007 год"/>
    12.     <pl ns="0" title="Digg.com"/>
    13.     <pl ns="0" title="Linux.org.ru"/>
    14.     <pl ns="0" title="News 2.0"/>
    15.     <pl ns="0" title="Newsland"/>
    16.     <pl ns="0" title="Pligg"/>
    17.     <pl ns="0" title="Slashdot"/>
    18.     <pl ns="0" title="URL"/>
    19.    </links>
    20.   </page>
    21.  </pages>
    22.  </query>
    23.  <query-continue>
    24.    <links plcontinue="340809|0|Блог"/>
    25.  </query-continue>
    26. </api>
    * This source code was highlighted with Source Code Highlighter.


    Который обрабатывается с помощью любого способа DOM или SAX

    Программирование


    Итак для обработки я использовал SAX и наследовал свой класс от xml.sax.handler.ContentHandler:
    class LinksListHandler(xml.sax.handler.ContentHandler):
    Далее переопределяются основные вызовы:
    • startElement
    • endElement


    Процедура работы с запросом имеет следующий вид:
    1. def get_links(page):
    2.   #See wiki api documentation http://en.wikipedia.org/w/api.php
    3.   query_val = { 'action': 'query',
    4.          'prop': 'links',
    5.          'titles': page,
    6.          'format': 'xml'}
    7.   url = wiki_url() + '?' + urllib.urlencode(query_val)
    8.   request = urllib2.Request(url)
    9.  
    10.   verbose_message("Wiki url: " + url)
    11.   try:
    12.     response = urllib2.urlopen(request)
    13.   except urllib2.HTTPError:
    14.     print "HTTP request error!"
    15.     sys.exit(1)
    16.   #verbose_message("Response xml:\n"+response.read())
    17.   lh = LinksListHandler()
    18.   saxparser = xml.sax.make_parser()
    19.   saxparser.setContentHandler(lh)
    20.   saxparser.parse(response)
    21.   
    22.   return lh.links
    * This source code was highlighted with Source Code Highlighter.


    Построение графа


    С помощью модуля PyGraphviz работы производится довольно просто:
    1. def make_wiki_graph(wiki_page, depth):
    2.   gv = AGraph()
    3.   
    4.   page_list = [wiki_page]
    5.   temp_list = []
    6.  
    7.   verbose_message('Create graph for ' + wiki_page)
    8.   pageLinks = get_links(wiki_page)
    9.   gv.add_node(wiki_page)
    10.   for i in range(depth):
    11.     print '>>>> Get '+str(i)+' level'
    12.     for page in page_list:
    13.       list = get_links(page)
    14.       node = gv.get_node(page)
    15.       node.attr['fontsize'] = "%i" % (MIN_FONT*2*(depth - i))
    16.       for link in list:
    17.         verbose_message(page + "=>" + link)
    18.         gv.add_edge(page,link)
    19.         temp_list.append(link)
    20.     page_list = temp_list
    21.     temp_list = []
    22.   return gv
    * This source code was highlighted with Source Code Highlighter.

    Результаты


    Статья «Mathematics» с 4-мя уровнями вложенности
    image
    Статья «Хабрахабр» с 5 уровнями вложенности
    image

    Другие:
    Сократ
    Хабрахабр 3 уровня

    Другие примеры

    Сам скрипт

    Поделиться публикацией

    Комментарии 36

      +6
      ну, это конечно визуализация, но что она показывает?
        0
        перекрестные ссылки от корневой статьи, в принципе можно парсер настроить на любую потребность. Большие карты можно использовать для поиска скрытых корреляций между терминами, но тут все зависит от качества перекрёстных ссылок, а в русскоязычной вики с этим беда ((( сплошные годы…
          0
          А что мешает их фильтровать, например? ))
            0
            ничего не мешает, но часть нужно часть нет, например ссылки типа «Викисловарь» или «Википедия: правила» без проблем, но если искать что то где годы важны то тут фильтр просто их убьет
        +5
        Натолкнуло на мысль сделать навороченный поиск по тегам. Прийдётся на Флеше права морду сделать. Но суть такова, что Ваши схемы в псевдо 3D. Загрухается во влеш первый уровень и разбредаются слова по экрану, при наводе мышкой на одно из слов, остальные темнеют, а выбранный приближается вперёд. В этот момент запрос на сервер и подгрузка ссылок с названиями страниц, на которых встречается слово, выстраиваются вокруг тега. Если навести на ссылку, то она так же приближается, показываются теги и переходы на этой странице. На который тоже можно навести… и так до бесконечности. Получается такое 3D путешевствие по тегам и ссылкам с коротким описанием страниц в стиле кибер-фантастики начала 90-х.
        На счёт практичности пока не думал))) Скорее всего это поможет людям, который сами не знают чего хотят, зайдя на сайт.
          +2
          Хорошая идея, имхо. Сделаете — напишите топик на Хабр, я бы с радостью посмотрел.
            0
            Очень круто, сделайте, пока кто-нибудь другой не сделал.
              0
              есть уже подобное. например тут
                0
                  –2
                  я где-то год или полтора назад в нескольких блогах 3д облака тегов видел такие же — боян! =)))
                  но идея все равно хороша, да и реализовать её можно лучче=)
                    0
                    не сразу понял, почему управление такое неудобное — управление мышью зачем-то инвертировано
                      0
                      Я немного другое предложил. Так сказать смесь того, что по Вашей ссылке с тем, что в теме топика.
                      Скрестить такой вот крутящийся шарик с визуализацией связей между страницами.
                      Щас работы очень много. Если напишу, то попозже…
                      Тут и писать особо нечего, если кто успеет раньше, то буду только рад)))
                        0
                        404
                      0
                      Где-то это я уже видел года три назад.
                      –3
                      Я уж молчу про ужасы под хабракатом («И немного изучив что есть и как мой выбор упал на следующие средства» (плиаа, щитоо это??)), но уж до хабраката не надо такого. Глаза режет.

                      > И так приступим!

                      Итак, приступим!

                      Граммар наци удаляется, спасибо за внимание.
                        +2
                        я никогда не против услышать слова обо ошибках, но намного приятнее, когда на них указывают в нормальном виде
                          0
                          Спасибо за исправления. Извиняюсь за тон — утро не задалось слегка.
                        –1
                        не знаю почему, но ассоциативно напомнило фильм ГиберКуб))) буууу…
                          0
                          Вы могли лишь посоревноваться с другими в красивости итогового графа, но это вы делать видимо не стали…
                            0
                            на самом деле я много рылся в настройках стандартных средств Graphviz и не много нашел, а заниматься своими фигурами и цветовыми схемами, пока просто не было времени…
                            0
                            Хабрахабр выглядит красивше ))
                              0
                              Спасибо за Криса Харрисона, не видел, внушает.
                                0
                                я очень долго был в шоке от его работ
                                0
                                flowingdata.com/ — тоже довольно много интересных решений в визуализации данных
                                  0
                                  Некоторые замечания (на основе собственного опыта визуализации)

                                  1. Следует отличать связи однонаправленные и двунаправленные, когда статья в свою очередь ссылается на исходную. Это можно было бы обозначить более жирной (или более короткой) линией.

                                  2. Следует фильтровать ссылки на статьи, которые не являются статьями в полном смысле этого слова: например, статьи о годах. Они лишь «уводят» от темы.

                                  3. При возможности лучше парсить самому статью, и, например, присваивать разный вес ссылкам в самой статье, и ссылкам из навигационных шаблонов.

                                  4. Иногда полезно анализировать не одну статью и её «соседей», а, скажем, взять определённую категорию с подкатегориями.

                                  5. Некоторые результаты визуализации в 3D можно посмотреть тут:
                                  www.youtube.com/user/vlsergey
                                    0
                                    спасибо, я хочу заняться в нормальной форме этими задачами, а не простым скриптом

                                    а по поводу API, мне просто было интересно с ним поработать и в тоже время разобраться
                                    0
                                    Чувствую вас вдохновили примеры работы с twopi с graphviz сайта)
                                      0
                                      да, но тот пример twopi который на сайте у меня собрался в виде каши…
                                      0
                                      для веб не интересно
                                      а вот для обучения, англ. яз
                                      очень даже применимо
                                        +2
                                        На графике для хабра 3го уровня есть «1-я горнострелковая дивизия ­«Эдельвейс» :) Так википедия и убивает время. Начинаешь читать про хабр, заканчиваешь второй мировой
                                          +1
                                          Я много статей смотрел по перекрестным ссылкам, и порой просто жуть на какие статьи вылазишь )))
                                          0
                                          Есть такой сайт в зарубежных интернетах, называется www.music-map.com. Вводишь название музыкальной группы и он строит облако из названий других групп, схожих по стилю/звучанию. Данные берутся из некой базы предпочтений слушателей, насколько я понял.
                                          В свое время открыл для себя много новых имен с помощью этого сайта.
                                          Вопрос: никто не знает, есть ли в Рунете что-то похожее?
                                            0
                                            А есть в Огроооомном разрешении!?
                                              0
                                              да есть по ссылками посмотрите, или сформируйте свой с моим скриптом, только там надо оптимально опции выставлять чтобы это было адекватно
                                                0
                                                если мне не изменяют глаза, то формат картинок SVG, а это вектор…
                                                  0
                                                  graphviz может рендерить картинку в множество форматов, просто svg самый легкий для него и быстрый, например граф на 2000 узлов в режиме расчета не пересекающихся узлов рендерится на моем компе 20 минут ((( и весит 100 метров

                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                              Самое читаемое