DendrogramViewer

ผู้ชม Dendrogram

แอพพลิเคชั่นเว็บ Dendrogram Viewer

Dendrogram Viewer เป็นแอพพลิเคชั่นเว็บแบบอินเทอร์แอคทีฟโอเพนซอร์ซที่เขียนในจาวาสคริปต์ที่อนุญาตให้มีการสร้างภาพของ dendrograms ซึ่งเป็นไดอะแกรมต้นไม้ที่ใช้เพื่อแสดงการจัดเรียงของกลุ่มที่ผลิตโดยอัลกอร์ ธ D3.JS ใช้เป็นพื้นฐานสำหรับการสร้างภาพข้อมูล dendrogram

แอปพลิเคชันช่วยให้การสร้างภาพข้อมูลแบบโต้ตอบของจำนวนกลุ่มที่แตกต่างกันและความแตกต่าง / ระยะทางที่แตกต่างกัน นอกจากนี้ยังมีตัวเลือกภาพหลายอย่างเช่นการเลือกจานสี Dendrogram, เค้าโครงแนวตั้ง, การดูฉลากคลัสเตอร์ ฯลฯ

Dendrogram Viewer เป็นโอเพ่นซอร์สภายใต้ใบอนุญาต MIT และฟรีสำหรับการใช้งานเชิงพาณิชย์

• แหล่งที่มาแหล่งที่มา: https://github.com/pedrodbs/dendrogramviewer

สารบัญ

• การพึ่งพาอาศัยกัน
• การใช้งาน
• ดูด้วย

---

การพึ่งพาอาศัยกัน

เค้าโครง D3.JS Dendrogram ขึ้นอยู่กับคำแนะนำในบทความนี้:

• วิธีสร้าง dendrogram โดยใช้ไลบรารี D3

นอกจากนี้แพ็คเกจ JavaScript ต่อไปนี้ใช้ในแอปพลิเคชัน:

• d3.js (v3) ใช้สำหรับการสร้างภาพเค้าโครง dendrogram
• ตัวเลือกสี jscolor (v2.0.5) ใช้สำหรับการเลือกสีพื้นหลัง
• เครื่องกำเนิดจานสีที่ใช้สำหรับการเลือกจานสี dendrogram
• SVG Crowbar (V2, แก้ไขไม่ใช่รูปแบบการส่งออกและลดขนาดไฟล์) ใช้สำหรับการส่งออก dendrogram ไปยังไฟล์อิมเมจ SVG

การใช้งาน

คุณสามารถ git clone ซอร์สโค้ด Dendrogram Viewer จากนั้นเปิดไฟล์ index.html ในเว็บเบราว์เซอร์ (แนะนำให้ใช้ Firefox เพื่อผลลัพธ์ที่ดีกว่า)

คำจำกัดความไฟล์ JSON DENDROGRAM

รูปแบบไฟล์ JSON เป็นรูปแบบมาตรฐานที่ได้รับการแก้ไขที่ใช้สำหรับต้นไม้โดย D3.JS เพื่อให้ไฟล์การจัดกลุ่มขนาดใหญ่มีขนาดกะทัดรัดมากขึ้น แต่ละคลัสเตอร์จะแสดงด้วยวัตถุโหนดโดยที่:

• แอตทริบิวต์ n ถือ ชื่อ หรือ ID ของคลัสเตอร์
• แอตทริบิวต์ d คือ ความแตกต่าง / ระยะทางที่พบและสร้างโดยอัลกอริทึม HC;
• แอตทริบิวต์ c เป็นรายการที่มีคู่ของ พ่อแม่ / เด็ก ที่สร้างคลัสเตอร์

ตัวอย่างเช่น JSON ต่อไปนี้ถูกสร้างขึ้นโดยใช้กรอบ Aglomera.net เพื่อจัดกลุ่มชุดข้อมูลใน [Kaufman & Rousseuw, 1990]:

{
  "n" : " (1;4;5;2;3;6;7) " , "d" : 5.5 ,
  "c" : [
    { "n" : " (2;3;6;7) " , "d" : 2.05 ,
      "c" : [
        {
          "n" : " (2;3;6) " , "d" : 1.9 ,
          "c" : [
            {
              "n" : " (2;3) " , "d" : 1.12 ,
              "c" : [
                { "n" : " (3) " , "d" : 0.0 , "c" : [] },
                { "n" : " (2) " , "d" : 0.0 , "c" : [] } ] },
            { "n" : " (6) " , "d" : 0.0 , "c" : [] } ] },
        { "n" : " (7) " , "d" : 0.0 , "c" : [] } ]
    },
    { "n" : " (1;4;5) " , "d" : 1.5 ,
      "c" : [
        { "n" : " (1;4) " , "d" : 0.71 ,
          "c" : [
            { "n" : " (4) " , "d" : 0.0 , "c" : [] },
            { "n" : " (1) " , "d" : 0.0 , "c" : [] } ] },
        { "n" : " (5) " , "d" : 0.0 , "c" : [] } ]
    } ]
}

กำลังโหลดไฟล์

แอปพลิเคชันจะโหลดไฟล์ JSON เริ่มต้นโดยอัตโนมัติจากโฟลเดอร์ examples การเลือกไฟล์ด้วยตนเองสามารถทำได้สองวิธี:

• โดยใช้พารามิเตอร์ file ใน URL เช่น file:///index.html?file=examples/iris.json;
• โดยคลิกปุ่ม Load... และเลือกไฟล์ที่ต้องการ

ปฏิสัมพันธ์

• รองรับ การซูม (การเลื่อนเมาส์) และ การลาก (การคลิกเมาส์และลาก) ขององค์ประกอบ dendrogram โดยสลับ Zoom & drag: กล่องเช็ค-
• การเปลี่ยน Num. clusters ตัวเลื่อน Num. clusters จะช่วยให้การสร้างภาพของ ชุดคลัสเตอร์ ของขนาดที่สอดคล้องกัน อินสแตนซ์ภายในคลัสเตอร์เฉพาะจะถูกมองเห็นโดยมีโหนดและสีลิงค์เดียวกัน การเลือกค่า 1 จะแสดง คลัสเตอร์เดียว ที่มีทุกกรณี เช่น ทั้งหมดที่มีสีเดียวกัน
• การเปลี่ยน Dist. threshold ตัวเลื่อน Dist. threshold จะช่วยให้การสร้างภาพของ ชุดคลัสเตอร์ ที่อัลกอริทึมที่พบที่ ความแตกต่าง / ระยะทาง ที่สอดคล้องกัน การเลือกค่า 0 จะแสดงแต่ละอินสแตนซ์ในคลัสเตอร์ของตัวเอง ทั้งหมด มีสีที่แตกต่างกัน

การส่งออก SVG

ในการส่งออก / ดาวน์โหลด dendrogram ลงในไฟล์ SVG (กราฟิกเวกเตอร์ที่ปรับขนาดได้) คลิกปุ่ม Download SVG หมายเหตุ: สิ่งนี้จะส่งออกไฟล์ภาพด้วยการจัดแต่งทรงผมองค์ประกอบพื้นฐาน เช่น สีและน้ำหนัก สำหรับการจัดรูปแบบเต็มรูป styles.css ในโฟลเดอร์เดียวกัน (และอาจปรับแต่งไฟล์สไตล์)

ตัวเลือกภาพ

การสร้างภาพฉลากคลัสเตอร์

รองรับ การดูฉลาก ของแต่ละคลัสเตอร์ (โดยปกติจะมีอินสแตนซ์ที่มีอยู่ในนั้น) โดยสลับกล่องเช็ค- Show labels

เค้าโครง

รองรับเค้าโครง dendrogram ทั้ง แนวตั้ง และ แนวนอน โดยสลับกล่องเช็คเอา Vertical layout

ลิงก์เค้าโครง

รองรับลิงก์สาขา ตรง และ แบบโค้ง มนโดยสลับกล่องเช็คอิน Straight links

สี

รองรับสีเทาด้วยการสลับกล่องเช็ค-บ็อก Grayscale

อนุญาตให้เลือกระหว่าง จานสี ที่แตกต่างกันสำหรับสีคลัสเตอร์ของ dendrogram โดยเลือกจากกล่อง Color scheme รวมถึง TOL , Color Brewer ฯลฯ หมายเหตุ: จานสีบางชนิดมีขีด จำกัด จำนวนสี

สีพื้นหลัง สามารถเลือกได้โดยใช้ตัวเลือก Background color

ดูด้วย

การอ้างอิง

1. Kaufman, L. , & Rousseeuw, PJ (1990) การค้นหากลุ่มในข้อมูล: บทนำการวิเคราะห์กลุ่ม John Wiley & Sons

ลิงค์อื่น ๆ

• aglomera.net
• Dendrogram (Wikipedia)
• d3.js

ลิขสิทธิ์© 2018, Pedro Sequeira