wikipedia map
API rewrite
Wikipedia 페이지 간의 연결을 시각화하기위한 웹 앱. wikipedia.luk.ke에서 시도하십시오.
텍스트 상자에 주제를 입력하여 시작하십시오 (예 : 고양이) . 단일 "노드"가 생성되고 레이블이 붙은 고양이가 생성되며 그래프의 원으로 나타납니다. 이 노드를 클릭하여 확장하십시오.
노드를 확장하면 클릭 한 기사의 첫 번째 단락에 연결된 각 Wikipedia 기사에 대한 새 노드가 생성됩니다. 이 새로운 노드는 확장 된 노드에 연결됩니다. 예를 들어, 고양이를 확장하면 모피 , 포유 동물 , 육식 동물 및 가축 을 포함한 8 개의 노드가 생성되며 각각은 고양이 와 연결됩니다. 이 새로운 노드도 같은 방식으로 확장 될 수 있습니다. 노드를 계속 확장함으로써 복잡한 관련 주제를 구축 할 수 있습니다.
또한 쉼표, 탭을 누르거나 입력 한 후 입력하여 "비교"하기 위해 여러 기사를 입력 할 수도 있습니다.
노드를 확장하기 위해 클릭하면 Wikipedia API에 요청이있어 해당 노드에 해당하는 Wikipedia 기사의 전체 컨텐츠를 다운로드합니다. Wikipedia Map 은이 데이터를 사용하여 기사의 첫 번째 단락에서 링크를 찾습니다.
wikipedia_parse.js DOMParser API를 사용하여 Wikipedia Pages의 HTML (Wikipedia의 API로 검색 됨)을 구문 분석합니다. 파서는 기사의 첫 번째 단락에 해당하는 <p> 태그를 찾은 다음이 단락 내의 모든 <a> 태그 링크를 추출합니다. 그런 다음 다른 Wikipedia 기사에 링크하는 것만 포함하도록 링크를 필터링합니다.
브라우저 콘솔 에서이 작업을 직접 볼 수 있습니다. Wikipedia Map을 열면 브라우저의 개발자 도구를 열고 await getSubPages('Cat') . 잠시 후 다른 관련 기사의 이름이있는 배열이 표시됩니다.
프론트 엔드는 vis.js 사용하여 그래프를 표시합니다. 노드를 클릭 할 때마다 앱은 XMLHttpRequest 를 node.js 서버로 만듭니다. 결과 링크는 새로운 노드로 추가되며 중앙 노드로부터의 거리에 따라 채색됩니다 (위에서 설명한대로).
앱을 로컬로 사용하려면 간단히 사용하십시오
git clone https://github.com/controversial/wikipedia-map/ 웹 브라우저에서 index.html 엽니 다. 프론트 엔드를 실행하려면 컴파일이나 서버가 필요하지 않습니다.
노드를 확장하면 확장 한 노드에 대한 기사의 첫 번째 단락 에 연결된 각 기사에 대한 노드가 생성됩니다. 두 가지 이유로 기사의 첫 번째 단락에서만 링크를 사용하기로 선택했습니다.
노드는 중앙 노드에서 멀리 떨어져있을 때 색상이 밝습니다. 펭귄 에서 고대 그리스어 에 도달하는 데 5 단계가 걸렸다면, 들새 관찰과 같은 노드보다 밝은 색상이 될 것입니다. 따라서 노드의 색상은 기사가 중심 주제와 얼마나 밀접한 관련이 있는지를 나타냅니다.
노드 위로 마우스를 맴돌 으면 중앙 노드로의 경로가 강조 표시됩니다. 
이것이 반드시 가장 짧은 경로는 아닙니다. 노드에 도달하기 위해 취한 경로입니다.
.gitignore 라이브러리 디렉토리, 내가 그 물건을 쓰지 않았을 때 여기에있을 이유가 없습니다. 이 프로젝트는 Wikipedia에 의해 구동되며,이 프로젝트는이 프로젝트를 가능하게합니다.
그래프의 프레젠테이션은 vis.js 에 의해 구동됩니다.
