<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "4ec4747a9f4f7d194248ea29903ae165",
  "translation_date": "2025-08-26T22:42:19+00:00",
  "source_file": "3-Data-Visualization/13-meaningful-visualizations/README.md",
  "language_code": "th"
}
-->
# การสร้างภาพข้อมูลที่มีความหมาย

|![ Sketchnote โดย [(@sketchthedocs)](https://sketchthedocs.dev) ](../../sketchnotes/13-MeaningfulViz.png)|
|:---:|
| การสร้างภาพข้อมูลที่มีความหมาย - _Sketchnote โดย [@nitya](https://twitter.com/nitya)_ |

> "ถ้าคุณทรมานข้อมูลนานพอ มันจะยอมรับทุกอย่างที่คุณต้องการ" -- [Ronald Coase](https://en.wikiquote.org/wiki/Ronald_Coase)

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

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

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

## [แบบทดสอบก่อนเรียน](https://purple-hill-04aebfb03.1.azurestaticapps.net/quiz/24)

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

ในบทเรียนก่อนหน้า คุณได้ทดลองสร้างภาพข้อมูลที่น่าสนใจหลากหลายรูปแบบโดยใช้ Matplotlib และ Seaborn ในการสร้างกราฟ โดยทั่วไป คุณสามารถเลือก [ประเภทกราฟที่เหมาะสม](https://chartio.com/learn/charts/how-to-select-a-data-vizualization/) สำหรับคำถามที่คุณต้องการตอบโดยใช้ตารางนี้:

| สิ่งที่คุณต้องการทำ       | คุณควรใช้:                     |
| -------------------------- | ------------------------------- |
| แสดงแนวโน้มข้อมูลตามเวลา | เส้น                            |
| เปรียบเทียบหมวดหมู่       | แท่ง, วงกลม                    |
| เปรียบเทียบยอดรวม         | วงกลม, แท่งแบบซ้อน            |
| แสดงความสัมพันธ์          | กระจาย, เส้น, Facet, Dual Line |
| แสดงการกระจายตัว          | กระจาย, ฮิสโตแกรม, กล่อง       |
| แสดงสัดส่วน               | วงกลม, โดนัท, วาฟเฟิล         |

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

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

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

[![How Charts Lie โดย Alberto Cairo](../../../../translated_images/tornado.9f42168791208f970d6faefc11d1226d7ca89518013b14aa66b1c9edcd7678d2.th.png)](https://www.youtube.com/watch?v=oX74Nge8Wkw "How charts lie")

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

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

![bad chart 1](../../../../translated_images/bad-chart-1.93130f495b748bedfb3423d91b1e754d9026e17f94ad967aecdc9ca7203373bf.th.png)

[กราฟนี้](https://media.firstcoastnews.com/assets/WTLV/images/170ae16f-4643-438f-b689-50d66ca6a8d8/170ae16f-4643-438f-b689-50d66ca6a8d8_1140x641.jpg) หลอกลวงมากยิ่งขึ้น เนื่องจากสายตาจะถูกดึงไปทางขวาเพื่อสรุปว่าเมื่อเวลาผ่านไป จำนวนผู้ติดเชื้อ COVID ในแต่ละเขตลดลง แต่ถ้าคุณดูวันที่อย่างละเอียด คุณจะพบว่ามันถูกจัดเรียงใหม่เพื่อให้เกิดแนวโน้มลดลงที่หลอกลวง

![bad chart 2](../../../../translated_images/bad-chart-2.c20e36dd4e6f617c0c325878dd421a563885bbf30a394884c147438827254e0e.th.jpg)

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

![bad chart 3](../../../../translated_images/bad-chart-3.6865d0afac4108d737558d90a61547d23a8722896397ec792264ee51a1be4be5.th.jpg)

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

![bad chart 4](../../../../translated_images/bad-chart-4.68cfdf4011b454471053ee1231172747e1fbec2403b4443567f1dc678134f4f2.th.jpg)

การเปรียบเทียบสิ่งที่ไม่สามารถเปรียบเทียบได้เป็นอีกหนึ่งกลยุทธ์ที่ไม่ซื่อสัตย์ มี [เว็บไซต์ที่ยอดเยี่ยม](https://tylervigen.com/spurious-correlations) ที่รวบรวม 'ความสัมพันธ์ที่ผิดพลาด' โดยแสดง 'ข้อเท็จจริง' ที่เชื่อมโยงสิ่งต่างๆ เช่น อัตราการหย่าร้างในรัฐเมนและการบริโภคมาการีน กลุ่ม Reddit ยังรวบรวม [การใช้ข้อมูลที่น่าเกลียด](https://www.reddit.com/r/dataisugly/top/?t=all) อีกด้วย

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

## สี

คุณได้เห็นในกราฟ 'ความรุนแรงจากปืนในฟลอริดา' ข้างต้นว่าสีสามารถเพิ่มความหมายเพิ่มเติมให้กับกราฟ โดยเฉพาะกราฟที่ไม่ได้ออกแบบโดยใช้ไลบรารี เช่น Matplotlib และ Seaborn ซึ่งมาพร้อมกับไลบรารีสีและพาเลตที่ผ่านการตรวจสอบแล้ว หากคุณกำลังสร้างกราฟด้วยมือ ให้ศึกษาสักเล็กน้อยเกี่ยวกับ [ทฤษฎีสี](https://colormatters.com/color-and-design/basic-color-theory)

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

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

แม้ว่า [ความหมายของสี](https://colormatters.com/color-symbolism/the-meanings-of-colors) อาจแตกต่างกันในแต่ละส่วนของโลก และมีแนวโน้มที่จะเปลี่ยนแปลงตามเฉดสี โดยทั่วไป ความหมายของสีรวมถึง:

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

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

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

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

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

หากข้อมูลของคุณเป็นข้อความและมีความยาวบนแกน X คุณสามารถปรับมุมข้อความเพื่อให้อ่านง่ายขึ้น [Matplotlib](https://matplotlib.org/stable/tutorials/toolkits/mplot3d.html) มีการสร้างกราฟแบบ 3D หากข้อมูลของคุณรองรับ กราฟข้อมูลที่ซับซ้อนสามารถสร้างได้โดยใช้ `mpl_toolkits.mplot3d`

![3d plots](../../../../translated_images/3d.0cec12bcc60f0ce7284c63baed1411a843e24716f7d7425de878715ebad54a15.th.png)

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

ภาพข้อมูลที่ดีที่สุดบางส่วนในปัจจุบันเป็นแบบเคลื่อนไหว Shirley Wu มีตัวอย่างที่น่าทึ่งที่สร้างด้วย D3 เช่น '[film flowers](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)' ซึ่งแต่ละดอกไม้เป็นภาพข้อมูลของภาพยนตร์ อีกตัวอย่างหนึ่งสำหรับ Guardian คือ 'bussed out' ซึ่งเป็นประสบการณ์แบบโต้ตอบที่รวมภาพข้อมูลกับ Greensock และ D3 พร้อมบทความแบบเลื่อนเพื่อแสดงวิธีที่ NYC จัดการปัญหาคนไร้บ้านโดยการส่งพวกเขาออกจากเมือง

![busing](../../../../translated_images/busing.7b9e3b41cd4b981c6d63922cd82004cc1cf18895155536c1d98fcc0999bdd23e.th.png)

> "Bussed Out: How America Moves its Homeless" จาก [the Guardian](https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study). ภาพข้อมูลโดย Nadieh Bremer & Shirley Wu

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

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

คุณจะสร้างแอปเว็บที่แสดงมุมมองแบบเคลื่อนไหวของเครือข่ายนี้ โดยใช้ไลบรารีที่สร้างขึ้นเพื่อสร้าง [ภาพของเครือข่าย](https://github.com/emiliorizzo/vue-d3-network) โดยใช้ Vue.js และ D3 เมื่อแอปทำงาน คุณสามารถลากโหนดบนหน้าจอเพื่อปรับเปลี่ยนข้อมูลได้

![liaisons](../../../../translated_images/liaisons.7b440b28f6d07ea430244fdf1fc4c64ff48f473f143b8e921846eda1c302aeba.th.png)

## โปรเจกต์: สร้างกราฟเพื่อแสดงเครือข่ายโดยใช้ 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` เพื่อให้ไลบรารีภาพข้อมูลสามารถใช้งานได้:

```javascript
//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://purple-hill-04aebfb03.1.azurestaticapps.net/quiz/25)

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

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

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

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

[สร้างภาพข้อมูลแบบกำหนดเองของคุณเอง](assignment.md)

---

**ข้อจำกัดความรับผิดชอบ**:  
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์มืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้