หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

แผนที่วิกิพีเดีย

เว็บแอปสำหรับการแสดงภาพการเชื่อมต่อระหว่างหน้า Wikipedia ลองใช้ที่ wikipedia.luk.ke

ภาพหน้าจอของแผนที่วิกิพีเดีย

การใช้งาน

เริ่มต้นด้วยการป้อนหัวข้อลงในกล่องข้อความเช่น แมว จะมีการสร้าง“ โหนด” เดียวที่มีป้ายกำกับ CAT ซึ่งปรากฏเป็นวงกลมบนกราฟ คลิกที่โหนดนี้เพื่อขยาย

การขยายโหนดจะสร้าง โหนดใหม่สำหรับแต่ละบทความ Wikipedia ที่เชื่อมโยงในย่อหน้าแรกของบทความที่คุณคลิก โหนดใหม่เหล่านี้จะเชื่อมต่อกับโหนดที่ขยายออกไป ตัวอย่างเช่นการขยาย แมว จะสร้างแปดโหนดรวมถึง ขนสัตว์ , สัตว์เลี้ยงลูกด้วย นม, สัตว์กินเนื้อ และ สัตว์เลี้ยงและการผลิต ซึ่งแต่ละโหนดจะเชื่อมต่อกับ แมว โหนดใหม่เหล่านี้สามารถขยายได้ในลักษณะเดียวกัน โดยการขยายโหนดต่อไปคุณสามารถสร้างเว็บที่ซับซ้อนของหัวข้อที่เกี่ยวข้อง

นอกจากนี้คุณยังสามารถป้อนหลายบทความเพื่อ "เปรียบเทียบ" โดยกดเครื่องหมายจุลภาคแท็บหรือป้อนหลังจากแต่ละบทความที่คุณป้อน

มันทำงานอย่างไร

API

เมื่อคุณคลิกเพื่อขยายโหนดคำขอจะถูกส่งไปยัง Wikipedia API เพื่อดาวน์โหลดเนื้อหาทั้งหมดของบทความ Wikipedia ที่สอดคล้องกับโหนดนั้น แผนที่ Wikipedia ใช้ข้อมูลนี้เพื่อค้นหาลิงก์ในย่อหน้าแรกของบทความ

การแยกวิเคราะห์ HTML

wikipedia_parse.js ใช้ DOMParser API เพื่อแยกวิเคราะห์ HTML 'หน้า Wikipedia' (ดึงมาจากการโทรไปยัง API ของ Wikipedia) ตัวแยกวิเคราะห์ค้นหาแท็ก <p> ที่สอดคล้องกับย่อหน้าแรกของบทความจากนั้นแยกลิงก์แท็ก <a> ทั้งหมดภายในวรรคนี้ จากนั้นจะกรองลิงค์เพื่อรวมเฉพาะลิงก์ไปยังบทความ Wikipedia อื่น ๆ

คุณสามารถเห็นสิ่งนี้ในการดำเนินการด้วยตัวคุณเองในคอนโซลของเบราว์เซอร์ หากคุณเปิดแผนที่ Wikipedia ให้เปิดเครื่องมือนักพัฒนาเบราว์เซอร์ของคุณและพิมพ์ 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)

ส่วนต่อประสาน

  • สร้าง GUI
    • เปลี่ยนวิธีการป้อนข้อมูลเป็นสิ่งอื่นนอกเหนือจากพรอมต์
    • อนุญาตให้เริ่มต้นใหม่โดยไม่มีหน้าสดชื่น
    • สร้างปุ่มข้อมูลขนาดเล็กที่อธิบายโครงการควบคุม ฯลฯ
      • แสดงบทอ่านนี้ลงในกล่องโต้ตอบช่วยเหลือ
      • พื้นที่ที่มีเครือข่ายควรมีคำแนะนำเมื่อว่างเปล่า
      • สร้างกล่องโต้ตอบความช่วยเหลืออย่างละเอียดยิ่งขึ้นเพื่ออธิบายการควบคุม ฯลฯ ซึ่งรวมถึง readme
    • เพิ่มปุ่ม "บทความสุ่ม"
    • สร้างเมนูช่วยเหลือ ที่ดีกว่า ที่ปรากฏขึ้นเมื่อผู้ใช้เข้าชมครั้งแรก
    • ทำให้ทัวร์ดีขึ้น
      • แสดงวิธีการขยายและติดตามโหนดกลับ ในการทำเช่นนี้ให้สร้าง Div ที่ล่องหนลอยอยู่เหนือโหนดเริ่มต้น จากนั้นปักขั้นตอนผู้เลี้ยงแกะให้กับ div นี้
      • อย่าอนุญาตให้ผู้ใช้ก้าวไปสู่ขั้นตอนต่อไปจนกว่าพวกเขาจะทำตามคำแนะนำ (ป้อนบทความกด GO)
      • หายไปกล่องข้อมูลเมื่อเริ่มทัวร์
  • อนุญาตให้ป้อนข้อมูลหลายครั้ง
    • สร้างอินเทอร์เฟซสำหรับสิ่งนี้
  • ใช้การบันทึก + การแบ่งปัน
    • บันทึกกราฟ
    • กำลังโหลดกราฟจาก ID
    • การโหลดกราฟจากพารามิเตอร์ URL
    • ใช้การแบ่งปัน UI

ปฏิสัมพันธ์

  • การโฉบเหนือโหนดจะแสดงร่องรอยของวิธีที่คุณมาถึงโหนดนั้นเช่น breadcrumbs
  • การเพิ่มประสิทธิภาพมือถือ: ใช้ชุดควบคุมแยกต่างหากสำหรับอุปกรณ์สัมผัส
  • บนเดสก์ท็อปและมือถือดับเบิลคลิก (หรือแตะ) โหนดเพื่อเปิดหน้า Wikipedia ที่เกี่ยวข้องในแท็บใหม่
  • ปรับปรุงประสิทธิภาพของการเน้นโหนด

เกี่ยวกับเทคนิค

  • .gitignore -กระจายไดเรกทอรีห้องสมุดไม่มีเหตุผลที่จะอยู่ที่นี่เมื่อฉันไม่ได้เขียนสิ่งนั้น
  • ลบการพึ่งพาในห้องสมุดภายนอกบางส่วน:
    • jQuery
    • WordWrap
    • สีเทา
  • ย้าย JavaScript ไปแยกไฟล์จาก HTML
  • ทำคำขอ API แบบอะซิงโครนัส
  • เพิ่มระบบบิลด์บางชนิดเพื่อสร้างสำเนาท้องถิ่นและมีส่วนร่วมง่ายขึ้น

สิ่งที่น่าจะดีที่จะนำไปใช้ในอนาคตอันไกลโพ้น

  • ชื่ออัตโนมัติที่สมบูรณ์ของบทความ Wikipedia ในแถบด้านบน
  • ทำให้ขนาดของโหนดสะท้อนจำนวนลิงก์ย้อนกลับ
  • สนับสนุนภาษาอื่น ๆ
  • สนับสนุน Mediawiki Wikis อื่น ๆ

การให้เครดิต

โครงการนี้ขับเคลื่อนโดย Wikipedia ซึ่งมีข้อมูลมากมายทำให้โครงการนี้เป็นไปได้

การนำเสนอของกราฟนั้นใช้พลังงานจาก vis.js

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด