วิเคราะห์เชิงลึก D3

(d3indepth.com)

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

D3 in Depth เป็นสื่อการเรียนรู้ที่อ้างอิง D3 6 และ 7 โดยครอบคลุมกระบวนการสร้างการแสดงผลข้อมูลแบบกำหนดเองด้วย D3.js
เน้นที่ การสร้างงานแสดงผลแบบกำหนดเอง มากกว่าการใช้งานกราฟแบบพื้นฐาน และช่วยให้เรียนรู้องค์ประกอบของการทำเว็บวิชวลไลเซชันไปพร้อมกัน
พื้นฐานของ HTML, SVG, CSS และ JavaScript เชื่อมโยงกับการทำงานของ D3 จึงช่วยให้เข้าใจ การนำเสนอข้อมูลบนเว็บ ได้ดียิ่งขึ้น
ยังต่อยอดไปยังเนื้อหาเกี่ยวกับแดชบอร์ดและ data story ที่ใช้ React, Chart.js และ Leaflet ทำให้สามารถสร้าง เส้นทางการเรียนรู้ด้าน JavaScript visualization ได้
สำหรับผู้อ่านที่ต้องการเรียนรู้ D3 อย่างลึกซึ้ง สามารถใช้เป็นสื่อทั้งระดับเริ่มต้นและต่อยอดที่พาควบคู่กันไปทั้งความเข้าใจเชิงแนวคิดและการลงมือปฏิบัติ

ขอบเขตที่ D3 in Depth ครอบคลุม

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

แหล่งเรียนรู้ JavaScript visualization ที่ควรดูร่วมกัน

Data Dashboards with JavaScript ว่าด้วยวิธีสร้างแดชบอร์ดข้อมูลด้วย React, Chart.js และ Leaflet
Visualising Data with JavaScript ว่าด้วยวิธีสร้างกราฟและ data story ด้วย Chart.js, Leaflet, D3 และ React
มีผู้อ่านรายหนึ่งประเมินว่าสื่อนี้เป็นหนึ่งในหนังสือ D3 ที่โดดเด่น โดยมองว่าเนื้อหาชัดเจน ทำตามได้ง่าย และวางพื้นฐานแนวคิดได้แข็งแรง

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

GN⁺ 2024-05-18

ความคิดเห็นจาก Hacker News

แนวคิดในการทำการแสดงผลข้อมูลด้วย D3 นั้นดี แต่ถ้าต้องการ เครื่องมือระดับสูงกว่า อีกหน่อย Observable Plot[1] ที่สร้างโดยทีม D3 ก็น่าดู
เป็นไลบรารีที่เพิ่มแนวปฏิบัติและฟังก์ชันอำนวยความสะดวกจำนวนมากสำหรับสร้างกราฟ แผนภูมิ และพล็อตบน D3
นอกจากนี้ยังมี Observable Framework[2] ซึ่งเป็นตัวสร้างไซต์แบบสแตติกสำหรับแดชบอร์ดการแสดงผล ที่รองรับ Plot, D3 และไลบรารีอื่น ๆ อีกหลายตัว
1: https://observablehq.com/plot/
2: https://observablehq.com/framework/
- ช่วงนี้กลับสนใจในทางตรงกันข้ามมากกว่า คนส่วนใหญ่รู้อยู่แล้วว่าผลลัพธ์ควรหน้าตาเป็นอย่างไร แต่เฟรมเวิร์กโดยธรรมชาติแล้วให้ การตั้งค่าที่กำหนดไว้ล่วงหน้า จำนวนมาก และพอพยายามเบี่ยงออกจากการตั้งค่าเหล่านั้นแม้เพียงเล็กน้อยก็กลายเป็นเรื่องเจ็บปวด
  สำหรับพล็อตหลายประเภท การจัดการ ข้อมูล SVG โดยตรงมักจะง่ายกว่าในทางปฏิบัติ และก็ไม่ได้ยากขนาดนั้น
  อยากให้มีไลบรารีหรือเฟรมเวิร์กที่ช่วยให้จัดการเอาต์พุต SVG หรือ canvas ได้ง่ายขึ้น การแก้ไขเล็ก ๆ ควรทำได้ง่ายมาก แต่ยิ่งเฟรมเวิร์กเป็นระดับสูงเท่าไร ก็ยิ่งออกนอกเส้นทางที่กำหนดไว้ได้ยากขึ้นเท่านั้น
- Observable Plot ยอดเยี่ยมมาก ยืดหยุ่นมากและใช้งานได้เป็นธรรมชาติ จนตอนนี้ชอบมากกว่า Plotly.js ที่เคยใช้
  เอกสารก็ถือว่าค่อนข้างดี แต่ไม่มีส่วน API reference ที่ใช้งานได้จริง เลยไม่ค่อยดีนักสำหรับการค้นหาฟีเจอร์ต่าง ๆ
- สงสัยว่ามี อินเทอร์เฟซแบบลากแล้ววางเหมือน Matlab สำหรับการแสดงผลบนเว็บไหม
  พยายามหลีกเลี่ยงการสร้างกราฟด้วย HTML5 canvas ให้มากที่สุด เลยอยากได้แนวทางที่ออกแบบใหม่ ๆ
- Plot และ Framework ผูกอยู่กับ ระบบนิเวศของ Observable และก็มี learning curve ของมันเอง การเรียน D3 น่าจะดีที่สุดในแง่ความยืดหยุ่นและการควบคุม
- สงสัยว่าเว็บไซต์นี้รู้สึกกระตุกสำหรับคนอื่นด้วยไหม หน้าเว็บที่มีคอนเทนต์เยอะมักรู้สึกว่า สะดุด บ่อย ๆ
  แก้ไข: พอเปิด hardware acceleration แล้วลื่นขึ้น แต่แม้บน Ryzen 9 ก็ยังคงกระตุกกว่าที่คาด
ชอบ D3 และเคยทำอะไรด้วยมันมาเยอะ แต่ทุกครั้งที่ไม่ได้ใช้ไปสักหลายปีแล้วกลับมาอีกครั้ง แทบจำอะไรไม่ได้เลย เอกสารก็ยิ่งทำให้งง และรู้สึกเหมือนกลับไปที่ จุดเริ่มต้น ใหม่
ถ้าให้แก้สมการเชิงอนุพันธ์ย่อยที่ไม่ได้ดูมา 10 ปี น่าจะเรียกความรู้สึกกลับมาได้เร็วกว่าด้วยซ้ำ
เอกสารอ้างอิงของ D3 ก็คิดว่าแย่มากจริง ๆ
- เคยใช้ D3 ตั้งแต่เวอร์ชัน 2 ถึง 7 มาเยอะ และเพราะการ รีแฟกเตอร์ ตลอดช่วงนั้น ตัวอย่างออนไลน์ที่เดิมก็เข้าใจยากอยู่แล้วก็ยิ่งอัปเดตได้ยากขึ้น
  ถึงอย่างนั้นตอนนี้ดูเหมือนจะเสถียรมากขึ้นแล้ว พอเริ่มเขียนด้วย Svelte+D3 ใน สไตล์เชิงคำสั่ง มากกว่าการใช้ D3 เพียงอย่างเดียว ก็เริ่มจับทางได้
  เข้าใจองค์ประกอบที่ถูกสร้างขึ้นได้ง่ายกว่า แทนที่จะค่อยไปส่ององค์ประกอบที่สร้างแล้วใน developer tools ภายหลัง
  เว็บไซต์นี้ช่วยได้สำหรับการใช้ D3 ร่วมกับ Svelte: https://svelte.recipes/
- รู้สึกว่าปัญหาแบบนั้นน้อยกว่ามากเมื่อเทียบกับไลบรารีสำหรับพล็อตอื่น ๆ
  งานของผม 80% เป็นแอปพลิเคชัน, 10% เป็นระบบ, 10% เป็นการวิเคราะห์ข้อมูล และบางครั้งก็ทำ Jupyter notebook อยู่ 2 สัปดาห์แล้วไม่ได้แตะอีกสองเดือน
  ไลบรารีพล็อตส่วนใหญ่มี नियमตามอำเภอใจที่ต้องจำเยอะ และมักมี ภาษาเฉพาะโดเมน เล็ก ๆ หลายชุด ประมาณว่าสตริงธรรมดาถูกตีความซับซ้อนกว่า atoi มาก
  อีกทั้งในหลายด้าน เช่น การกำหนดช่วงของแกน การจัดการจุดจำนวนมหาศาล ก็มีบางอย่างที่จากมุมมองของผมดูผิดปกติ
  D3 บังคับให้ทำหลายอย่างเองก็จริง แต่อินเทอร์เฟซสำหรับสิ่งเหล่านั้นเข้าใจได้เป็นธรรมชาติในเชิงแนวคิด ผมมองว่าการทำให้ถูกต้องด้วย D3.js ดีกว่าการใช้โค้ดเอนกประสงค์ที่อ้วนเทอะทะและบั๊กเยอะของคนอื่นผ่าน API ที่ให้ความรู้สึกเหมือนต่อเรือในขวด
- เคยใช้ D3 มากจนเคยทำ integration สำหรับ AngularJS และ Angular ด้วย มันทรงพลังก็จริง แต่รู้สึกเสมอว่า ไม่เป็นธรรมชาติอย่างมาก
  ใช้ผิดได้ง่าย ดีบักยาก และเข้าใจยาก
  ไม่ได้หมายความว่าปัญหานี้แก้ได้ง่าย ๆ หากต้องทำกราฟิกที่ขับเคลื่อนด้วยข้อมูลแบบเฉพาะเจาะจงมาก ๆ ก็คงยังมีโอกาสสูงที่จะเลือก D3 อยู่ดี
- อินเทอร์เฟซการคำนวณสำหรับมนุษย์ ของแคลคูลัสถูกขัดเกลาอย่างพิถีพิถันมาหลายชั่วอายุคน แค่อ่านต้นฉบับของ Newton นิดหน่อยก็จะเห็นทันทีว่าเมื่อก่อนมันไม่ได้เป็นแบบนี้มาตลอด
  การเอา API ไปเทียบกับมาตรฐานแบบนั้น ดูแล้วไม่ค่อยยุติธรรมเท่าไร
- เคยมีประสบการณ์แบบเดียวกัน ในฐานะ tech lead ตอนนี้ ผมยืนกรานอย่างหนักว่าอย่าใช้ไลบรารีที่ต้องการ ความรู้เฉพาะโดเมน ในระดับสูง
  ควรหลีกเลี่ยงโค้ดที่แม้แต่ผู้เขียนเองก็ยังเข้าใจได้ยากให้มากที่สุด และ D3 ก็เป็นตัวอย่างเด่นของไลบรารีแบบนั้น
แม้สุดท้ายจะไม่ได้ใช้ D3 ในงานจริง ผมก็คิดว่ามันคุ้มค่าที่จะเรียน แก่นของไลบรารีนี้คือมิติของ สิ่งที่ข้อมูลถูกฉายลงไป กับมิติของตัวข้อมูลเองมักแตกต่างกันเสมอ
ตัวอย่างเช่น ถ้าจะวาดข้อมูลช่วง 0–100 คะแนนบนหน้าจอ 1080p ขนาด 1920x1080 สักช่วงหนึ่งก็ต้องตัดสินใจว่าจะ สเกล ข้อมูลให้เข้ากับการฉายลงหน้าจออย่างไร
จะคำนวณคณิตศาสตร์เองก็ได้ หรือจะให้ไลบรารีอย่าง D3 คำนวณให้ก็ได้
ต่อให้ไม่ได้วาดข้อมูลบนเว็บ สักวันหนึ่งก็ต้องมีงานวาดข้อมูลลงที่ใดที่หนึ่ง และจะได้มองหาเครื่องมือที่ทำหน้าที่เดียวกันในระบบนิเวศนั้น ซึ่งจะมีประโยชน์
- หนึ่งในโปรแกรม PHP ที่ทำเองเป็นครั้งแรก ๆ คือเครื่องสร้าง PNG ของ กราฟการแจกแจงทวินาม
  จำได้ว่าต้องสเกลสี่เหลี่ยมที่จะวาดในกราฟให้เข้ากับขนาด PNG ที่กำลังสร้าง
  แน่นอนว่ามันเป็นเรื่องเล็กมาก และแตกต่างอย่างสิ้นเชิงจากสิ่งน่าทึ่งที่ D3 ทำได้ แต่ก็เป็นประสบการณ์เจ๋ง ๆ ครั้งแรกที่ได้สร้างภาพบนคอมพิวเตอร์ด้วยตัวเอง
- เป็นคำอธิบายที่ดีในการจับแนวคิดหลัก
  ส่วนตัวแล้ว D3 ไม่เคยให้ความรู้สึกเป็นธรรมชาติเลย ปัญหาอาจอยู่ที่มันพยายามทำหลายอย่างเกินไปใน ระดับการนามธรรม ที่มากเกินไป
  ถ้าเป็นแค่เรื่องการฉายข้อมูลก็เข้าใจง่าย แต่ดูเหมือนการฉายจะผูกกับแกนและองค์ประกอบอื่น ๆ อย่างแนบแน่นด้วย
ปัญหาที่แท้จริงของ D3 คือในฐานะไลบรารี มันไม่ได้ทำ การแสดงผลข้อมูล ให้จริง ๆ เพียงแต่ให้ฟังก์ชันและตัวอย่างสำหรับประกอบการแสดงผลเอง และข้อกำหนดหลักของมันคือความเข้าใจ JavaScript ในระดับผู้เชี่ยวชาญ โดยเฉพาะ closure และ functional programming

ผมมองว่า select และการคำนวณความแตกต่างของ select ที่ mbostock บอกว่าเป็น abstraction แกนหลักของ D3 นั้น ใกล้เคียงกับเครื่องมืออำนวยความสะดวกสำหรับเขียน paint() ที่เรียกซ้ำได้มากกว่า
เพียงแต่คำสั่ง paint ถูกแสดงเป็นคำสั่งแบบ builder, ตัวมันเองถูกผูกไว้ในขอบเขตของ select และมีของตกแต่งเพิ่มเข้ามาว่าสามารถแยกเป็นส่วน ๆ เพื่อทำเอฟเฟกต์หลายอย่างได้เท่านั้น
โดยเฉพาะในตัวอย่างแอนิเมชัน สิ่งที่ D3 ทำให้นั้นน้อยจนน่าตกใจ และงานอย่างการใช้ลูปภายนอกกับการติดตามสถานะตามเวลาต้องทำเอง
D3 ไม่ได้ให้ abstraction สำหรับห่อหุ้มการทำ visualization ไม่ว่าจะเป็นแบบฟังก์ชันหรือรูปแบบอื่น ส่วนนี้จึงถูกทิ้งไว้เป็นการบ้านของผู้อ่าน
สำหรับผู้ใช้ D3 หน้าใหม่ ทั้งหมดนี้เป็นเรื่องน่าประหลาดใจหรือช็อกอย่างมาก คล้ายกับสถานการณ์ที่นำฐานข้อมูลใหม่มาใช้แล้วพบว่ามีแค่ไลบรารี file I/O, ดัชนี B-tree และ query optimizer แต่ต้องเชื่อมทุกอย่างเข้าด้วยกันเอง

visx น่าลองดู จริง ๆ แล้วน่าจะเรียกว่า D4 หรือ Declarative Data Driven Documents มากกว่า
เป็นรูปแบบที่แทนที่ d3-select ซึ่งเป็นโมดูลจัดการ DOM ของ D3 ด้วย React การที่สิ่งนี้เป็นไปได้และทำงานได้ดีเป็นหลักฐานว่า design ของ D3 นั้นยอดเยี่ยม
D3 ไม่ใช่ชุดเครื่องมือทำชาร์ตแบบ matplotlib หรือ ggplot แต่เป็น ไลบรารี low-level สำหรับสร้าง data visualization ตั้งแต่ต้น
ขึ้นอยู่กับเป้าหมาย อาจเป็นเครื่องมือที่จำเป็นหรือไม่จำเป็นก็ได้
ผมเคยชอบ D3.js และใช้เป็นเทคโนโลยีหลักในโปรเจกต์ data visualization หลายสิบงาน ทั้งเชิงพาณิชย์และส่วนตัว แต่ตอนนี้ syntax การ render ดูเก่าจนชวนให้นึกถึง ยุค jQuery
ยังใช้ helper function หลายอย่าง เช่น easing หรือ scaling อยู่ แต่คอมโพเนนต์จริง ๆ สร้างด้วยเฟรมเวิร์กสมัยใหม่แล้ว ในกรณีของผมคือ Vue 3 กับ TypeScript
ถึงอย่างนั้นก็ยังขอบคุณ D3.js สำหรับช่วงเวลาที่งดงาม และที่สอนแนวปฏิบัติที่ดีหลายอย่างของ data visualization
ค่า default และ demo ของ Mike Bostock เป็นทั้งแรงบันดาลใจและตัวอย่างของมาตรฐานที่ดี และเข้ากันได้ดีกับมินิมัลลิสม์ของ Tufte
- ถ้ามีตัวอย่างการใช้ D3 helper function ร่วมกับ Vue 3 และ TypeScript ก็อยากดู
หลังจากเรียน D3 แล้ว ถ้าสมมติว่าจะทำสิ่งที่คล้ายชาร์ต ผมคิดว่าควรย้ายไปใช้ VisX หรือเครื่องมือเทียบเท่าที่ไม่ใช่ React แล้วไม่ต้องหันกลับมา
D3 กับ jQuery คล้ายกันในระดับหนึ่ง และทั้งคู่มีแนวโน้มจะกลายเป็น โค้ดสปาเก็ตตี้ ได้ง่าย เครื่องมืออย่าง VisX เพิ่มโครงสร้างจำนวนมากไว้บน D3 ที่ใช้อยู่ ทำให้ยัง sane ได้
- ผมใช้ D3 แบบเป็นครั้งคราวมานานพอสมควร และเพิ่งเริ่ม React กับ visx อยู่ตอนนี้ มันช่วยอุดช่องว่างระหว่างสองอย่างได้ดี เลยดูมีอนาคต
  แต่ก็สงสัยว่า ถ้าจะทำอะไรที่ custom มากขึ้นเมื่อเทียบกับการใช้ D3 ล้วน ๆ จะรู้สึกว่ามีข้อจำกัดแบบต้องสู้กับเครื่องมือหรือเปล่า
D3 ได้แรงบันดาลใจจาก Grammar of Graphics ของ Wilkinson
อีกเครื่องมือหนึ่งที่ได้แรงบันดาลใจจาก GG คือ ggplot2 ซึ่งตั้งชื่อได้เหมาะเจาะ และเป็นของภาษา R
มันมีอินเทอร์เฟซที่กระชับกว่ามากและใกล้เคียง functional มากกว่า อีกทั้งยังเข้ากันได้ดีกับเครื่องมือที่พบไม่บ่อยชื่อ Rush ซึ่งสามารถ pipe CSV เข้าไปเพื่อสร้างกราฟิกได้อย่างรวดเร็ว กล่าวคือเป็น R one-liner สำหรับเชลล์
ยังมองหาโซลูชันทำไดอะแกรม/ชาร์ตที่ ไม่ใช่เว็บเป็นฐานโดยสมบูรณ์ อยู่ ต้องขับเคลื่อนผ่าน CLI หรือไลบรารีได้ และ output เป็น SVG หรือ PNG ได้
เครื่องมือพวกนี้มักพึ่งพาความสามารถของเบราว์เซอร์ หรือใช้โซลูชัน server-side rendering ที่ดูปะติดปะต่อ โดยใช้ headless browser สำหรับการสร้างฝั่งเซิร์ฟเวอร์
โดยเฉพาะถ้าสร้าง Venn diagram แบบโปรแกรมได้ก็คงดี แปลกที่ด้านนี้แทบไม่มีอะไรเลย
ไลบรารีชาร์ต JavaScript บางตัวรองรับก็จริง แต่โดยรวมดูเหมือนแทบไม่มีการรองรับ
gnuplot ดูดี แต่ไม่มีการรองรับ Venn diagram
มีแค่เอกสารนี้ที่ทำให้เข้าใจ D3 ได้ ผู้เขียนก็ตอบไวและช่วยเหลือดี
ได้ยินคำชมเกี่ยวกับ Vega[1] มามาก และเป็นเครื่องมือที่อยู่บน D3
มันยังเป็น dependency ของ OpenSearch Dashboards ด้วย ทำให้ผู้ใช้สร้าง แดชบอร์ดแบบกำหนดเอง บนข้อมูล log และ observability ได้[2]
ไลบรารี Vega น่าจะช่วยลดปัญหาความยากในการเรียน D3 ที่คนอื่น ๆ พูดถึงได้ในระดับหนึ่ง
[1] https://vega.github.io/vega/docs/
[2] https://opensearch.org/docs/latest/dashboards/visualize/vega...