wikipedia map

Википедия карта

Веб -приложение для визуализации соединений между страницами Википедии. Попробуйте это на Wikipedia.luk.ke.

Использование

Начните с ввода темы в текстовое поле, например, кошки . Будет генерируется один «узел», помеченный кот , который появляется в виде круга на графике. Нажмите на этот узел, чтобы расширить его.

Расширение узла создает новый узел для каждой статьи в Википедии, связанной в первом абзаце статьи, которую вы нажали . Эти новые узлы будут подключены к узлу, из которого они были расширены. Например, расширение CAT создаст восемь узлов, включая мех , млекопитающее , плотоядное животное и одомашнивание , каждый из которых будет подключен к CAT . Эти новые узлы также могут быть расширены таким же образом. Продолжая расширять узлы, вы можете создать сложную сеть связанных тем.

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

Как это работает

API

Когда вы нажимаете, чтобы развернуть узел, в Wikipedia API представлен запрос на загрузку полного содержания статьи Википедии, соответствующей этому узлу. Wikipedia Map использует эти данные, чтобы найти ссылки в первом абзаце статьи.

HTML SAINING

wikipedia_parse.js использует API DOMParser для анализа Wikipedia Pages 'HTML (извлечен из вызовов в API Википедии). Парсер ищет тег <p> , соответствующий первым абзацам статьи, затем извлекает все ссылки <a> тега в этом абзаце. Затем он фильтрует ссылки, чтобы включить только те, которые ссылаются на другие статьи в Википедии.

Вы можете увидеть это в действии сами в консоли вашего браузера. Если у вас открыта карта Википедии, откройте инструменты разработчика вашего браузера и тип await getSubPages('Cat') . Через секунду вы должны увидеть массив с именами других связанных статей.

График

Фронт-энд использует vis.js для отображения графика. Каждый раз, когда нажимается узел, приложение делает XMLHttpRequest на сервере node.js. Полученные ссылки добавляются в виде новых узлов, окрашенных в соответствии с их расстоянием от центрального узла (как описано выше).

Клонирование

Использовать приложение локально, просто

git clone https://github.com/controversial/wikipedia-map/

и открыть index.html в веб -браузере. Компиляция или сервер не требуется для запуска фронтального.

Выбор дизайна

Функциональный

Расширение узла создает узлы для каждой статьи, связанной в первом абзаце статьи для узела, который вы расширяете. Я решил использовать ссылки только из первого абзаца статьи по 2 причинам:

1. Обычно существует управляемое число этих ссылок, около 5-10 на страницу.
2. Эти ссылки, как правило, имеют более непосредственное отношение к статье, чем ссылки, далее вниз на странице.

Визуальный

Узлы светлее по цвету, когда они находятся дальше от центрального узла. Если потребуется 5 шагов, чтобы добраться до древнегреческого из Пингвина , это будет более светлый цвет, чем узел, такой как птицы , который занял всего 2 шага. Таким образом, цвет узела указывает, насколько близко статья связана с центральной темой.

Парание мыши над узлом выделит путь обратно к центральному узлу: Это не обязательно самый короткий путь назад; Это путь, по которому вы пошли, чтобы достичь узла.

Дорожная карта

Вещи, которые я хотел бы реализовать в ближайшее время (ISH)

Интерфейс

• Построить графический интерфейс
  • Измените метод ввода на что -то другое, кроме быстрого
  • Разрешить начинать заново без освежающей страницы
  • Создайте небольшую кнопку информации, которая объясняет проект, управление и т. Д.
    • Введите это в диалоговом окне справки
    • Область с сетью должна содержать инструкции, когда она пустая
    • Создайте более тщательный диалог справки, объясняющий элементы управления и т. Д., Который также включает в себя readme
  • Добавить кнопку «Случайная статья»
  • Создайте лучшее меню помощи, которое появляется, когда пользователь впервые посещает.
  • Сделать тур лучше
    • Покажите пользователям, как расширить и отслеживать узлы. Для этого создайте плавающий невидимый Div над стартовым узлом. Затем прикрепите шаг пастуха к этому Div.
    • Не позволяйте пользователям перейти к следующему шагу, пока они не следовали инструкции (ввод в статьи, нажатие на Go)
    • Исчечь информационную коробку, когда запускается тур
• Разрешить вводить несколько запуска
  • Создайте интерфейс для этого
• Реализовать сохранение + обмен
  • Сохранение графика
  • Загрузка графика с идентификатора
  • Загрузка графика с параметра URL -адреса
  • Реализовать общий интерфейс

Взаимодействие

• Пари над узлом покажет отслеживание того, как вы достигли этого узла, вроде хлебных крошек
• Мобильная оптимизация: реализуйте отдельный набор элементов управления для сенсорных устройств
• На рабочем столе и на мобильных устройствах дважды щелкните (или нажмите) узел, чтобы открыть соответствующую страницу Википедии на новой вкладке
• Повысить эффективность выделения узлов

Технический

• .gitignore -ify Справочник библиотек, нет причин, чтобы он был здесь, когда я не писал этого материала
• Удалить зависимость от некоторых внешних библиотек:
  • jQuery
  • WordWrap
  • Tinycolor
• Переместите JavaScript, чтобы отделить файлы от HTML
• Сделайте API -запросы асинхронно
• Добавьте какую -то систему сборки, чтобы сделать строительство местных копий и проще внести свой вклад

Вещи, это было бы неплохо внедрить где -то в дальнем будущем

• Автозаполненные названия статей Википедии в верхнем баре
• Сделать размер узлов отражать количество обратных ссылок
• Поддержка других языков
• Поддержка других вики для СМИ

Кредиты

Этот проект работает от Википедии, чья богатство информации делает возможным этот проект.

Презентация графика оснащена vis.js