Data-Science-For-Beginners/translations/th/3-Data-Visualization/13-meaningful-visualizations

การสร้างภาพข้อมูลที่มีความหมาย

การสร้างภาพข้อมูลที่มีความหมาย - Sketchnote โดย @nitya

"ถ้าคุณทรมานข้อมูลนานพอ มันจะยอมรับทุกอย่างที่คุณต้องการ" -- Ronald Coase

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

ในบทเรียนนี้ คุณจะได้เรียนรู้:

1. วิธีเลือกประเภทกราฟที่เหมาะสม
2. วิธีหลีกเลี่ยงการสร้างกราฟที่หลอกลวง
3. วิธีการใช้สี
4. วิธีการจัดสไตล์กราฟเพื่อให้อ่านง่าย
5. วิธีสร้างกราฟแบบเคลื่อนไหวหรือแบบ 3D
6. วิธีสร้างภาพข้อมูลที่สร้างสรรค์

แบบทดสอบก่อนเรียน

เลือกประเภทกราฟที่เหมาะสม

ในบทเรียนก่อนหน้านี้ คุณได้ทดลองสร้างภาพข้อมูลที่น่าสนใจหลากหลายรูปแบบโดยใช้ Matplotlib และ Seaborn ในการสร้างกราฟ โดยทั่วไป คุณสามารถเลือก ประเภทกราฟที่เหมาะสม สำหรับคำถามที่คุณต้องการตอบโดยใช้ตารางนี้:

สิ่งที่คุณต้องการทำ	คุณควรใช้:
แสดงแนวโน้มของข้อมูลตามเวลา	Line
เปรียบเทียบหมวดหมู่	Bar, Pie
เปรียบเทียบยอดรวม	Pie, Stacked Bar
แสดงความสัมพันธ์	Scatter, Line, Facet, Dual Line
แสดงการกระจายตัว	Scatter, Histogram, Box
แสดงสัดส่วน	Pie, Donut, Waffle

✅ ขึ้นอยู่กับลักษณะของข้อมูล คุณอาจต้องแปลงข้อมูลจากข้อความเป็นตัวเลขเพื่อให้กราฟรองรับได้

หลีกเลี่ยงการหลอกลวง

แม้ว่านักวิทยาศาสตร์ข้อมูลจะเลือกกราฟที่เหมาะสมกับข้อมูลอย่างระมัดระวัง แต่ก็ยังมีวิธีที่ข้อมูลสามารถถูกนำเสนอในลักษณะที่พิสูจน์จุดยืนบางอย่างได้ ซึ่งมักจะทำให้ข้อมูลเสียหาย มีตัวอย่างมากมายของกราฟและอินโฟกราฟิกที่หลอกลวง!

🎥 คลิกที่ภาพด้านบนเพื่อดูการบรรยายเกี่ยวกับกราฟที่หลอกลวง

กราฟนี้กลับด้านแกน X เพื่อแสดงสิ่งที่ตรงกันข้ามกับความจริงตามวันที่:

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

ตัวอย่างที่มีชื่อเสียงนี้ใช้สีและกลับด้านแกน Y เพื่อหลอกลวง: แทนที่จะสรุปว่าการเสียชีวิตจากอาวุธปืนเพิ่มขึ้นหลังจากการผ่านกฎหมายที่สนับสนุนอาวุธปืน สายตากลับถูกหลอกให้คิดว่าตรงกันข้าม:

กราฟแปลก ๆ นี้แสดงให้เห็นว่าสัดส่วนสามารถถูกปรับเปลี่ยนได้อย่างน่าขบขัน:

การเปรียบเทียบสิ่งที่ไม่สามารถเปรียบเทียบได้เป็นอีกหนึ่งกลยุทธ์ที่ไม่ซื่อสัตย์ มี เว็บไซต์ที่ยอดเยี่ยม ที่รวบรวม 'ความสัมพันธ์ที่ผิดพลาด' แสดง 'ข้อเท็จจริง' ที่เชื่อมโยงสิ่งต่าง ๆ เช่น อัตราการหย่าร้างในรัฐเมนและการบริโภคมาการีน กลุ่ม Reddit ยังรวบรวม การใช้ข้อมูลที่น่าเกลียด

สิ่งสำคัญคือต้องเข้าใจว่าสายตาสามารถถูกหลอกได้ง่ายเพียงใดจากกราฟที่หลอกลวง แม้ว่าความตั้งใจของนักวิทยาศาสตร์ข้อมูลจะดี แต่การเลือกประเภทกราฟที่ไม่เหมาะสม เช่น กราฟวงกลมที่แสดงหมวดหมู่มากเกินไป ก็อาจทำให้เกิดความเข้าใจผิดได้

สี

คุณได้เห็นในกราฟ 'ความรุนแรงจากอาวุธปืนในฟลอริดา' ว่าสีสามารถเพิ่มความหมายเพิ่มเติมให้กับกราฟ โดยเฉพาะกราฟที่ไม่ได้ออกแบบโดยใช้ไลบรารี เช่น Matplotlib และ Seaborn ซึ่งมาพร้อมกับไลบรารีสีและพาเลตที่ผ่านการตรวจสอบแล้ว หากคุณกำลังสร้างกราฟด้วยตัวเอง ลองศึกษาทฤษฎีสีเล็กน้อย ทฤษฎีสี

✅ โปรดทราบว่าเมื่อออกแบบกราฟ การเข้าถึงเป็นแง่มุมสำคัญของการสร้างภาพข้อมูล ผู้ใช้งานบางคนอาจมีปัญหาด้านการมองเห็นสี - กราฟของคุณแสดงผลได้ดีสำหรับผู้ใช้งานที่มีความบกพร่องทางสายตาหรือไม่?

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

แม้ว่า ความหมายของสี อาจแตกต่างกันในแต่ละส่วนของโลก และมีแนวโน้มที่จะเปลี่ยนแปลงตามเฉดสี โดยทั่วไป ความหมายของสีรวมถึง:

สี	ความหมาย
แดง	อำนาจ
น้ำเงิน	ความไว้วางใจ ความภักดี
เหลือง	ความสุข ความระมัดระวัง
เขียว	ระบบนิเวศ โชค ความอิจฉา
ม่วง	ความสุข
ส้ม	ความสดใส

หากคุณได้รับมอบหมายให้สร้างกราฟที่มีสีแบบกำหนดเอง ตรวจสอบให้แน่ใจว่ากราฟของคุณทั้งเข้าถึงได้ง่ายและสีที่คุณเลือกสอดคล้องกับความหมายที่คุณต้องการสื่อ

การจัดสไตล์กราฟเพื่อให้อ่านง่าย

กราฟจะไม่มีความหมายหากไม่สามารถอ่านได้! ใช้เวลาสักครู่เพื่อพิจารณาการจัดสไตล์ความกว้างและความสูงของกราฟให้เหมาะสมกับข้อมูลของคุณ หากตัวแปรหนึ่ง (เช่น ทั้ง 50 รัฐ) จำเป็นต้องแสดงผล ให้แสดงผลในแนวตั้งบนแกน Y หากเป็นไปได้ เพื่อหลีกเลี่ยงกราฟที่ต้องเลื่อนในแนวนอน

ใส่ชื่อแกน ให้คำอธิบายประกอบหากจำเป็น และเพิ่มคำแนะนำแบบ tooltip เพื่อให้เข้าใจข้อมูลได้ดีขึ้น

หากข้อมูลของคุณเป็นข้อความและมีความยาวบนแกน X คุณสามารถปรับมุมข้อความเพื่อให้อ่านง่ายขึ้น Matplotlib มีการสร้างกราฟแบบ 3D หากข้อมูลของคุณรองรับ กราฟข้อมูลที่ซับซ้อนสามารถสร้างได้โดยใช้ mpl_toolkits.mplot3d

การแสดงกราฟแบบเคลื่อนไหวและแบบ 3D

ภาพข้อมูลที่ดีที่สุดในปัจจุบันบางส่วนเป็นแบบเคลื่อนไหว Shirley Wu มีผลงานที่น่าทึ่งโดยใช้ D3 เช่น 'film flowers' ซึ่งแต่ละดอกไม้เป็นภาพข้อมูลของภาพยนตร์ อีกตัวอย่างหนึ่งสำหรับ Guardian คือ 'bussed out' ซึ่งเป็นประสบการณ์แบบโต้ตอบที่รวมภาพข้อมูลกับ Greensock และ D3 พร้อมบทความแบบเลื่อนเพื่อแสดงวิธีที่ NYC จัดการปัญหาคนไร้บ้านโดยการส่งคนออกจากเมือง

"Bussed Out: How America Moves its Homeless" จาก the Guardian. ภาพข้อมูลโดย Nadieh Bremer & Shirley Wu

แม้ว่าบทเรียนนี้จะไม่เพียงพอที่จะสอนไลบรารีภาพข้อมูลที่ทรงพลังเหล่านี้อย่างละเอียด ลองใช้ D3 ในแอป Vue.js โดยใช้ไลบรารีเพื่อแสดงภาพข้อมูลของหนังสือ "Dangerous Liaisons" เป็นเครือข่ายสังคมแบบเคลื่อนไหว

"Les Liaisons Dangereuses" เป็นนวนิยายที่นำเสนอในรูปแบบจดหมาย เขียนขึ้นในปี 1782 โดย Choderlos de Laclos เล่าเรื่องราวการวางแผนทางสังคมที่โหดร้ายและไร้ศีลธรรมของตัวละครเอกสองคนในชนชั้นสูงของฝรั่งเศสในปลายศตวรรษที่ 18 Vicomte de Valmont และ Marquise de Merteuil ทั้งคู่พบจุดจบของตัวเองในที่สุด แต่ไม่ใช่ก่อนที่จะสร้างความเสียหายทางสังคมอย่างมาก นวนิยายนี้ดำเนินเรื่องผ่านจดหมายที่เขียนถึงบุคคลต่าง ๆ ในวงสังคมของพวกเขา วางแผนแก้แค้นหรือเพียงแค่สร้างปัญหา สร้างภาพข้อมูลของจดหมายเหล่านี้เพื่อค้นพบตัวละครสำคัญในเรื่องราวนี้ในเชิงภาพ

คุณจะสร้างแอปเว็บที่แสดงมุมมองแบบเคลื่อนไหวของเครือข่ายนี้ โดยใช้ไลบรารีที่สร้างขึ้นเพื่อสร้าง ภาพของเครือข่าย โดยใช้ Vue.js และ D3 เมื่อแอปทำงาน คุณสามารถลากโหนดบนหน้าจอเพื่อปรับเปลี่ยนข้อมูลได้

โปรเจกต์: สร้างกราฟเพื่อแสดงเครือข่ายโดยใช้ D3.js

โฟลเดอร์บทเรียนนี้มีโฟลเดอร์ solution ซึ่งคุณสามารถค้นหาโปรเจกต์ที่เสร็จสมบูรณ์เพื่อใช้อ้างอิงได้

1. ทำตามคำแนะนำในไฟล์ README.md ในโฟลเดอร์ starter ที่ root ตรวจสอบให้แน่ใจว่าคุณมี NPM และ Node.js ทำงานบนเครื่องของคุณก่อนที่จะติดตั้ง dependencies ของโปรเจกต์

2. เปิดโฟลเดอร์ starter/src คุณจะพบโฟลเดอร์ assets ซึ่งมีไฟล์ .json ที่มีจดหมายทั้งหมดจากนวนิยาย พร้อมหมายเลข และคำอธิบาย 'to' และ 'from'

3. เติมโค้ดใน components/Nodes.vue เพื่อเปิดใช้งานภาพข้อมูล ค้นหาวิธีที่เรียกว่า createLinks() และเพิ่มลูปซ้อนดังต่อไปนี้

วนลูปผ่านออบเจ็กต์ .json เพื่อจับข้อมูล 'to' และ 'from' สำหรับจดหมาย และสร้างออบเจ็กต์ links เพื่อให้ไลบรารีภาพข้อมูลสามารถใช้งานได้:

//loop through letters
      let f = 0;
      let t = 0;
      for (var i = 0; i < letters.length; i++) {
          for (var j = 0; j < characters.length; j++) {
              
            if (characters[j] == letters[i].from) {
              f = j;
            }
            if (characters[j] == letters[i].to) {
              t = j;
            }
        }
        this.links.push({ sid: f, tid: t });
      }

รันแอปของคุณจากเทอร์มินัล (npm run serve) และสนุกกับภาพข้อมูล!

🚀 ความท้าทาย

สำรวจอินเทอร์เน็ตเพื่อค้นหาภาพข้อมูลที่หลอกลวง ผู้เขียนหลอกผู้ใช้อย่างไร และเป็นการตั้งใจหรือไม่? ลองแก้ไขภาพข้อมูลเพื่อแสดงให้เห็นว่าควรมีลักษณะอย่างไร

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตนเอง

นี่คือบทความบางส่วนเกี่ยวกับภาพข้อมูลที่หลอกลวง:

https://gizmodo.com/how-to-lie-with-data-visualization-1563576606

http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/

ลองดูภาพข้อมูลที่น่าสนใจเกี่ยวกับทรัพย์สินและสิ่งประดิษฐ์ทางประวัติศาสตร์:

https://handbook.pubpub.org/

ดูบทความนี้เกี่ยวกับวิธีที่การเคลื่อนไหวสามารถเพิ่มประสิทธิภาพให้กับภาพข้อมูลของคุณ:

https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4

งานที่ได้รับมอบหมาย

สร้างภาพข้อมูลแบบกำหนดเองของคุณเอง

---

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษาจากผู้เชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้