wikipedia map

Mapa da Wikipedia

Um aplicativo da Web para visualizar as conexões entre as páginas da Wikipedia. Experimente em wikipedia.luk.ke.

Uso

Comece inserindo um tópico na caixa de texto, por exemplo, gatos . Um único "nó" será gerado, rotulado CAT , que aparece como um círculo no gráfico. Clique neste nó para expandi -lo.

A expansão de um nó cria um novo nó para cada artigo da Wikipedia vinculado no primeiro parágrafo do artigo que você clicou . Esses novos nós serão conectados ao nó do qual foram expandidos. Por exemplo, a expansão do CAT criará oito nós, incluindo peles , mamíferos , carnívoros e domesticação , cada um dos quais estará conectado ao CAT . Esses novos nós também podem ser expandidos da mesma maneira. Ao continuar a expandir os nós, você pode criar uma rede complexa de tópicos relacionados.

Você também pode inserir vários artigos para "comparar" pressionando vírgula, guia ou inserir após cada um deles.

Como funciona

API

Quando você clica para expandir um nó, é feita uma solicitação à API da Wikipedia para baixar o conteúdo completo do artigo da Wikipedia correspondente a esse nó. O mapa da Wikipedia usa esses dados para encontrar os links no primeiro parágrafo do artigo.

HTML Parsing

wikipedia_parse.js usa a API DOMParser para analisar o HTML das páginas da Wikipedia (recuperado das chamadas para a API da Wikipedia). O analisador procura a tag <p> correspondente ao primeiro parágrafo do artigo e, em seguida, extrai todas as tags <a> Links dentro deste parágrafo. Em seguida, filtra os links para incluir apenas aqueles que se conectam a outros artigos da Wikipedia.

Você pode ver isso em ação no console do seu navegador. Se você tiver o mapa da Wikipedia, abra as ferramentas e o tipo de desenvolvedor do seu navegador await getSubPages('Cat') . Depois de um segundo, você deve ver uma matriz com os nomes de outros artigos relacionados.

O gráfico

O front-end usa vis.js para exibir o gráfico. Toda vez que um nó é clicado, o aplicativo faz um XMLHttpRequest no servidor Node.js. Os links resultantes são adicionados como novos nós, coloridos de acordo com a distância do nó central (como descrito acima).

Clonagem

Para usar o aplicativo localmente, simplesmente

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

e Open index.html em um navegador da web. Nenhuma compilação ou servidor é necessário para executar o front-end.

Escolhas de design

Funcional

A expansão de um nó cria nós para cada artigo vinculado no primeiro parágrafo do artigo para o nó que você expande. Eu escolhi usar links apenas do primeiro parágrafo de um artigo por 2 motivos:

1. Geralmente, há um número gerenciável desses links, cerca de 5 a 10 por página.
2. Esses links tendem a ser mais diretamente relevantes para o artigo do que os links mais abaixo na página.

Visual

Os nós são de cor mais clara quando estão mais distantes do nó central. Se foram necessários 5 passos para chegar ao grego antigo do pinguim , será uma cor mais clara do que um nó como observação de observação de pássaros , que só deu 2 passos para alcançar. Assim, a cor de um nó indica o quão próximo um artigo está relacionado ao tópico central.

Passando o mouse sobre um nó destacará o caminho de volta ao nó central: Este não é necessariamente o caminho mais curto de volta; É o caminho que você seguiu para alcançar o nó.

Roteiro

Coisas que eu gostaria de implementar em breve (ish)

Interface

• Construa uma GUI
  • Altere o método de entrada para algo diferente
  • Permita o início de novo sem página refrescante
  • Crie um botão de informação pequena que explique o projeto, controles etc.
    • Renderize este leia -se na caixa de diálogo de ajuda
    • A área com a rede deve conter instruções quando estiver em branco
    • Crie uma caixa de diálogo de ajuda mais completa explicando controles, etc., que também inclui o ReadMe
  • Adicione um botão "Artigo aleatório"
  • Crie um menu de ajuda melhor que apareça quando um usuário visita primeiro.
  • Torne a turnê melhor
    • Mostre aos usuários como expandir e rastrear nós. Para fazer isso, crie uma div invisível flutuante em um nó inicial. Em seguida, prenda o passo para esta divisão.
    • Não permita que os usuários avançam para a próxima etapa até seguirem as instruções (entrando em artigos, pressionando Go)
    • Desaparece a caixa de informações quando o passeio for iniciado
• Permitir a entrada de múltiplas partidas
  • Construir uma interface para isso
• Implementar salvamento + compartilhamento
  • Salvando um gráfico
  • Carregando um gráfico de um ID
  • Carregando um gráfico de um parâmetro de URL
  • Implementar compartilhamento de interface do usuário

Interação

• Passando sobre um nó mostrará um rastreamento de como você chegou a esse nó, como migalhas de pão
• Otimização móvel: implemente um conjunto separado de controles para dispositivos de toque
• Na área de trabalho e no celular, clique duas vezes (ou toque) um nó para abrir a página da Wikipedia correspondente em uma nova guia
• Melhorar a eficiência de destacar os nós

Técnico

• .gitignore -fy o diretório da biblioteca, sem motivo para estar aqui quando eu não escrevi essas coisas
• Remova a dependência de algumas bibliotecas externas:
  • jQuery
  • WordWrap
  • Tinycolor
• Mova JavaScript para separar arquivos de HTML
• Fazer solicitações de API assíncronas
• Adicione algum tipo de sistema de construção para facilitar a construção de cópias locais e a contribuição

Coisas que pode ser bom implementar em algum momento no futuro distante

• Nomes de preenchimento autocomático dos artigos da Wikipedia na barra superior
• Fazer o tamanho dos nós refletir o número de backlinks
• Suporte para outros idiomas
• Apoio a outros wikis de mediawiki

Créditos

Este projeto é alimentado pela Wikipedia, cuja riqueza de informações torna esse projeto possível.

A apresentação do gráfico é alimentada pelo vis.js