wikipedia map

Mapa de Wikipedia

Una aplicación web para visualizar las conexiones entre las páginas de Wikipedia. Pruébalo en Wikipedia.Luk.ke.

Uso

Comience ingresando un tema en el cuadro de texto, por ejemplo, gatos . Se generará un solo "nodo", etiquetado Cat , que aparece como un círculo en el gráfico. Haga clic en este nodo para expandirlo.

Expandir un nodo crea un nuevo nodo para cada artículo de Wikipedia vinculado en el primer párrafo del artículo en el que hizo clic . Estos nuevos nodos estarán conectados al nodo desde el que se expandieron. Por ejemplo, la expansión de CAT creará ocho nodos, incluidos pieles , mamíferos , carnívoros y domesticación , cada uno de los cuales estará conectado a CAT . Estos nuevos nodos también se pueden ampliar de la misma manera. Al continuar expandiendo nodos, puede construir una red compleja de temas relacionados.

También puede ingresar múltiples artículos para "comparar" presionando coma, pestaña o ingresar después de cada uno que ingrese.

Cómo funciona

API

Cuando hace clic para expandir un nodo, se realiza una solicitud a la API de Wikipedia para descargar el contenido completo del artículo de Wikipedia correspondiente a ese nodo. El mapa de Wikipedia usa estos datos para encontrar los enlaces en el primer párrafo del artículo.

Análisis de html

wikipedia_parse.js usa la API DOMParser para analizar las páginas de Wikipedia 'HTML (Recuperado de las llamadas a la API de Wikipedia). El analizador busca la etiqueta <p> correspondiente al primer párrafo del artículo, luego extrae todos los enlaces de la etiqueta <a> dentro de este párrafo. Luego filtra los enlaces para incluir solo aquellos que se vinculan a otros artículos de Wikipedia.

Puedes ver esto en acción tú mismo en la consola de tu navegador. Si tiene el mapa de Wikipedia abierto, abra las herramientas de desarrollador de su navegador y el tipo await getSubPages('Cat') . Después de un segundo, debería ver una matriz con los nombres de otros artículos relacionados.

El gráfico

El front-end usa vis.js para mostrar el gráfico. Cada vez que se hace clic en un nodo, la aplicación hace un XMLHttpRequest en el servidor Node.js. Los enlaces resultantes se agregan como nuevos nodos, coloreados de acuerdo con su distancia desde el nodo central (como se describió anteriormente).

Clonación

Para usar la aplicación localmente, simplemente

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

y abra index.html en un navegador web. No es necesario compilación o servidor para ejecutar el front-end.

Opciones de diseño

Funcional

Expandir un nodo crea nodos para cada artículo vinculado en el primer párrafo del artículo para el nodo que expande. Elegí usar enlaces solo desde el primer párrafo de un artículo por 2 razones:

1. Por lo general, hay un número manejable de estos enlaces, alrededor de 5-10 por página.
2. Estos enlaces tienden a ser más directamente relevantes para el artículo que los enlaces más abajo en la página.

Visual

Los nodos son de color más claro cuando están más lejos del nodo central. Si tardó 5 pasos en llegar al antiguo griego desde Penguin , será un color más claro que un nodo como la observación de aves , que solo tardó 2 pasos en alcanzar. Por lo tanto, el color de un nodo indica cuán estrechamente un artículo está relacionado con el tema central.

Rovering el mouse sobre un nodo resaltará la ruta de regreso al nodo central: Este no es necesariamente el camino más corto; Es el camino que tomaste para llegar al nodo.

Hoja de ruta

Cosas que me gustaría implementar pronto (ish)

Interfaz

• Construir una gui
  • Cambiar el método de entrada a algo más que un aviso
  • Permitir comenzar de nuevo sin una página refrescante
  • Cree un pequeño botón de información que explique el proyecto, los controles, etc.
    • Renderizar este readme en el diálogo de ayuda
    • El área con la red debe contener instrucciones cuando esté en blanco
    • Cree un diálogo más exhaustivo que explique controles, etc. que también incluye el ReadMe
  • Agregue un botón de "artículo aleatorio"
  • Cree un menú de mejor ayuda que aparezca cuando un usuario visita por primera vez.
  • Hacer el recorrido mejor
    • Muestre a los usuarios cómo expandir y rastrear los nodos. Para hacer esto, cree un DIV invisible flotante sobre un nodo de inicio. Luego, fija el paso de pastor a este div.
    • No permita que los usuarios avanzaran al siguiente paso hasta que hayan seguido la instrucción (ingresando artículos, presionando GO)
    • Desaparecer el cuadro de información cuando se inicia la gira
• Permitir la entrada de múltiples arranque
  • Construir una interfaz para esto
• Implementar guardado + intercambio
  • Guardar un gráfico
  • Cargando un gráfico desde una identificación
  • Carga de un gráfico desde un parámetro URL
  • Implementar compartir la interfaz de usuario

Interacción

• Rovering sobre un nodo mostrará un trazo de cómo llegaste a ese nodo, como migas de pan
• Optimización móvil: implementa un conjunto separado de controles para dispositivos táctiles
• En escritorio y móvil, haga doble clic (o toque) un nodo para abrir la página de Wikipedia correspondiente en una nueva pestaña
• Mejorar la eficiencia de resaltar los nodos

Técnico

• .gitignore -ify del directorio de bibliotecas, no hay razón para que esté aquí cuando no escribí esas cosas
• Eliminar la dependencia de algunas bibliotecas externas:
  • jQuery
  • envoltura de palabras
  • pequeño
• Mueva JavaScript a archivos separados de HTML
• Hacer solicitudes de API asíncronas
• Agregue algún tipo de sistema de compilación para facilitar la creación de copias locales y contribuir

Cosas que podría ser bueno implementar en algún momento en el futuro lejano

• Nombres autocompletos de artículos de Wikipedia en la barra superior
• Hacer que el tamaño de los nodos refleje el número de vínculos de retroceso
• Apoyo para otros idiomas
• Soporte para otros wikis de Mediawiki

Créditos

Este proyecto está impulsado por Wikipedia, cuya riqueza de información hace posible este proyecto.

La presentación del gráfico está alimentada por vis.js