15 KiB

Raw Permalink Blame History

Tạo Các Hình Minh Họa Dữ Liệu Có Ý Nghĩa


Hình Minh Họa Dữ Liệu Có Ý Nghĩa - Sketchnote của @nitya

"Nếu bạn tra tấn dữ liệu đủ lâu, nó sẽ thú nhận bất cứ điều gì" -- Ronald Coase

Một trong những kỹ năng cơ bản của một nhà khoa học dữ liệu là khả năng tạo ra các hình minh họa dữ liệu có ý nghĩa, giúp trả lời các câu hỏi mà bạn có thể có. Trước khi minh họa dữ liệu, bạn cần đảm bảo rằng dữ liệu đã được làm sạch và chuẩn bị, như bạn đã làm trong các bài học trước. Sau đó, bạn có thể bắt đầu quyết định cách tốt nhất để trình bày dữ liệu.

Trong bài học này, bạn sẽ xem xét:

Cách chọn loại biểu đồ phù hợp
Cách tránh biểu đồ gây hiểu lầm
Cách làm việc với màu sắc
Cách định dạng biểu đồ để dễ đọc
Cách xây dựng các giải pháp biểu đồ động hoặc 3D
Cách tạo ra một hình minh họa sáng tạo

Câu hỏi trước bài học

Chọn loại biểu đồ phù hợp

Trong các bài học trước, bạn đã thử nghiệm xây dựng nhiều loại hình minh họa dữ liệu thú vị bằng cách sử dụng Matplotlib và Seaborn. Nói chung, bạn có thể chọn loại biểu đồ phù hợp cho câu hỏi bạn đang đặt ra bằng cách sử dụng bảng sau:

Bạn cần:	Bạn nên sử dụng:
Hiển thị xu hướng dữ liệu theo thời gian	Đường (Line)
So sánh các danh mục	Cột (Bar), Tròn (Pie)
So sánh tổng số	Tròn (Pie), Cột xếp chồng
Hiển thị mối quan hệ	Điểm (Scatter), Đường, Facet, Đường kép
Hiển thị phân phối	Điểm (Scatter), Histogram, Box
Hiển thị tỷ lệ	Tròn (Pie), Donut, Waffle

✅ Tùy thuộc vào cấu trúc dữ liệu của bạn, bạn có thể cần chuyển đổi dữ liệu từ dạng văn bản sang số để biểu đồ hỗ trợ.

Tránh gây hiểu lầm

Ngay cả khi một nhà khoa học dữ liệu cẩn thận chọn đúng biểu đồ cho đúng dữ liệu, vẫn có nhiều cách để dữ liệu được trình bày nhằm chứng minh một quan điểm, thường là làm tổn hại đến tính chính xác của dữ liệu. Có rất nhiều ví dụ về các biểu đồ và đồ họa thông tin gây hiểu lầm!

🎥 Nhấp vào hình ảnh trên để xem một bài nói chuyện về các biểu đồ gây hiểu lầm

Biểu đồ này đảo ngược trục X để hiển thị điều ngược lại với sự thật, dựa trên ngày tháng:

Biểu đồ này thậm chí còn gây hiểu lầm hơn, vì mắt người bị thu hút về phía bên phải để kết luận rằng, theo thời gian, số ca COVID đã giảm ở các quận khác nhau. Thực tế, nếu bạn nhìn kỹ vào các ngày tháng, bạn sẽ thấy chúng đã được sắp xếp lại để tạo ra xu hướng giảm giả.

Ví dụ nổi tiếng này sử dụng màu sắc VÀ trục Y bị lật để đánh lừa: thay vì kết luận rằng số ca tử vong do súng tăng vọt sau khi thông qua luật thân thiện với súng, thực tế mắt người bị đánh lừa để nghĩ rằng điều ngược lại là đúng:

Biểu đồ kỳ lạ này cho thấy cách tỷ lệ có thể bị thao túng, dẫn đến hiệu ứng hài hước:

So sánh những thứ không thể so sánh là một thủ thuật mờ ám khác. Có một trang web tuyệt vời về 'mối tương quan giả' hiển thị các 'sự thật' như tỷ lệ ly hôn ở Maine và mức tiêu thụ bơ thực vật. Một nhóm trên Reddit cũng thu thập các cách sử dụng dữ liệu xấu xí.

Điều quan trọng là phải hiểu mắt người dễ bị đánh lừa bởi các biểu đồ gây hiểu lầm như thế nào. Ngay cả khi ý định của nhà khoa học dữ liệu là tốt, việc chọn một loại biểu đồ không phù hợp, chẳng hạn như biểu đồ tròn hiển thị quá nhiều danh mục, cũng có thể gây hiểu lầm.

Màu sắc

Bạn đã thấy trong biểu đồ 'bạo lực súng ở Florida' ở trên rằng màu sắc có thể cung cấp một lớp ý nghĩa bổ sung cho biểu đồ, đặc biệt là những biểu đồ không được thiết kế bằng các thư viện như Matplotlib và Seaborn, vốn đi kèm với các thư viện và bảng màu đã được kiểm chứng. Nếu bạn đang tạo một biểu đồ bằng tay, hãy nghiên cứu một chút về lý thuyết màu sắc.

✅ Hãy lưu ý, khi thiết kế biểu đồ, rằng khả năng tiếp cận là một khía cạnh quan trọng của hình minh họa. Một số người dùng của bạn có thể bị mù màu - liệu biểu đồ của bạn có hiển thị tốt cho những người dùng bị suy giảm thị lực không?

Hãy cẩn thận khi chọn màu sắc cho biểu đồ của bạn, vì màu sắc có thể truyền tải ý nghĩa mà bạn không mong muốn. 'Những quý cô màu hồng' trong biểu đồ 'chiều cao' ở trên truyền tải một ý nghĩa 'nữ tính' rõ ràng, làm tăng thêm sự kỳ quặc của chính biểu đồ.

Mặc dù ý nghĩa của màu sắc có thể khác nhau ở các khu vực khác nhau trên thế giới và có xu hướng thay đổi theo sắc thái, nhưng nói chung, ý nghĩa của màu sắc bao gồm:

Màu sắc	Ý nghĩa
đỏ	quyền lực
xanh	tin cậy, trung thành
vàng	hạnh phúc, cảnh báo
xanh lá	sinh thái, may mắn, ghen tị
tím	hạnh phúc
cam	sôi động

Nếu bạn được giao nhiệm vụ tạo một biểu đồ với màu sắc tùy chỉnh, hãy đảm bảo rằng biểu đồ của bạn vừa dễ tiếp cận vừa phù hợp với ý nghĩa mà bạn muốn truyền tải.

Định dạng biểu đồ để dễ đọc

Biểu đồ sẽ không có ý nghĩa nếu chúng không dễ đọc! Hãy dành một chút thời gian để cân nhắc định dạng chiều rộng và chiều cao của biểu đồ sao cho phù hợp với dữ liệu của bạn. Nếu một biến (chẳng hạn như tất cả 50 bang) cần được hiển thị, hãy hiển thị chúng theo chiều dọc trên trục Y nếu có thể để tránh biểu đồ cuộn ngang.

Gắn nhãn trục, cung cấp chú giải nếu cần thiết và cung cấp các chú giải công cụ (tooltips) để hiểu dữ liệu tốt hơn.

Nếu dữ liệu của bạn là văn bản và dài dòng trên trục X, bạn có thể xoay góc văn bản để dễ đọc hơn. Matplotlib cung cấp khả năng vẽ 3D, nếu dữ liệu của bạn hỗ trợ. Các hình minh họa dữ liệu phức tạp có thể được tạo ra bằng cách sử dụng mpl_toolkits.mplot3d.

Hiển thị biểu đồ động và 3D

Một số hình minh họa dữ liệu tốt nhất hiện nay là động. Shirley Wu có những ví dụ tuyệt vời được thực hiện với D3, chẳng hạn như 'film flowers', nơi mỗi bông hoa là một hình minh họa của một bộ phim. Một ví dụ khác cho Guardian là 'bussed out', một trải nghiệm tương tác kết hợp các hình minh họa với Greensock và D3 cùng với định dạng bài viết cuộn để kể câu chuyện về cách NYC xử lý vấn đề người vô gia cư bằng cách đưa họ ra khỏi thành phố.

"Bussed Out: How America Moves its Homeless" từ the Guardian. Hình minh họa bởi Nadieh Bremer & Shirley Wu

Mặc dù bài học này không đủ để đi sâu vào việc dạy các thư viện hình minh họa mạnh mẽ này, hãy thử sử dụng D3 trong một ứng dụng Vue.js bằng cách sử dụng một thư viện để hiển thị hình minh họa của cuốn sách "Dangerous Liaisons" dưới dạng một mạng xã hội động.

"Les Liaisons Dangereuses" là một tiểu thuyết dưới dạng thư từ, hoặc một tiểu thuyết được trình bày dưới dạng một loạt các lá thư. Được viết vào năm 1782 bởi Choderlos de Laclos, nó kể câu chuyện về những mưu đồ xã hội độc ác và vô đạo đức của hai nhân vật chính đối đầu nhau trong giới quý tộc Pháp cuối thế kỷ 18, Vicomte de Valmont và Marquise de Merteuil. Cả hai đều gặp kết cục bi thảm nhưng không phải trước khi gây ra rất nhiều tổn hại xã hội. Tiểu thuyết diễn ra dưới dạng một loạt các lá thư được viết cho nhiều người trong vòng tròn của họ, âm mưu trả thù hoặc đơn giản là để gây rắc rối. Hãy tạo một hình minh họa về những lá thư này để khám phá các nhân vật chính của câu chuyện, một cách trực quan.

Bạn sẽ hoàn thành một ứng dụng web hiển thị một cái nhìn động về mạng xã hội này. Nó sử dụng một thư viện được xây dựng để tạo ra một hình minh họa mạng bằng Vue.js và D3. Khi ứng dụng đang chạy, bạn có thể kéo các nút xung quanh trên màn hình để sắp xếp lại dữ liệu.

Dự án: Tạo một biểu đồ hiển thị mạng bằng D3.js

Thư mục bài học này bao gồm một thư mục solution nơi bạn có thể tìm thấy dự án hoàn chỉnh để tham khảo.

Thực hiện theo các hướng dẫn trong tệp README.md trong thư mục gốc của thư mục starter. Đảm bảo rằng bạn đã cài đặt NPM và Node.js trên máy của mình trước khi cài đặt các phụ thuộc của dự án.
Mở thư mục starter/src. Bạn sẽ thấy một thư mục assets nơi bạn có thể tìm thấy một tệp .json chứa tất cả các lá thư từ tiểu thuyết, được đánh số, với chú thích 'to' và 'from'.
Hoàn thành mã trong components/Nodes.vue để kích hoạt hình minh họa. Tìm phương thức có tên createLinks() và thêm vòng lặp lồng nhau sau.

Duyệt qua đối tượng .json để lấy dữ liệu 'to' và 'from' cho các lá thư và xây dựng đối tượng links để thư viện hình minh họa có thể sử dụng:

//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 });
      }

Chạy ứng dụng của bạn từ terminal (npm run serve) và tận hưởng hình minh họa!

🚀 Thử thách

Khám phá internet để tìm các hình minh họa gây hiểu lầm. Tác giả đã đánh lừa người dùng như thế nào, và điều đó có phải là cố ý không? Hãy thử chỉnh sửa các hình minh họa để hiển thị chúng đúng cách.

Câu hỏi sau bài học

Ôn tập & Tự học

Dưới đây là một số bài viết để đọc về hình minh họa dữ liệu gây hiểu lầm:

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

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

Hãy xem các hình minh họa thú vị về tài sản và hiện vật lịch sử:

https://handbook.pubpub.org/

Xem qua bài viết này về cách hoạt ảnh có thể nâng cao hình minh họa của bạn:

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

Bài tập

Tự tạo hình minh họa tùy chỉnh của bạn

Tuyên bố miễn trừ trách nhiệm:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI Co-op Translator. Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với các thông tin quan trọng, khuyến nghị sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.

15 KiB Raw Permalink Blame History