เจาะลึก D3

 (d3indepth.com)
4 คะแนน โดย GN⁺ 2024-05-18 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

D3 in Depth

D3 in Depth ครอบคลุม D3 เวอร์ชัน 6 และ 7

  • หน้าเว็บไซต์: D3 in Depth เป็นเว็บไซต์ที่ครอบคลุม D3.js เวอร์ชันล่าสุดอย่าง 6 และ 7
  • แนะนำ: เว็บไซต์นี้นำเสนอเนื้อหาเชิงลึกเกี่ยวกับการทำภาพข้อมูลด้วย D3.js
  • จดหมายข่าว: สามารถรับข้อมูลส่วนลดหนังสือ รวมถึงข่าวสารและเคล็ดลับเกี่ยวกับ D3.js ผ่านจดหมายข่าวได้

หนังสือและคอร์สเรียน

  • Visualising Data with JavaScript: สอนวิธีสร้างแผนภูมิ แดชบอร์ด และเรื่องเล่าจากข้อมูล โดยใช้ Chart.js, Leaflet, D3 และ React
    • "เป็นหนึ่งในหนังสือ D3 ที่ดีที่สุดที่ผมเคยอ่าน เนื้อหาชัดเจนมาก ทำตามได้ง่าย และพื้นฐานแนวคิดก็แน่นมาก" - Javier García Fernández
  • การทำภาพข้อมูลแบบคัสตอม: สามารถเรียนรู้วิธีสร้างการทำภาพข้อมูลแบบคัสตอมด้วย D3.js ได้
  • การเรียนรู้พื้นฐาน: สามารถเรียนรู้พื้นฐานของ HTML, SVG, CSS และ JavaScript สำหรับการสร้างการทำภาพข้อมูลบนเว็บได้

สารบัญ

  • แนะนำ D3
  • เริ่มต้นใช้งาน
  • Selections
  • Data joins
  • Enter, exit & update
  • Scale functions
  • Shapes
  • Axes
  • Hierarchies
  • Chord Diagrams
  • Force layout
  • Maps
  • Data Requests
  • Transitions
  • Picking, Dragging and Brushing
  • Zoom & pan

จดหมายข่าว

  • สมัครรับ: รับข้อมูลส่วนลดหนังสือ รวมถึงข่าวสารและเคล็ดลับเกี่ยวกับ D3.js ได้

ลิขสิทธิ์

  • © Peter Cook 2023

ความเห็นของ GN⁺

  • ความสำคัญของ D3.js: D3.js เป็นไลบรารีด้านการทำภาพข้อมูลที่มีประโยชน์มากในการแสดงข้อมูลซับซ้อนในรูปแบบภาพ โดยเฉพาะเมื่อทำงานกับชุดข้อมูลขนาดใหญ่ ถือเป็นเครื่องมือที่ทรงพลังมาก
  • เส้นโค้งการเรียนรู้: D3.js ทรงพลัง แต่ก็อาจมีเส้นโค้งการเรียนรู้ที่ชัน เว็บไซต์นี้มีเนื้อหาที่เป็นประโยชน์ตั้งแต่ผู้เริ่มต้นไปจนถึงผู้ใช้ระดับสูง
  • การผสานกับเครื่องมือหลากหลาย: สามารถเรียนรู้วิธีผสานการทำงานกับเครื่องมืออื่นอย่าง Chart.js, Leaflet และ React ทำให้นำไปใช้กับโปรเจ็กต์ได้หลากหลาย
  • เน้นการลงมือทำ: เว็บไซต์นี้จัดเนื้อหาโดยเน้นการปฏิบัติจริง จึงช่วยให้ได้ความรู้ที่นำไปใช้กับโปรเจ็กต์จริงได้ทันที
  • สิ่งที่ควรพิจารณาเมื่อเลือกเทคโนโลยี: เมื่อเลือกใช้ D3.js ควรพิจารณาความซับซ้อนของโปรเจ็กต์ ระดับทักษะของทีม และความสามารถในการบำรุงรักษา แม้ D3.js จะทรงพลัง แต่สำหรับงานภาพข้อมูลแบบง่าย ๆ ก็อาจมากเกินความจำเป็น

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-05-18
ความคิดเห็นจาก Hacker News

สรุปความคิดเห็นจาก Hacker News

  • แนะนำ Observable Plot และ Observable Framework

    • หากสนใจการทำภาพข้อมูลด้วย D3 ก็ควรลองดู Observable Plot ที่ให้ความสะดวกสบายในระดับที่สูงกว่า
    • Observable Framework เป็น static site generator ที่รองรับ Plot, D3 และไลบรารีหลากหลายสำหรับสร้างแดชบอร์ดการแสดงผลข้อมูล
    • Observable Plot
    • Observable Framework

  • ความยากในการใช้งาน D3

    • แม้จะเคยใช้ D3 มามาก แต่เมื่อกลับมาใช้อีกครั้งหลังผ่านไปหลายปี เอกสารก็ยังชวนสับสนและให้ความรู้สึกเหมือนต้องเริ่มใหม่ตั้งแต่ต้น
    • การทำความเข้าใจเอกสารของ D3 ยากกว่าการแก้โจทย์คณิตศาสตร์เสียอีก

  • คุณค่าของการเรียนรู้ D3

    • ถึงจะไม่ได้ใช้ D3 อย่างมืออาชีพ ก็ยังคุ้มค่าที่จะเรียนรู้
    • ช่วยให้เข้าใจความแตกต่างระหว่างการฉายข้อมูลกับข้อมูลจริง รวมถึงวิธีทำ scaling ให้เหมาะสม
    • แม้ไม่ใช่บนเว็บ ก็ยังมีประโยชน์เมื่อต้องทำ data visualization ในสภาพแวดล้อมอื่น

  • พัฒนาการของ D3.js และทางเลือกสมัยใหม่

    • เคยทำหลายโปรเจ็กต์ด้วย D3.js แต่ตอนนี้มันให้ความรู้สึกล้าสมัยแล้ว
    • แม้จะย้ายไปใช้เฟรมเวิร์กสมัยใหม่อย่าง Vue 3 และ TypeScript แต่ก็ยังขอบคุณแนวปฏิบัติที่ดีที่ D3.js มอบให้

  • ทางเลือกอย่าง VisX

    • หลังจากเรียนรู้ D3 แล้ว การย้ายไปใช้เครื่องมือที่มีโครงสร้างมากขึ้นอย่าง VisX เป็นแนวทางที่ดี
    • D3 และ jQuery มักกลายเป็น spaghetti code ได้ง่าย

  • Grammar of Graphics และ ggplot2

    • D3 ได้แรงบันดาลใจจาก Grammar of Graphics ของ Wilkinson
    • ggplot2 ของภาษา R ก็ได้รับแรงบันดาลใจเดียวกัน และมีอินเทอร์เฟซที่กระชับและใช้งานเชิงฟังก์ชันมากกว่า

  • ปัญหาของ force-directed graph

    • ชอบ force-directed graph ในตัวอย่างของ D3 แต่เมื่อจำนวนโหนดและเอดจ์เพิ่มขึ้น การจัดวางก็มักออกมาไม่ดี
    • อาจจำเป็นต้องใช้การแสดงผลแบบ 3D

  • แหล่งข้อมูล D3 ที่มีประโยชน์

    • เคยมีแหล่งข้อมูลเพียงแห่งเดียวที่ช่วยให้เข้าใจ D3 ได้จริง
    • ผู้เขียนตอบสนองไวและให้ความช่วยเหลือดี

  • แนะนำ Vega

    • ได้ยินคำชมเกี่ยวกับ Vega ซึ่งอยู่บน D3
    • มันเป็น dependency ของ OpenSearch Dashboards และช่วยให้ผู้ใช้สร้างแดชบอร์ดแบบกำหนดเองสำหรับข้อมูล log และ observability ได้
    • เอกสาร Vega
    • การใช้ Vega ใน OpenSearch Dashboards

  • ความซับซ้อนของไวยากรณ์ D3

    • งาน visualization ที่ทำด้วย D3 นั้นดี แต่ไวยากรณ์ซับซ้อนเกินไปและดูเก่า
    • น่ายินดีที่ทุกอย่างกำลังเปลี่ยนไปสู่แนวทางที่ประกาศเจตนามากขึ้น