Infographic tương tác. Các ví dụ tốt nhất về sử dụng đồ họa thông tin tương tác trên trang đích
Đây là hướng dẫn dành cho người mới bắt đầu về trực quan hóa dữ liệu dành cho bất kỳ ai muốn tìm hiểu cách tạo đồ họa thông tin và bản đồ tương tác.
đồ họa thông tin và bản đồ tương tácđã trở thành một phần của nhiều dự án được thực hiện bởi các nhà hoạt động, nhà báo và các phong trào xã hội. Nhưng còn những tổ chức không có nhà thiết kế toàn thời gian thì sao? Ngay cả trong trường hợp này, bạn có thể tạo tài liệu trực quan chất lượng cao - Người bảo vệđã bảo tôi phải làm thế nào.
Dữ liệu
Điều đầu tiên bạn cần làm là hiểu dữ liệu bạn muốn trực quan hóa.
Hãy tưởng tượng rằng bạn đang thực hiện một chiến dịch kêu gọi cải thiện điều kiện vệ sinh trên toàn thế giới. Để cho thấy điều này quan trọng như thế nào, cần phải nhấn mạnh rằng có bao nhiêu quốc gia vẫn còn truy cập hạn chế dọn dẹp nhà vệ sinh và tình trạng này ít thay đổi trong 10 năm qua. Trong hướng dẫn này, chúng tôi sẽ sử dụng bộ dữ liệu từ Ngân hàng Thế giới.
Hiện tại chúng tôi có dữ liệu 10 năm, nhưng chúng tôi chỉ cần số 2000 và 2012. Vì vậy, sau khi tải xong dữ liệu, chúng ta xóa những hàng, cột không cần thiết (lời khuyên: lưu lại tập tin gốc với dữ liệu).
Bây giờ bạn đã làm sạch dữ liệu, bạn đã sẵn sàng để hình dung nó. Trong trường hợp của chúng tôi, một cột khác đã được thêm vào trước khi trực quan hóa - phần trăm chênh lệch giữa năm 2000 và 2012.
Cách tạo biểu đồ tương tác
Hiển thị dữ liệu trên biểu đồ là cách nhanh nhất và dễ dàng nhất để trực quan hóa thông tin. Các trang web như Datawrapper, Infogr.am và PiktoChart là những công cụ nhẹ và dễ sử dụng cho phép bạn tạo nhiều đồ thị và biểu đồ khác nhau và nhúng chúng vào bất kỳ trang web nào.
Datawrapper có lẽ là trực quan nhất và nó cũng miễn phí. Mặt yếu Vấn đề với công cụ này là nó không hiển thị tốt các tập dữ liệu lớn, vì vậy chúng ta sẽ chỉ hình dung 10 quốc gia có nhiều thay đổi nhất trong 10 năm qua.
Cách tạo biểu đồ bằng Datawrapper:
- Đăng ký trên trang web Datawrapper và tạo biểu đồ mới.
- Sao chép và dán thông tin của bạn vào trường được cung cấp.
- Kiểm tra chi tiết của bạn.
- Bây giờ là phần thú vị - chọn mẫu biểu đồ. Đối với hình dung này, một cái đơn giản đã được chọn biểu đồ tương tác, nhưng bạn có thể chọn từ số lượng lớn các tùy chọn được trình bày trên trang web.
- Bước cuối cùng là chỉnh sửa lịch trình của bạn. Bạn có thể thay đổi màu sắc, thêm tiêu đề, mô tả, v.v.
Cách tạo bản đồ tương tác
Để hiển thị dữ liệu liên quan đến Những đất nước khác nhau, tốt nhất là sử dụng bản đồ. Chúng tôi trình bày cho bạn một cái nhìn tổng quan về ba công cụ miễn phí cho những người mới bắt đầu.
Trình bao bọc dữ liệu
Công cụ này hiện có tùy chọn bản đồ choropleth - tạo độ dốc dựa trên dữ liệu của bạn. Datawrapper tạo bản đồ giống như cách tạo biểu đồ.
Phía sau: một trong những cách nhanh nhất và công cụ đơn giản. Datawrapper sẽ cho bạn biết khi bạn nhập sai tên quốc gia. Một điều hay nữa về công cụ này là nếu bạn di chuột qua màu sắc cụ thể trong truyền thuyết, chỉ những quốc gia có màu này mới được đánh dấu trên bản đồ.
Chống lại: Không có mẫu cho từng quốc gia hoặc thành phố.
Phía sau: miễn phí và dễ sử dụng (đặc biệt là để tạo điểm trên bản đồ).
Chống lại: Tính năng bổ sung, ví dụ, thay đổi bảng màu, có vẻ phức tạp đối với người mới bắt đầu (nhưng nếu bạn biết cách kết nối tệp KML với dữ liệu hiện có, bạn có thể tạo bản đồ như vậy). Thật khó để thêm chú giải vào bản đồ.
Lúc đầu, điều này có vẻ đáng sợ nhưng với công cụ này, bạn có thể tạo nhiều loại bản đồ và tùy chỉnh chúng tùy thuộc vào những gì bạn muốn thấy trên bản đồ.
Phía sau: sẽ cho phép bạn thực hiện nhiều điều chỉnh và thêm các lớp bổ sung. Hoạt động trên thiết bị di động.
Chống lại: nếu bạn dự định tạo nhiều hơn 5 bản đồ và mong muốn nhận được hơn 10.000 lượt xem mỗi tháng, bạn sẽ phải trả tiền để sử dụng công cụ này.
Cách tạo đồ họa thông tin truyền thống
Infographic truyền thống là một hình ảnh tĩnh, màu sắc, trên đó thông tin được hiển thị bằng các con số và biểu tượng. Các công cụ đã được đề cập trước đó - Infogr.am và PiktoChart - sẽ giúp bạn tạo ra một hình ảnh như vậy. Chúng rất dễ sử dụng - bạn chỉ cần kéo và thả thông tin cần thiết và chèn dữ liệu của bạn để tạo biểu đồ. Số lượng mẫu có sẵn trong phiên bản miễn phí công cụ, hạn chế.
Một ví dụ về trực quan hóa nhanh tập dữ liệu của chúng tôi bằng Infogr.am:
Với các công cụ được trình bày trong hướng dẫn này, bất kỳ ai, bất kể trình độ kỹ năng, đều có thể tạo đồ họa thông tin hoặc bản đồ đẹp mắt, mang tính tương tác và truyền tải thông điệp của họ tới nhiều đối tượng.
Có lẽ bạn đã nhận thấy một sự thay đổi lớn đối với thế giới trực tuyến từ nội dung dựa trên văn bản đến nội dung trực quan.
Không thể phủ nhận sức mạnh của hình ảnh trên Internet và trong Cuộc sống hàng ngày. YouTube và Instagram bị chi phối bởi nội dung trực quan; YouTube là trang web được truy cập nhiều thứ 3 trên web và Instagram có hơn 80 triệu bức ảnh được đăng mỗi ngày.
Các bài đăng và bài viết trên blog có khả năng được xem cao hơn 80% nếu chúng có hình ảnh màu, tiêu đề hoặc hình thu nhỏ và mọi người sẽ dành không quá 15 giây trên một trang web nếu nó không thu hút sự chú ý của họ ngay lập tức.
Đồ họa thông tin là một nội dung được khán giả và nhà bán lẻ yêu thích và ngày nay thú vị hơn 800% đối với mọi người so với năm 2012.
Trên hết, nội dung đang được tạo ra ở mức đáng báo động - 60% nhà tiếp thị tạo ra ít nhất Một phần nhỏ nội dung mới mỗi ngày! Bạn có thể tìm hiểu thêm từ bài viết đánh giá.
Khi ngày càng có nhiều người bắt đầu tạo nội dung, một điều trở nên rõ ràng: để được mọi người nhìn thấy, bạn cần phải nổi bật.
Đương nhiên, các nhà tiếp thị nội dung đã suy nghĩ về tương lai của nội dung trực quan, xem xét những gì họ có thể làm bây giờ, những gì họ có thể triển khai và những công nghệ mới sắp ra mắt. Kiểu tư duy cầu tiến này có thể tạo nên hoặc phá vỡ nỗ lực tiếp thị nội dung của bạn; bạn phải thích nghi nếu không bạn sẽ chết đuối.
Với nội dung trực quan như đồ họa thông tin, các nhà tiếp thị có cơ hội duy nhất nhìn thấy tương lai khi nó đến gần. Các công ty, nhà thiết kế đồ họa và các nhà tiếp thị đều bắt đầu sử dụng đồ họa thông tin - cập nhật chúng để khiến chúng trở nên hấp dẫn hơn nữa đối với khán giả của họ. Ngay cả khi bạn “chỉ đăng” đồ họa thông tin thường xuyên, không bao giờ là quá sớm để tìm hiểu về các xu hướng mới bắt đầu phát triển, cũng như không bao giờ là quá sớm để học cách triển khai chúng vào chiến lược tiếp thị nội dung của bạn.
Nếu bạn muốn nhìn vào tương lai và thậm chí có thể học một vài thủ thuật trước những người khác thì bây giờ là lúc!
Dưới đây là ba loại đồ họa thông tin sẽ phổ biến nhất trong tương lai (gần).
Nếu bạn đang tìm kiếm một công cụ tạo đồ họa thông tin thú vị, tôi khuyên bạn nên thử Visme. Để bắt đầu, họ cung cấp Tài khoản miễn phí và xuất sắc tính năng tiện lợi dành cho những người không liên quan đến thiết kế. Bạn có thể có được một tài khoản miễn phí ngay bây giờ.
1. Đồ họa thông tin tương tác
Mặc dù chúng ta đã thấy vẻ đẹp của các trang web tương tác và các trò chơi dễ sử dụng, nhưng đồ họa thông tin tương tác vẫn còn khá mới trong lĩnh vực của chúng. Giống như đồ họa thông tin, rõ ràng chúng chứa một số thông tin và chúng thường rất năng động. Nhưng việc sử dụng các yếu tố tương tác mang lại cho người dùng cơ hội kết nối với thông tin và tạo ra thông tin của riêng họ.
Bất kể doanh nghiệp, sản phẩm, dịch vụ hay thông điệp của bạn là gì, bạn đều có thể tạo đồ họa thông tin tương tác cho phép mọi người tự đánh giá (ví dụ: “tính chỉ số BMI của bạn tại đây”). Người dùng cũng có thể nhấp vào thông tin liên quan để đưa họ đến nguồn tài nguyên chuyên sâu hơn hoặc quay lại trang đích, từ đó tạo ra lưu lượng truy cập. Đó là một cách rất thích ứng và thú vị để thu hút khán giả của bạn.
Nhiều nhà tiếp thị đã thích nghi với loại đồ họa thông tin này và nó chuyển giao nhanh chóng. Nhưng đồng thời, nhiều người vẫn lấy làm cơ sở đồ họa thông tin đơn giản:
….hãy tưởng tượng xem bạn có thể làm gì khác với đồ họa thông tin tương tác.
Bạn co thể thử:
- Sử dụng kỹ thuật cuộn làm cho hình ảnh hoặc hình dạng nổi bật so với nền
- Xây dựng “cửa sổ bật lên” mở rộng vùng văn bản
- Hình ảnh hoặc số liệu thống kê bật lên khi bạn nhấp vào chúng
- Biến đồ họa thông tin của bạn thành nhiều trang mà người dùng có thể xem
Để biết thêm ví dụ chi tiếtĐể có một đồ họa thông tin tương tác, hãy xem cái này:
Để tạo một đồ họa thông tin có tính tương tác cao (với thao tác cuộn, cửa sổ bật lên, v.v.), bạn cần tìm hiểu một chút về HTML5 hoặc CSS hoặc thuê người khác tìm hiểu giúp bạn.
Mặc dù phải nỗ lực nhiều hơn nhưng bạn sẽ được thưởng một phần nội dung độc đáo, hấp dẫn và hiệu quả.
Tại sao bạn nên thử triển khai đồ họa thông tin trong thời gian sắp tới?
- Điều này khuyến khích khán giả tương tác và chia sẻ nội dung của bạn.
- Điều này tạo ra lưu lượng truy cập (thông qua liên kết)
- Điều này chứng tỏ cho khán giả thấy rằng bạn là người sáng tạo, tháo vát và có ý định cung cấp nội dung kịp thời và thú vị.
- Có nhiều lớp đồ họa thông tin tương tác giúp quản lý quá trình phát triển của nó
2. Video và GIF nhúng
Đây là một loại đồ họa thông tin khác mà chúng ta đang thấy ngày càng thường xuyên hơn. Cung cấp đồ họa thông tin video ngắn hoặc thậm chí GIF (Định dạng trao đổi đồ họa) – cách tuyệt vời thu hút sự chú ý và làm cho đồ họa thông tin của bạn nổi bật giữa đám đông. Mặc dù điều này bị giới hạn bởi các nền tảng, nhưng bạn có thể chia sẻ đồ họa thông tin của mình ở thì hiện tại.
Nhiều công cụ đồ họa thông tin đơn giản, chẳng hạn như Easel.ly, cung cấp tùy chọn “Video YouTube được nhúng” hoặc bạn có thể thêm video vào đồ họa thông tin mà bạn tạo trong Photoshop bằng cách sử dụng lớp video. Bạn thậm chí có thể thêm video vào trang chiếu Powerpoint để chuyển thành đồ họa thông tin.
Hơn nữa, bạn có thể tìm thấy hàng triệu ảnh GIF trực tuyến và chèn chúng theo cách tương tự. Điều hấp dẫn ở đây là bạn sẽ phải phân phối đồ họa thông tin của mình dưới dạng URL để đảm bảo rằng nó được nhúng đúng cách vào trang web của bạn. Bạn không được phân phối hoặc lưu các đồ họa thông tin như vậy ở định dạng .jpeg hoặc PDF. Không còn nghi ngờ gì nữa, khi điều này trở nên phổ biến hơn, sẽ có các công cụ chèn video và GIF khác để giúp quá trình này trở nên dễ dàng hơn.
Nhưng nếu bạn muốn sử dụng loại đồ họa thông tin này trước khi mọi người xung quanh bạn, thậm chí cả những chú chó của họ, học cách làm điều đó, hãy bắt đầu ngay bây giờ với các công cụ bạn tìm thấy trên mạng.
Nếu bạn muốn đi đến cấp độ tiếp theo, bạn có thể tạo video từ đồ họa thông tin mà bạn đã có. Đây là một cơ hội tuyệt vời để được nhìn thấy trên YouTube, Instagram và thậm chí trên các nền tảng video như Vimeo, Snapchat và các nền tảng khác. Video dưới đây là một ví dụ tuyệt vời về cách biến đồ họa thông tin thành video.
Tại sao nên nhúng video hoặc GIF vào đồ họa thông tin?
- Điều này mang đến cho bạn yếu tố bất ngờ - mọi người không mong đợi bức ảnh sẽ chuyển động!
- Nó rất thú vị và độc đáo, giúp tăng cơ hội mọi người tương tác và chia sẻ đồ họa thông tin của bạn.
- Cái này cách tốt cho mọi người thấy sự độc đáo của thương hiệu của bạn
3. Infographic hoạt hình
Infographic hoạt hình có số lượng lớn mô hình trực quan và đòi hỏi rất nhiều sự chú ý. Khi người dùng xem một trang, họ thường không mong đợi bất cứ điều gì sẽ di chuyển, vì vậy sẽ là một ý tưởng hay nếu bạn tìm hiểu tất cả các kỹ thuật này trước khi những người khác làm.
Do thực tế là nhiều đồ họa thông tin hoạt hình khá phức tạp và có thể yêu cầu một số thiết kế đồ họa, mã hóa và/hoặc kiến thức về miền phần mềm, chúng được đánh giá rất cao.
Đây là một ví dụ về những gì tôi đang nói đến:
Nếu bạn muốn tìm hiểu thêm về cách tạo đồ họa thông tin hoạt hình, hãy xem đồ họa thông tin này từ Tabletop Whale. Bạn cũng có thể tìm thấy dịch vụ khác nhau, giúp tạo ra những đồ họa thông tin kiểu này. Trong mọi trường hợp, đây là một trong những quá trình phức tạp trong sự phát triển của đồ họa thông tin.
Tại sao bạn nên đầu tư thời gian, sức lực và/hoặc tiền bạc của mình vào việc tạo đồ họa thông tin hoạt hình?
- Điều này thực sự sẽ khiến bạn nổi bật giữa đám đông vì không phải ai cũng có quyền truy cập vào loại phần mềm hoặc nội dung này
- Chỉ trong vài năm nữa, điều này sẽ trở nên phổ biến - bạn sẽ là một trong những người đầu tiên làm điều đó!
- Hoạt hình sẽ làm cho thông tin bên trong đồ họa thông tin trở nên đáng nhớ hơn
- Điều này sẽ truyền cảm hứng cho người dùng làm việc với bạn.
Đây không phải là khoa học viễn tưởng.
Điều này nghe có vẻ quá kỹ thuật và vượt quá khả năng của bạn lúc này, nhưng có khả năng những loại đồ họa thông tin này sẽ trở nên rất phổ biến sau 2-3 năm nữa. Chúng ta có thể thấy sự đột phá mạnh mẽ trong đồ họa thông tin hoạt hình và GIF, đặc biệt là khi GIF tiếp tục phát triển phổ biến. Infographics đang trở thành một trong những loại nội dung được tiêu thụ nhiều nhất và được tạo ra thường xuyên nhất trên Internet. Tại sao? Có, bởi vì não chỉ cần 250 mili giây để tiếp nhận và xử lý ý nghĩa của một biểu tượng.
Nếu một người bình thường dành khoảng 15 giây trên một trang web và sau đó bắt đầu cảm thấy nhàm chán, thì theo lẽ tự nhiên, bạn muốn kéo lên bất cứ thứ gì trên màn hình có thể cản trở họ - hoặc ít nhất là nhận được tin nhắn sau 15 giây hoặc ít hơn. Một số nghiên cứu thậm chí còn chứng minh rằng mọi người có thể tập trung vào thứ gì đó không quá 8 giây và con số này đang giảm dần hàng năm.
Đây là lý do và có lẽ theo sản phẩm nhu cầu thường xuyên của chúng tôi để nhận được thông tin. Chúng ta đang sống trong thời đại thông tin và mọi thông tin đều có sẵn cho chúng ta. Nhưng điều này cũng có nghĩa là càng có nhiều người cố gắng chia sẻ tin nhắn và trả lời mọi thứ câu hỏi có thể, càng nhiều nội dung được tạo ra càng trở thành tiếng ồn xung quanh.
Nếu sự sẵn có của đồ họa thông tin ngày nay là dấu hiệu cho thấy chúng sẽ sớm có mặt ở khắp mọi nơi. Điều này có nghĩa là những thay đổi mới trong công việc của bạn. Không có chiến dịch tiếp thị nào trong lịch sử đạt được thành công bằng cách làm đi làm lại cùng một việc.
Ý tưởng ở đây là xem đồ họa thông tin không chỉ là một hình ảnh jpeg. Infographics có thể được điều chỉnh cho phù hợp với các phương tiện khác nhau và được sử dụng trên nhiều nền tảng khác nhau. Các doanh nhân và nhà tiếp thị đã nhìn thấy tiềm năng trong việc này. Và bạn?
Tương lai của trực quan hóa dữ liệu là tương tác.
Nhưng làm thế nào để bạn tạo ra những đồ họa thông tin tương tác thực sự tuyệt vời?
Infographics có ở khắp mọi nơi và Gần đây nó ngày càng trở nên tương tác.
Trong bài viết hôm nay, chúng tôi sẽ chia sẻ với bạn những bí quyết tạo đồ họa thông tin tương tác, cũng như liên kết đến các tài nguyên hữu ích.
1. Hiểu tâm lý
Trước khi bạn tạo một đồ họa thông tin mang tính tương tác, điều quan trọng là phải hiểu lý do tại sao bạn muốn làm cho nó có tính tương tác.
Như chi tiết trong đồ họa thông tin này, mọi người có thể nhận thức tốt hơn thông tin trực quan. Chúng ta có nhiều khả năng đọc, hiểu và ghi nhớ một bài thuyết trình hơn nếu nó chứa đựng sự hấp dẫn phương tiện trực quan. là một công cụ học tập hiệu quả nhưng thậm chí còn có thể tốt hơn nữa.
Huấn luyện động học – sự thay thế tuyệt vời, vì mọi người tìm hiểu thông tin tốt hơn thông qua các hoạt động thể chất.
Đó là lý do tại sao việc thêm tính tương tác vào lĩnh vực trực quan đầy hứa hẹn sẽ giúp bạn tạo ra những đồ họa thông tin đáng nhớ và hiệu quả hơn nữa.
Sự kết hợp giữa cách tiếp cận trực quan và động học này làm cho đồ họa thông tin hoạt hình trở thành nội dung của tương lai. Tất nhiên, đối với một số chủ đề thì tốt hơn là không nên sử dụng yếu tố tương tác, nhưng trong hầu hết các trường hợp, chúng sẽ chỉ cải thiện nội dung.
Chuyển động bổ sung ý nghĩa cho thông tin, cho phép người dùng kiểm soát trải nghiệm và thu hút trí tưởng tượng theo cách mà đồ họa thông tin tĩnh không thể làm được.
2. Thêm hiệu ứng cuộn
Chip thực tế ảođó là đối với người khác bạn sẽ trông như một thằng ngốc
Phòng thí nghiệm thiết kế Cardboard của Google là một "hướng dẫn" hay dành cho những nhà thiết kế thực tế ảo mới bắt đầu
Infographics - giống như một trò chơi phiêu lưu
Vấn đề với Unity là nó không dễ thực hiện. điều tốt dưới mạng
Thực tế ảo giống như tai nghe cho đôi mắt của bạn
Thực tế ảo yêu cầu một môi trường an toàn; bạn không thể vào đó “khi đang di chuyển”. Điều này hạn chế những gì VR có thể làm
Kết thúc phiên giao dịch nửa đầu ngày Archie Tse từ Cái mới York Times với chủ đề khiêu khích “Tại sao NYT làm công việc ít tương tác hơn”.
Công việc của NYT dựa trên ba quy tắc kể chuyện bằng hình ảnh:
- Nếu người đọc cần nhấp vào thay vì cuộn thì chắc chắn phải có điều gì đó bất thường xảy ra.
- Giả sử rằng chú giải công cụ và bất kỳ hiệu ứng di chuột nào khác sẽ không bao giờ được ai nhìn thấy. Nếu nội dung quan trọng, hãy đảm bảo người đọc nhìn thấy nó ngay lập tức.
- Nếu bạn muốn tạo ra thứ gì đó mang tính tương tác, hãy nhớ rằng sẽ rất tốn kém nếu làm cho nó hoạt động được trên tất cả các nền tảng.
Bạn sẽ phải vẽ lại đồ họa của mình 2 hoặc 3 lần để nó hoạt động trên cả máy tính để bàn và thiết bị di động
Những quy tắc này đã thay đổi cách tiếp cận của NYT như thế nào:
- Hầu hết các hình ảnh trực quan hiện nay đều ở trạng thái tĩnh
- Còn nhiều văn bản hơn
- Nếu cần chuyển động trong ảnh, nó sẽ xuất hiện trong khi cuộn
(Điểm thứ tư nói rằng họ vẫn làm công việc tương tác. Nhưng bây giờ lý do phải RẤT có ý nghĩa).
Chúng tôi đã thực hiện “nhiều bước”. Người dùng dừng lại ở bước 3. Người đọc chỉ muốn cuộn chứ không muốn click
Archie Tse: Cuộn Vs. nhấp chuột
Trong 18 tuần qua, mỗi tối Chủ nhật Andy Kriebel đều đăng đồ họa thông tin và dữ liệu dựa trên VizWiz. Nhiệm vụ là dành ra khoảng một giờ vào thứ Hai, nhanh chóng phân tích trực quan và tạo ra phiên bản của riêng bạn.
Dưới đây chúng tôi công bố kết quả của tuần trước - Chế độ nô lệ trong thế kỷ 21.
#MakeoverMonday của Andy Kriebel. Miêu tả cụ thể và tương tác - trên blog của Andy:
#MakeoverMonday của Andy Cotgreave. Mô tả chi tiết và tương tác - trên blog của Andy:
Tôi cũng biết được rằng 51% người trên thế giới trẻ hơn tôi và 63% ở Nga lớn tuổi hơn, và khả năng tử vong của tôi lúc này là không lớn. Những con số đột nhiên không còn là “thống kê” và gây ấn tượng với tôi.
Trực quan hóa dữ liệu - công dụng bộ lớn dữ liệu với ít hơn tự lập về thiết kế; dựa trên các thuật toán. Ví dụ, công việc tương tác Thời báo New York.
Nghệ thuật thị giác - mã hóa một chiều Những hình ảnh trực quan đẹp đẽ nhưng khó giải mã, chẳng hạn như nghệ thuật tính toán của Kunal Anand.
Vấn đề là gì?
Kết quả là, nhiều tác phẩm chỉ thu hút những người dùng sành sỏi mà không cho phép những độc giả chưa quen biết hiểu được bản chất của vấn đề, từ đó làm mất đi mục đích hình dung - cung cấp thông tin cho công chúng. Đây là lý do tại sao việc nhận biết và hiểu vấn đề về kiến thức trực quan trong bối cảnh trực quan lại rất quan trọng.
Một “ngữ pháp trực quan” mới của báo chí
Dưới đây là ba tác phẩm thử nghiệm các cách trình bày báo chí tương tác. Chúng trông ấn tượng nhưng việc diễn giải chúng có thể là một nhiệm vụ khó khăn đối với nhiều người.
Quyền của người đồng tính ở Hoa Kỳ, theo từng tiểu bang
Số lượng nguồn dữ liệu và công cụ xử lý chúng hiện có ngày nay cho thấy rõ ràng rằng chưa bao giờ có nhiều người cố gắng làm quen với thế giới trực quan hóa dữ liệu đến vậy. Và khi có sẵn nhiều tài liệu như vậy để nghiên cứu thì chỉ có một câu hỏi "Nơi để bắt đầu?" có thể đáng sợ đối với mọi người mới. Vì vậy, thư viện nào là tốt nhất và các chuyên gia khuyên dùng gì? Điều này sẽ được thảo luận trong bài viết này.
Nói về trực quan hóa dữ liệu mà không đề cập đến nó cũng giống như nói về lịch sử sáng tạo những máy tính cá nhân và không nói một lời nào về Steve Jobs. D3 (từ Tài liệu hướng dữ liệu bằng tiếng Anh), không hề phóng đại, là sản phẩm quan trọng và thống trị nhất trên thị trường Thư viện JavaScript nguồn mở, thường được sử dụng để tạo đồ họa SVG. SVG (từ Đồ họa vectơ có thể mở rộng bằng tiếng Anh) lần lượt là một định dạng hình ảnh vector, được hỗ trợ bởi các trình duyệt web nhưng trước đây ít được sử dụng.
Thư viện D3 có được sự phổ biến rộng rãi là nhờ sự quan tâm đột ngột của các nhà thiết kế web đối với SVG. đến một mức độ lớnđược giải thích bằng cách đồ họa vector trông có vẻ thuận lợi trên màn hình với độ phân giải cao(đặc biệt trên màn hình Retina được sử dụng trong thiết bị Apple), ngày càng trở nên phổ biến.
Moritz Stefaner, một chuyên gia trực quan hóa dữ liệu độc lập và chủ sở hữu công ty, cho biết: “Thành thật mà nói, nếu vấn đề là trực quan hóa dữ liệu dựa trên SVG, thì tất cả các thư viện khác thậm chí còn chưa giải quyết được nó”. Sự thật & Vẻ đẹp. "Cũng có khá nhiều dự án thú vị, được tạo trên cơ sở D3, chẳng hạn như NVD3, cung cấp các thành phần đồ họa tiêu chuẩn - sẵn sàng để sử dụng nhưng có thể tùy chỉnh; hoặc giả sử Crossfilter đơn giản là một công cụ lọc dữ liệu nổi bật.”
Scott Murray, nhà thiết kế lập trình viên và tác giả sách Trực quan hóa dữ liệu tương tác cho web, đồng ý với ý kiến trước đó: “D3 cực kỳ mạnh mẽ vì nó tận dụng mọi thứ mà trình duyệt cung cấp. Mặc dù nó cũng có mặt sau: Nếu trình duyệt không hỗ trợ thứ gì đó, chẳng hạn như hình ảnh 3D dựa trên WebGL (từ Thư viện đồ họa web tiếng Anh), thì D3 sẽ không hỗ trợ điều đó."
Và mặc dù thư viện này thực sự phổ biến nhưng nó vẫn chưa giải pháp lý tưởng cho bất kỳ nhiệm vụ nào. Scott Murray cho biết thêm: “Có thể nói, nhược điểm chính của thư viện D3 là nó không quy định hoặc thậm chí đề xuất bất kỳ cách tiếp cận cụ thể nào để trực quan hóa”. “Vì vậy, nó thực sự là một công cụ để tải dữ liệu vào trình duyệt và sau đó tạo các thành phần DOM dựa trên dữ liệu đó.”
Mặc dù D3 là một công cụ tuyệt vời cho các hình ảnh tùy chỉnh, nhưng nếu bạn muốn tạo một biểu đồ tiêu chuẩn mà không cần thực hiện nhiều thao tác về khía cạnh trực quan thì bạn có thể tìm thấy một công cụ như Sao Chức Nữ. Là một khung được phát triển dựa trên D3, Vega cung cấp một giải pháp thay thế để hiển thị các thành phần đồ họa. Sử dụng Vega, bạn có thể trực quan hóa dữ liệu ở định dạng JSON Trung tâm Báo chí Châu Âu và dự án Báo chí theo hướng dữ liệu. Ngày chính xác Khóa học vẫn chưa được biết đến, nhưng bạn có thể đăng ký ngay bây giờ.
Trong năm ngày, những người tham gia khóa học sẽ có thể tìm hiểu báo chí dữ liệu là gì, nó hoạt động như thế nào và họ cần nắm vững những kỹ năng chính nào để trở thành chuyên gia trong lĩnh vực này. Tìm ra nơi để tìm dữ liệu để hỗ trợ câu chuyện của bạn và cách tìm ý tưởng mới trong dữ liệu hiện có. Tìm hiểu nghệ thuật biến những dữ liệu nhàm chán thành một câu chuyện, đồ họa thông tin hấp dẫn hoặc thậm chí trực quan tương tác. Làm quen với những nguyên tắc cơ bản của thiết kế đồ họa mà một nhà báo cần biết.
Giảng viên của khóa học là năm chuyên gia hàng đầu thế giới về báo chí dữ liệu và trực quan hóa.
TRONG bài học này chúng ta sẽ học cách xây dựng đồ họa thông tin tương tác với sử dụng SVG, CSS và JavaScript. Một trong những chủ đề ít được thảo luận là xu hướng các trình duyệt mới tăng cường hỗ trợ cho các tệp SVG. không giống hình ảnh raster, ví dụ PNG, JPG hoặc GIF, Đồ họa vector trong các tệp SVG hoàn toàn có thể mở rộng theo mọi kích thước và sẽ hiển thị ở bất kỳ độ phân giải hoặc mật độ màn hình nào mà không làm giảm chất lượng. Trong nhiều trường hợp, tệp SVG có kích thước nhỏ hơn nhiều và tải nhanh hơn. Nhưng điều thú vị mà một số nhà phát triển không nhận ra là SVG dựa trên đặc tả XML và có thể được áp dụng theo cách tương tự như HTML.
Điều này cũng có nghĩa là chúng ta có thể truy cập và thao tác đồ họa và các thành phần trong tệp SVG bằng cách sử dụng Công nghệ CSS và JavaScript, những thứ mà các nhà phát triển web đã quen thuộc. Các nhà phát triển hiện có thể tạo một số hoạt ảnh và hiệu ứng khá ấn tượng bằng SVG. Hôm nay chúng ta đang khám phá Khả năng SVG sử dụng ví dụ về tạo đồ họa thông tin vector tương tác cho web. Xem bản demo hoặc tải xuống nguồn bạn có thể bằng cách nhấp vào các liên kết bên dưới hình ảnh bên dưới. Bắt đầu nào.
Đang chuẩn bị tệp SVG
Có nhiều cách để tạo đồ họa SVG. Mặc dù có thể tạo SVG bằng cách viết mã thủ công nhưng chúng tôi muốn làm nhiều hơn thế đồ họa phức tạp Có một số loại phần mềm vector có thể xuất ở định dạng SVG. Lựa chọn phổ biến trong số hầu hết các nhà thiết kế có thể có ai đó quen thuộc với chúng ta Adobe Illustrator , nhưng có những người khác ứng dụng công cộng, Ví dụ, Inkscape, có thể phù hợp hơn cho mục đích của chúng tôi.
Bất kể bạn chọn phần mềm nào, khả năng nhóm các đối tượng lại với nhau và có thể đặt tên cho các nhóm đó (bằng cách viết thuộc tính id) vẫn rất cần thiết. Điều này cho phép chúng tôi tổ chức SVG của mình thành một hệ thống phân cấp phù hợp mà sau này chúng tôi có thể truy cập bằng CSS và/hoặc JavaScript. Illustrator và Inkscape có khả năng thực hiện việc này bằng cách chọn nhiều yếu tố đồ họa, sẽ Đối tượng > Nhóm (hoặc Ungroup - rã nhóm) từ menu chính.
Sau đó, bất kỳ đối tượng hoặc nhóm nào cũng có thể được gán tên, tên này trở thành thuộc tính id của nhóm hoặc đối tượng khi xuất, vì vậy hãy tránh khoảng trắng, ký tự đặc biệt và trùng lặp.
Trong Illustrator, điều này có thể được thực hiện trong bảng Layers ( các lớp). Chỉ cần tìm đối tượng bạn muốn đặt tên trong bảng điều khiển, nhấp đúp vào trường lớp và nhập id mong muốn. Trong Inkscape sử dụng Đối tượng > Thuộc tính đối tượng bảng để gán id cho một đối tượng hoặc nhóm. Điều này cũng có thể được thực hiện với Chỉnh sửa > Trình soạn thảo XML bảng điều khiển nơi bạn có thể đăng ký không chỉ id mà còn cả các lớp.
Trong ví dụ của chúng tôi, khi chúng tôi lưu tập tin SVG và mở nó vào soạn thảo văn bản, nó sẽ có cấu trúc như sau:
Đánh dấu ở trên cho chúng ta thấy cấu trúc mà chúng ta đang hướng tới.
Như chúng ta có thể thấy trong phần đánh dấu SVG, mỗi thẻ
Đang tải SVG sang HTML bằng JAVASCRIPT
HTML
Có nhiều cách để đưa hoặc đặt SVG trong HTML. Điều này có thể thực hiện được thông qua việc sử dụng thẻ , nhãn
Đầu tiên, hãy tạo một div trong tài liệu HTML:
JavaScript
Hiện đang sử dụng Đang tải jQuery, tải tệp SVG vào khối #stage và gán cho nó lớp svgLoaded mà chúng ta sẽ sử dụng để kích hoạt hoạt ảnh:
$(function () ( $("#stage" ) .load ("interactive.svg" ,function (response) ( $(this ) .addClass ("svgLoaded" ) ; if // Hãy chắc chắn rằng bạn đang chạy cái này trên một máy chủ web hoặc localhost! } } ) ; } ) ;
Quan trọng: tải SVG từ sử dụng JavaScriptđể truy cập DOM của nó. Chrome (và có thể cả các trình duyệt khác) sẽ không cho phép bạn thực hiện việc này cục bộ; điều này sẽ chỉ hoạt động khi chạy với Giao thức HTTP vì lý do an ninh.
CSS
Xin lưu ý rằng CSS trong hướng dẫn này sẽ không chứa bất kỳ thông số kỹ thuật nào của trình duyệt nhưng các tệp sẽ có.
Trước hết, chúng tôi chỉ định một số kiểu cho khối div. Khi tải SVG, tệp phải vừa với kích thước khối, vì vậy điều quan trọng là phải đặt kích thước khối phù hợp với kích thước canvas SVG.
#stage (chiều rộng: 1024px; chiều cao: 1386px;)
Tạo kiểu cho các phần tử SVG: Đặt "nguồn gốc biến đổi"
Chìa khóa để làm sống động các phần tử trong khung vẽ nằm ở thuộc tính nguồn gốc biến đổi. Theo mặc định, tất cả các phép biến đổi đối với bất kỳ phần tử nào trong SVG đều đến từ khung vẽ SVG (0px, 0px). Đối với bất kỳ phần tử nào mà chúng ta muốn chuyển đổi (ví dụ: chia tỷ lệ, xoay), chúng ta cần đặt điểm gốc biến đổi phù hợp tương ứng với phía bên trái và trên cùng của khung vẽ SVG. Nguồn sẽ khác nhau đối với mỗi phần tử tùy thuộc vào hiệu ứng/hoạt ảnh mong muốn, nhưng trong hầu hết các trường hợp sẽ bằng điểm trung tâm nơi phần tử đã được đặt. Điều này có thể khá tẻ nhạt, nhưng sẽ dễ dàng hơn khi sao chép thông tin tọa độ được cung cấp trong trình soạn thảo vectơ của chúng tôi.
#coffee ( Transform-origin: 517px 484px ; ) #coffee-badge ( Transform-origin: 445px 488px ; ) #coffee-title ( Transform-origin: 310px 396px ; ) #coffee-details ( Transform-origin: 311px 489px ; ) #design ( Transform-origin: 514px 603px ; ) #design-badge ( Transform-origin: 580px 606px ; ) #design-title ( Transform-origin: 712px 513px ; ) #design-details ( Transform-origin: 710px 620px ; ) #build ( Transform-origin: 511px 769px ; ) #build-badge ( Transform-origin: 445px 775px ; ) #build-title ( Transform-origin: 312px 680px ; ) #build-details ( Transform-origin: 310px 790px ; ) #complain ( Transform-origin: 512px 1002px ; ) #complain-badge ( Transform-origin: 586px 1000px ; ) #complain-title ( Transform-origin: 718px 921px ; ) #complain-details ( Transform-origin: 717px 1021px ; ) #bia ( Transform-origin: 513px 1199px ; ) #beer-badge ( Transform-origin: 444px 1193px ; ) #beer-title ( Transform-origin: 313px 1097px ; ) ) #beer-details ( Transform-origin: 316px 1202px ; )
Áp dụng một số phép biến đổi ban đầu
Chúng ta cần đặt kiểu ban đầu để thay đổi vị trí của một số đối tượng. Và cũng cần phải giấu một số đồ vật nhất định, mà chúng tôi không muốn hiển thị cho đến khi chúng tôi di chuột qua chúng.
Để làm điều này chúng ta sẽ sử dụng Bộ chọn CSS. Chúng tôi chủ yếu chọn các đối tượng có “hậu tố” id.
[ id$=huy hiệu] ( /* Bất kỳ phần tử nào có id kết thúc bằng "huy hiệu" */ biến đổi: tỷ lệ (0 . 5 , 0 .5 ) ; ) [ id$=title] ( biến đổi: tỉ lệ(1 . 8 ) dịch(0px , 48px ) ; ) [ id$=details] ( biến đổi: tỉ lệ(0 , 0 ) ; )
Thêm kiểu cho :hover và áp dụng chuyển tiếp
Chúng tôi chọn các phần tử bên trong nhóm được di chuột và biến chúng trở lại thành vị trí ban đầu. Sau đó, chúng tôi thiết lập quá trình chuyển đổi 0,25 giây để có hiệu ứng hoạt hình thú vị.
#timeline > g:hover [ id$=badge] , #timeline > g:hover [ id$=details] ( biến đổi: tỉ lệ(1 , 1 ) ; ) #timeline > g:hover [ id$=title] ( biến đổi : tỉ lệ(1 ) dịch(0px , 0px ) ; ) [ id$=badge] , [ id$=title] , [ id$=details] ( transition: biến đổi 0 .25s dễ dàng vào ra; )
Giới thiệu về Hoạt hình
Chúng tôi sử dụng Hoạt hình CSS. Đầu tiên, chúng ta cần tạo một vài khung hình chính để tạo hiệu ứng cho một số thuộc tính CSS khác nhau:
@keyframes nẹp trái-intro ( 0 % ( biến đổi: TranslateX(220px ) ; độ mờ: 0 ; ) 50 % ( độ mờ: 1 ; biến đổi: dịchX(220px ) ; ) 100 % ( biến đổi: dịchX(0px ) ; ) ) @keyframes nẹp phải-intro ( 0 % ( biến đổi: TranslateX(-220px ) ; độ mờ: 0 ; ) 50 % ( độ mờ: 1 ; biến đổi: dịchX(-220px ) ; ) 100 % ( biến đổi: TranslateX(0px ) ; ) ) @keyframes mờ dần ( 0 % (độ mờ: 0; ) 100 % ( độ mờ: 1 ; ) ) @keyframes Grow-y ( 0 % ( biến đổi: tỉ lệY(0 ) ; ) 100 % ( biến đổi:scaleY(1 ) ; ) ) @keyframes Grow-x ( 0 % ( biến đổi:scaleX(0 ) ; ) 100 % ( biến đổi:scaleX(1 ) ; ) ) @keyframes phát triển ( 0 % ( biến đổi: tỉ lệ(0 , 0 ) ; ) 100 % ( biến đổi: tỉ lệ(1 , 1 ) ; ) )
Tạo chuỗi hoạt ảnh
Chúng ta có thể sử dụng bộ chọn dựa trên lớp svgLoaded mà chúng ta đã sử dụng trước đó.
Để đặt chuỗi hoạt ảnh, chúng tôi sẽ đặt thuộc tính animation-delay và đặt animation-fill-mode: ngược để hoạt ảnh sẽ có các khoảng dừng.
SvgLoaded #logo ( hoạt ảnh: fade-in 0 .5s easy-in-out; ) .svgLoaded #quote-text ( animation: fade-in 0 .5s easy-in-out 0 .75s ; animation-fill-mode: back ; ) .svgLoaded #quote-left-brace ( animation: left-brace-intro 1s easy-in-out 0 .25s ; animation-fill-mode: backs; ) .svgLoaded #quote-right-brace ( animation: right- cú đúp-intro 1s dễ dàng ra vào 0 ,25s ; chế độ điền hoạt ảnh: ngược; ) .svgLoaded #background ( hoạt ảnh: Grow-y 0 .5s dễ dàng ra vào 1 ,25s ; nguồn gốc biến đổi: 512px 300px ; chế độ điền hoạt ảnh: ngược; ) .svgLoaded #background > g ( hoạt hình: Grow-x 0 .25s dễ dàng ra vào 1 .75s ; chế độ điền hoạt ảnh: lùi; ) .svgLoaded #background > g: loại cuối cùng ( Transform-origin: 458px 877px ; ) .svgLoaded #background > g:first-of-type ( Transform-origin: 563px 877px ; ) .svgLoaded #coffee , .svgLoaded #design , .svgLoaded #build , .svgLoaded #complain , .svgLoaded #beer ( animation: tăng 0,25 giây dễ dàng ra vào; chế độ điền hoạt ảnh: ngược; ) .svgLoaded #coffee ( animation-delay: 2s; ) .svgLoaded #design ( animation-delay: 2 .25s ; ) .svgLoaded #build ( animation-delay: 2 .5s ; ) .svgLoaded #complain ( animation-delay: 2 ,75 giây ; ) .svgLoaded #beer ( animation-delay: 3s; )
Phông chữ TRANG WEB
Vì chúng tôi đã sử dụng phông chữ tùy chỉnh trong tệp SVG của mình nên chúng tôi cũng cần đưa chúng vào trang web của mình. Điều quan trọng là phải chỉ định chính xác tên phông chữ được sử dụng khi xuất SVG. Chúng tôi mở tệp SVG trong trình soạn thảo văn bản và chỉ cần tìm văn bản có phông chữ được sử dụng và xem thuộc tính font-family:
Như chúng ta có thể thấy, tệp SVG đã được xuất bằng phông chữ họ phông chữ có tên 'Giải đấuGothic'. Vì vậy, chúng ta chỉ cần xác định phông chữ web trong CSS bằng cùng một tên.
@font-face ( font-family : "LeagueGothic" ; url ( "../fonts/league-gothic/league-gothic.eot.woff") định dạng("woff" ); )
Đây là tất cả! Chúng tôi hy vọng bạn thích hướng dẫn này và thấy nó hữu ích và mang tính thông tin. Chúng tôi rất muốn nghe ý kiến của bạn.
Dịch thuật - Phòng trực.
