wikipedia map

Peta Wikipedia

Aplikasi Web untuk memvisualisasikan koneksi antara halaman Wikipedia. Cobalah di wikipedia.luk.ke.

Penggunaan

Mulailah dengan memasukkan topik ke dalam kotak teks, misalnya kucing . Satu "simpul" tunggal akan dihasilkan, berlabel Cat , yang muncul sebagai lingkaran pada grafik. Klik node ini untuk memperluasnya.

Memperluas node membuat simpul baru untuk setiap artikel Wikipedia yang ditautkan dalam paragraf pertama artikel yang Anda klik . Node baru ini akan terhubung ke node dari mana mereka diperluas. Misalnya, Expanding Cat akan membuat delapan node, termasuk bulu , mamalia , karnivora , dan domestikasi , yang masing -masing akan terhubung ke kucing . Node baru ini juga dapat diperluas dengan cara yang sama. Dengan terus memperluas node, Anda dapat membangun jaringan yang kompleks dari topik terkait.

Anda juga dapat memasukkan beberapa artikel untuk "membandingkan" dengan menekan koma, tab, atau masuk setelah masing -masing yang Anda masukkan.

Cara kerjanya

API

Saat Anda mengklik untuk memperluas node, permintaan dibuat ke Wikipedia API untuk mengunduh konten lengkap artikel Wikipedia yang sesuai dengan node itu. Peta Wikipedia menggunakan data ini untuk menemukan tautan di paragraf pertama artikel.

HTML Parsing

wikipedia_parse.js menggunakan API DOMParser untuk parse halaman Wikipedia 'html (diambil dari panggilan ke API Wikipedia). Parser mencari tag <p> yang sesuai dengan paragraf pertama artikel, kemudian mengekstrak semua tautan tag <a> dalam paragraf ini. Kemudian memfilter tautan untuk memasukkan yang hanya tautan ke artikel Wikipedia lainnya.

Anda dapat melihat ini sendiri di konsol browser Anda. Jika Anda memiliki peta wikipedia terbuka, buka alat pengembang browser Anda dan ketik await getSubPages('Cat') . Setelah satu detik, Anda akan melihat array dengan nama -nama artikel terkait lainnya.

Grafik

Front-end menggunakan vis.js untuk menampilkan grafik. Setiap kali sebuah node diklik, aplikasi membuat XMLHttpRequest ke server Node.js. Tautan yang dihasilkan ditambahkan sebagai node baru, diwarnai sesuai dengan jaraknya dari simpul pusat (seperti dijelaskan di atas).

Kloning

Untuk menggunakan aplikasi secara lokal, sederhana

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

dan buka index.html di browser web. Tidak diperlukan kompilasi atau server untuk menjalankan front-end.

Pilihan desain

Fungsional

Memperluas node membuat node untuk setiap artikel yang ditautkan dalam paragraf pertama artikel untuk simpul yang Anda perluas. Saya telah memilih untuk menggunakan tautan hanya dari paragraf pertama sebuah artikel karena 2 alasan:

1. Biasanya ada sejumlah tautan ini, sekitar 5-10 per halaman.
2. Tautan ini cenderung lebih relevan secara langsung dengan artikel daripada tautan lebih jauh di halaman.

Visual

Node berwarna lebih ringan ketika mereka lebih jauh dari simpul pusat. Jika butuh 5 langkah untuk mencapai bahasa Yunani kuno dari penguin , itu akan menjadi warna yang lebih terang dari simpul seperti birding , yang hanya membutuhkan 2 langkah untuk dicapai. Dengan demikian, warna node menunjukkan seberapa dekat suatu artikel terkait dengan topik sentral.

Melayang mouse di atas node akan menyoroti jalur kembali ke simpul pusat: Ini belum tentu jalan terpendek kembali; Ini adalah jalan yang Anda ambil untuk mencapai simpul.

Peta jalan

Hal -hal yang ingin segera saya terapkan (ish)

Antarmuka

• Bangun GUI
  • Ubah metode input ke sesuatu selain prompt
  • Izinkan memulai lagi tanpa halaman menyegarkan
  • Buat tombol info kecil yang menjelaskan proyek, kontrol, dll.
    • Membuat readme ini ke dialog bantuan
    • Area dengan jaringan harus berisi instruksi saat kosong
    • Buat dialog bantuan yang lebih menyeluruh yang menjelaskan kontrol, dll. Yang juga termasuk readme
  • Tambahkan tombol "artikel acak"
  • Buat menu bantuan yang lebih baik yang muncul ketika pengguna pertama kali berkunjung.
  • Jadikan tur lebih baik
    • Tunjukkan kepada pengguna cara memperluas dan melacak node belakang. Untuk melakukan ini, buat div yang tidak terlihat mengambang di atas node awal. Kemudian, sematkan langkah gembala ke div ini.
    • Jangan mengizinkan pengguna untuk maju ke langkah berikutnya sampai mereka mengikuti instruksi (memasukkan artikel, menekan GO)
    • Menghilang kotak info saat tur dimulai
• Izinkan masukan beberapa start
  • Membangun antarmuka untuk ini
• Menerapkan Saving + Sharing
  • Menyimpan grafik
  • Memuat grafik dari id
  • Memuat grafik dari parameter URL
  • Menerapkan berbagi UI

Interaksi

• Melayang di atas node akan menunjukkan traceback tentang bagaimana Anda sampai di simpul itu, seperti remah roti seperti
• Optimalisasi Seluler: Menerapkan serangkaian kontrol terpisah untuk perangkat sentuh
• Di kedua desktop dan seluler, klik dua kali (atau ketuk) sebuah simpul untuk membuka halaman Wikipedia yang sesuai di tab baru
• Tingkatkan efisiensi menyoroti node

Teknis

• .gitignore -tekan direktori perpustakaan, tidak ada alasan untuk ada di sini ketika saya tidak menulis barang itu
• Hapus ketergantungan pada beberapa pustaka eksternal:
  • jQuery
  • wordwrap
  • Tinycolor
• Pindahkan JavaScript ke file memisahkan dari HTML
• Membuat permintaan API asinkron
• Tambahkan beberapa jenis sistem build untuk membuat pembangunan salinan lokal dan berkontribusi lebih mudah

Hal -hal yang mungkin menyenangkan untuk diterapkan di masa depan

• Nama AutoComplete Artikel Wikipedia di Bar Top
• Membuat ukuran node mencerminkan jumlah backlink
• Dukungan untuk bahasa lain
• Dukungan untuk wikis Mediawiki lainnya

Kredit

Proyek ini didukung oleh Wikipedia, yang kekayaan informasinya memungkinkan proyek ini.

Presentasi grafik ditenagai oleh vis.js