Cách tạo đồ họa thông tin tương tác: Hướng dẫn trực quan hóa dữ liệu cho người mới bắt đầu. Infographics: các loại, ví dụ về công việc, tương lai
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, chẳng hạn như PNG, JPG hoặc GIF, đồ họa vector trong tệp SVG hoàn toàn có thể mở rộng theo bất kỳ kích thước nào 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. Bạn có thể xem bản demo hoặc tải mã nguồn 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 thành phần đồ họa bằng cách đi tới Đố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 sẽ 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 SVG và mở nó ở 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" ) ; // Hãy chắc chắn rằng bạn đang chạy cái này trên 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 bảo mật.
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à đưa chúng trở lại 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 ả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.
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ừ The New York Times với chủ đề khiêu khích “Tại sao NYT lại 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 công việc thiết kế thủ công ít hơn; dựa trên các thuật toán. Ví dụ, tác phẩm tương tác của New York Times.
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 tiếng Anh), không hề phóng đại, là thư viện JavaScript nguồn mở quan trọng và thống trị nhất trên thị trường. mã nguồn, 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 phần lớn trở nên phổ biến nhờ sự quan tâm đột ngột đến SVG của các nhà thiết kế web, điều này phần lớn là do lợi ích của nó. đồ họa vector trông giống như 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. “Ngoài ra còn có 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 dữ liệu nhàm chán thành một câu chuyện hấp dẫn, đồ họa thông tin hoặc thậm chí là hình ảnh tương tác. Nhận biết các nguyên tắc cơ bản thiết kế đồ họa, điều 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 vài năm qua, đồ họa thông tin đã phát triển từ hình ảnh tĩnh sang trải nghiệm tương tác phong phú với các yếu tố hoạt hình và video được điều chỉnh cho phù hợp với nội dung độc đáo. Nó không còn bị giới hạn ở việc chuẩn bị trước, mẫu phổ quát. Và tuyển tập hôm nay bao gồm những ví dụ hay nhất về đồ họa thông tin thể hiện trải nghiệm thú vị và giàu thông tin sẽ như thế nào.
Hầu hết các đồ họa thông tin trong danh sách này được chọn để hiển thị các cách khác nhau mà các nhà thiết kế tiếp cận trực quan hóa dữ liệu. Tuy nhiên, cũng có một số “sự kết hợp” ở đây minh họa cho sự mờ nhạt giữa ranh giới giữa đồ họa thông tin và trải nghiệm đa phương tiện khi tạo nội dung hấp dẫn và câu chuyện hấp dẫn trên trang đích. Đi chệch khỏi các hình thức truyền thống có nghĩa là chúng ta đang bước vào lãnh thổ truyền thông phức tạp hơn và chính kiểu thử nghiệm với công nghệ và cách kể chuyện này sẽ rất quan trọng trong việc định hình tương lai của thiết kế đồ họa.
1. Bản đồ gió
Bản đồ Gió là một phần thiết kế ngoạn mục thể hiện hướng và tốc độ gió trên khắp Hoa Kỳ. Thiết kế này mang tính nghệ thuật hơn là mục đích thực dụng, và điều này thật tuyệt vời: thật dễ chịu khi chỉ ngồi và quan sát những sợi chỉ mỏng manh uốn lượn trên bản đồ như thế nào. Một ví dụ đơn giản nhưng được cân nhắc kỹ lưỡng về cách đồ họa thông tin hiển thị quỹ đạo hình dạng được hưởng lợi từ hoạt ảnh và hình ảnh chuyển động.
2. Đang bay
Vào năm 2014, The Guardian đã tung ra một đồ họa thông tin có tên In Flight, trong đó hiển thị dữ liệu thời gian thực về các chuyến bay thương mại (dường như nó không được cập nhật nữa, thật đáng tiếc) và cũng bao gồm một bài học về lịch sử hàng không. Những cuộc trò chuyện im lặng giữa các phi hành đoàn khi bắt đầu chương trình tương tác tạo nên một bầu không khí đặc biệt. Có vẻ như ngày nay đồ họa thông tin đang dần trở thành trải nghiệm điện ảnh. Ít nhất thì "Đang bay" cũng chỉ theo hướng đó...
3. Quay số mặt trăng
Không có nhiều điều diễn ra trong đồ họa thông tin Dial A Moon, nhưng nó phục vụ khá tốt mục đích của nó. Vào năm 2015, nhờ NASA, đồ họa thông tin về các giai đoạn của mặt trăng đã được cập nhật hàng giờ và không cần phải lên Google để tìm kiếm thông tin bí ẩn này. Bây giờ bạn có thể xem hình ảnh bằng cách nhập thủ công tháng, ngày và giờ.
4. Ngày với Sao Diêm Vương
Tạp chí Nature xuất bản rất nhiều đồ họa thông tin thú vị dành cho những độc giả quan tâm đến khoa học. Trong số đó có bài về chuyến bay của tàu vũ trụ nổi tiếng gần Sao Diêm Vương (24 Hours Of Pluto). Infographic bao gồm rất nhiều thông tin văn bản, nhưng hình ảnh cung cấp cái nhìn sâu sắc dễ dàng về những điểm nổi bật, từ cấu trúc của hành tinh lùn đến quá trình hình thành các mặt trăng của nó. Phần văn bản hiện có sẵn trên Internet, cũng như hai video hoạt hình từ đồ họa thông tin.
5. Những ngôi nhà ở Mỹ đã thay đổi như thế nào
Thực hiện cuộc hành trình qua Giấc mơ Mỹ vĩ đại được phản ánh qua sự phát triển của phong cách nhà ở. Đồ họa thông tin được minh họa rõ ràng này cho phép bạn ngồi sau tay lái của một chiếc ô tô (cũng thay đổi khi bạn cuộn để theo kịp thời đại) và tìm đường đi từ những năm 1900 đến những năm 2000, đi ngang qua các tòa nhà phổ biến trong từng thập kỷ. Trên con đường này bạn sẽ gặp nhiều vật liệu hữu ích(bao gồm cả điều kiện chính trị xã hội thời đó, cũng như xu hướng thời trang), và tất cả đều kết thúc bằng một câu hỏi thách thức bạn tưởng tượng về tương lai của quê hương Mỹ. Infographic Decades Of American Homes là một ví dụ tuyệt vời về cuộn ngang và nó rất hữu ích ở đây.
6. Sự phát triển của phân tích tiếp thị
Trong đồ họa thông tin Evolution of Insight, công ty trí tuệ người dùng Vision Critical theo dõi sự phát triển của thị trường công nghệ tiếp thị trên toàn thế giới từ những năm 1890 cho đến ngày nay. Nó hoạt động tương tự như đồ họa thông tin Các ngôi nhà ở Mỹ đã thay đổi như thế nào và do đó cho phép bạn so sánh tính hiệu quả của việc sử dụng dòng thời gian tương tác cho hai những câu chuyện khác nhau. Đồ họa thông tin của Decades Of American Homes có lợi ích là bạn có thể nhìn thấy những ngôi nhà khi bạn lái xe, điều này trực quan hơn nhiều so với việc lái xe xuống đại dương. phân tích của Mỹ. Infographic tốt được tạo ra xung quanh nội dung chứ không phải xung quanh nó.
7. Quyền LGBT trên toàn thế giới
The Guardian chiếm một vị trí khác trong danh sách của chúng tôi với đồ họa thông tin tiện lợi này giải thích bối cảnh pháp lý về quyền LGBT trong nhiều vấn đề (hôn nhân, phân biệt đối xử tại nơi làm việc, tội phạm thù hận, v.v.) ở mọi tiểu bang trên thế giới. Chuyển động hình bán nguyệt cung cấp một cách nhanh chóng và dễ dàng để so sánh số liệu thống kê giữa các quốc gia khác nhau và bố cục của đồ họa thông tin luôn giữ vị thế toàn cầu ở vị trí trung tâm. Ngoài ra còn có cuộc gọi mạnh mẽ hành động, với mục tiêu thu hẹp khoảng cách giữa nhận thức đơn giản về vấn đề và hoạt động.
8. Bất bình đẳng có thể khắc phục được.
Một ví dụ tuyệt vời khác về đồ họa thông tin tương tác, Bất bình đẳng có thể khắc phục được, mời khán giả đi sâu vào một vấn đề đồng thời làm cho nó mang tính cá nhân sâu sắc. Người xem được đảm bảo sẽ vẫn quan tâm đến tài liệu cho họ biết sếp của họ đang trả lương thấp bao nhiêu và tại sao. Bằng cách biến người dùng trở thành một phần của câu chuyện, nhà phát triển khơi gợi sự tò mò và hướng dẫn người dùng thực hiện tất cả các bước cần thiết cho đến Lời kêu gọi hành động ở cuối.
“Chúng ta đã để nó xảy ra—làm sao chúng ta có thể sửa chữa nó bây giờ?”
9. Hãy tự vẽ: Thu nhập gia đình dự đoán cơ hội vào đại học của trẻ như thế nào
Nhiều đồ họa thông tin trong danh sách này sử dụng hoạt ảnh và tính tương tác để mang lại trải nghiệm phong phú. Về mặt trực quan, đồ họa thông tin này của New York Times (Bạn vẽ nó: Thu nhập gia đình dự đoán cơ hội học đại học của trẻ em như thế nào) tuân thủ định dạng biểu đồ cổ điển, nhưng nó cũng sử dụng sự hiểu biết về hành vi của người dùng để mở rộng phạm vi thiết kế đồ họa thông tin, cụ thể là kỹ thuật chủ động. và trực quan tương tác. Bằng cách yêu cầu người đọc vẽ đường cong của riêng mình, họ giới thiệu yếu tố tư lợi và do đó cung cấp cho mọi người những thông tin thực sự có giá trị.
Không phải là kết quả tồi tệ nhất! Trục tung là tỷ lệ trẻ em vào đại học. Trục hoành: phân vị thu nhập của cha mẹ
10. Người Mỹ chết như thế nào
Ngoại trừ hình ảnh tiêu đề, ví dụ này chủ yếu chỉ sử dụng các biểu đồ cũ đơn giản để trực quan hóa nội dung. Nhưng điều này không hề nhàm chán vì người dùng có thể điều hướng dữ liệu một cách độc lập bằng cách di chuyển con trỏ dọc theo biểu đồ. Điều này giúp dễ dàng so sánh hơn nhiều, chẳng hạn như số ca tử vong liên quan đến tự tử trong những năm 70 so với hiện nay (gợi ý: hiện nay con số này đang gia tăng), một điều mà biểu đồ tĩnh sẽ không thể thực hiện được một cách gọn gàng.
11.
Kể từ khi Snowfall ra mắt với sự chú ý và khen ngợi rộng rãi, The New York Times đã duy trì được danh tiếng xuất sắc trong lĩnh vực báo chí đa phương tiện. Nhóm xuất bản sử dụng sự kết hợp giữa thiết kế đồ họa thông tin và cách kể chuyện có chiều sâu để tạo ra trải nghiệm hấp dẫn ấn tượng. Họ còn có nhiều ví dụ nổi bật hơn nhưng The Russia Left Behind là tác phẩm đã gây được tiếng vang nhất định. Đồ họa thông tin có chức năng như một chuyến tham quan tương tác ở Nga (bạn định hướng theo cách của mình trên bản đồ).
12. Xe của Bond
Nếu bạn muốn trải nghiệm lịch sử của James Bond bằng cách ngắm nhìn những chiếc xe của anh ấy, thì hãy cảm ơn đại lý xe hơi người Anh Evans Halshaw đã cho bạn cơ hội. Đồ họa thông tin tương tác về Xe Bond của anh ấy cho phép bạn khám phá kiểu dáng và thiết kế của từng chiếc xe của Bond, cùng với một số thông tin thú vị khác. Sử dụng chiến thuật trượt phổ biến, bạn cũng có thể "tiết lộ" chiếc xe với tất cả vẻ hào nhoáng bằng kim loại của nó (theo mặc định chỉ có một thiết kế một màu). Đây là cách các tác giả giải quyết một cách sáng tạo vấn đề cần đưa những bức ảnh không hoàn toàn phù hợp với tính thẩm mỹ của đồ họa thông tin.
13. Màu sắc của chuyển động
The Colors Of Motion là chuỗi đồ họa thông tin phân tích các bộ phim chỉ dựa trên bảng màu của chúng, bắt nguồn từ việc kết hợp tất cả các khung hình. Nếu bạn đã từng thắc mắc thì bây giờ bạn đã có câu trả lời. Không thể tìm thấy tiêu đề trong cơ sở dữ liệu? Chỉ cần gửi tin nhắn cho nhà phát triển - họ chấp nhận yêu cầu.
14. Lăng mộ hoàng gia ở Peru
National Geographic có một bộ sưu tập khá ấn tượng về cái mà họ gọi là "đồ họa tương tác" (hầu hết đều đi kèm với các hình ảnh chi tiết). mô tả văn bản, chẳng hạn như trong trường hợp của Trajan's Column), nhưng chúng tôi đã chọn ví dụ tương đối đơn giản này để nêu bật những kỹ thuật nào thực sự hiệu quả trong đồ họa thông tin tương tác. “Lăng mộ Hoàng gia Wari của Peru” tiết lộ những nét đặc biệt trong việc chôn cất một phụ nữ quý tộc thời đó. Trọng tâm chuyển từ lớp bọc xác ướp sang đồ trang trí và vị trí của nó. Bằng cách chia thông tin thành các phần nhỏ và cho phép người dùng điều hướng giữa chúng, đồ họa tương tác sẽ tránh được những cạm bẫy nguy hiểm nhất: quá tải dữ liệu và hiệu ứng hình ảnh. Hơn nữa, mỗi tương tác tiếp theo sẽ nâng cao trải nghiệm, khiến trải nghiệm trở nên bổ ích hơn nhiều so với việc mọi thứ được trình bày cùng một lúc. Bộ não của chúng ta có một cơ chế loại bỏ những kích thích quá mạnh, và loại này tương tác trở thành giải pháp tuyệt vời cho người dùng, giúp người dùng dễ dàng tiếp thu thông tin.
15. “Trưng cầu dân ý Scotland” là gì? Giải thích cho người không phải người Anh
The Guardian, giống như New York Times, cam kết thực hiện báo chí đa phương tiện và video của họ thực hiện rất tốt một trong những chức năng chính của đồ họa thông tin: đưa những thông tin rườm rà vào dạng có thể quản lý được. Đối với nhiều người trong chúng ta sống bên ngoài Vương quốc Anh, cuộc trưng cầu dân ý là một chủ đề rất khó hiểu. May mắn thay, video này (Giải thích về cuộc trưng cầu dân ý ở Scotland dành cho người không phải người Anh) sẽ giúp bạn nhanh chóng tìm hiểu về nó. khía cạnh quan trọng, mà không cần đi sâu vào lịch sử.
16. Y tế công cộng
Sứ mệnh của Atlantic là phát triển tầm nhìn nhằm cải thiện sức khỏe cộng đồng. Nó đã ủy quyền cho Truth Labs phát triển loạt bài gồm 3 phần về “Sức khỏe dân số” thành cách kể chuyện kỹ thuật số. Mục tiêu chính của nghệ sĩ là duy trì khả năng cuộn tự nhiên của tài liệu và trải nghiệm đọc thông thường của người dùng, đồng thời tạo ra trải nghiệm khác với góc nhìn trực quan. Để biến nó thành hiện thực, họ đã mượn các công cụ và chiến lược từ phim nhưng cũng dựa vào một bộ nguyên tắc thiết kế để hỗ trợ khả năng đọc như một quy tắc chính.
17. Ngũ cốc của Joho
Nhà sản xuất cà phê người Áo Joho's đã tạo ra một trải nghiệm đa phương tiện sống động, Joho's Bean, để kể câu chuyện về nguồn gốc của hạt cà phê. Câu chuyện kết hợp liền mạch âm thanh, video và hình ảnh để thu hút hầu hết mọi giác quan của người dùng. Khi bạn theo dõi một người nông dân bạn nghe thấy một đồn điền cà phê, tiếng chim hót líu lo, tiếng hạt cà phê rang được đóng gói trong túi và âm thanh của những con phố đông đúc và giao thông trong thành phố. Hoàn toàn đắm chìm!
Joho's đưa bạn vào cuộc hành trình giải thích nguồn gốc hạt cà phê của họ
18. Con đường hoang sơ
The Wild Path là trải nghiệm du lịch tương tác được tạo bằng Canvas. Thành phần chính là bản đồ, tạo hiệu ứng sinh động cho đường dẫn trên bản đồ khi bạn cuộn trang. Dự án có thể không hoạt động trong tất cả các trình duyệt. Tuy nhiên, nó đi kèm với một bài viết giải thích tất cả các công nghệ hậu trường để tạo đồ họa thông tin.
19.
Việc The Guardian đưa tin về cuộc bầu cử tổng thống Hoa Kỳ năm 2016 (Kết quả bầu cử trực tiếp) đã mang lại yếu tố thú vị cho hoạt động kinh doanh nghiêm túc về số lượng phòng phiếu và điểm bỏ phiếu. Một đồ họa thông tin tương tác theo dõi phiếu bầu ở bốn tiểu bang. Theo mặc định, biểu đồ hiển thị kết quả cho toàn quốc và nếu người dùng di chuột qua một khu vực trên bản đồ, biểu đồ sẽ hiển thị những con số mà ứng viên đã ghi được ở đó. Các ứng cử viên tổng thống được giới thiệu dưới dạng hình đại diện pixel vui nhộn. Khi đồ họa thông tin được cập nhật theo thời gian thực, mọi người tô màu ở các bang mà họ giành chiến thắng. Đôi khi, một câu trích dẫn sẽ xuất hiện trong bong bóng bên cạnh ứng viên.
Phản ánh kết quả bầu cử trong thời gian thực
Đâ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 tầm quan trọng của điều này, cần nhấn mạnh rằng có bao nhiêu quốc gia vẫn còn hạn chế trong việc tiếp cận nhà vệ sinh sạch và điều này đã thay đổi rất ít 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 đồ. Dưới đây là tổng quan về ba công cụ miễn phí dành cho 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ủa công cụ này bị 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.
Infographic tương tác là gì?Đây là câu hỏi mà khách hàng ngày càng hỏi chúng tôi nhiều hơn. Cho đến gần đây, một số ít cơ quan và studio thậm chí còn hiểu được điều gì Chúng ta đang nói về, nhưng ngày nay các công ty truyền thông theo kịp thời đại không những phải đưa vào bảng giá dịch vụ này mà còn thực hiện nó một cách hiệu quả. Thật không may, không phải ai cũng có thể làm được điều này.
Có một số loại và định nghĩa về đồ họa thông tin tương tác.
Đầu tiên: đồ họa thông tin tương tác là đồ họa thông tin liên quan đến người đọc trong việc kiểm soát dữ liệu được hiển thị. Tính tương tác được tạo bằng công nghệ Flash hoặc JavaScript, HTML 5.
Thứ hai: bất kỳ đồ họa thông tin nào cho phép bạn thay đổi dữ liệu được hiển thị dưới dạng đồ họa trực tuyến.
Các dự án tạo đồ họa thông tin tương tác chỉ đang đạt được đà do tính phức tạp và chi phí cao. Một trong những ví dụ nổi bật về đồ họa thông tin tương tác là dự án “Ai chúc mừng Lukashenko nhậm chức tổng thống”, năm 2011.
Đồ họa thông tin, được cập nhật tương tác, giúp bạn có thể biết nguyên thủ quốc gia nào đã chúc mừng A.G. Lukashenko với cuộc bầu cử năm 2010. Dữ liệu hiển thị trên đồ họa thông tin có thể được chọn theo ảnh của tổng thống, quốc kỳ của đất nước, trên bảng hoặc trên quả địa cầu. Do đó, người dùng đã tự mình chọn dữ liệu nào mình quan tâm và dữ liệu nào sẽ được hiển thị. Trong bảng cũng có thể sắp xếp các quốc gia theo thời gian mà nguyên thủ quốc gia nắm quyền vào thời điểm chúc mừng, theo tình trạng quyền và tự do, chất lượng cuộc sống, tự do báo chí, bầu cử dân chủ trên thực tế. và đánh giá của những kẻ độc tài. Tính khả dụng của những lời chúc mừng đã được kiểm tra trên trang web chính thức của các tổng thống và được thay đổi theo cách thủ công.
Kể từ khi ra mắt của dự án nàyĐã khá nhiều thời gian trôi qua và ngày nay nhiều chuyên gia đang cố gắng tạo ra các đồ họa thông tin tương tác có thể tự động thay đổi thông tin. Mặc dù vậy, điều này ảnh hưởng nghiêm trọng đến ngân sách dự án.
Các công ty lớn của phương Tây là một trong những công ty đầu tiên sử dụng đồ họa thông tin tương tác như một phương tiện để xây dựng danh tiếng hoặc tăng lòng trung thành của người dùng, hiểu rõ giá trị của việc hiển thị thông tin nén theo động lực và khả năng thu hút người dùng.
Một số loại đồ họa thông tin cho phép bạn điều chỉnh tương tác một số thông số và nhận được dữ liệu thú vị. Ví dụ: người dùng được hỏi một câu hỏi để nhập một số nhất định, sau đó biểu đồ hoặc sơ đồ thay đổi trước mắt anh ta - một tài liệu thông tin hoàn toàn mới thu được, việc tạo ra nó mà chính anh ta trở thành người trực tiếp tham gia.
Vì vậy, ví dụ, vào ngày kỷ niệm thứ ba của trình duyệt Công ty Chrome Google đã hình dung ra lịch sử phát triển của các công nghệ và chương trình xem trang web: chúng tôi thực sự khuyên bạn nên theo liên kết và thưởng thức cảnh tượng đầy màu sắc của đồ họa thông tin tương tác trong truyền thống tốt nhất hướng Tây.
Trong ví dụ được đề cập ở trên, người dùng chính Trình duyệt Internet Explorer 9+, Firefox 4+, Safari 4+, Chrome 10+, Opera 11+ có thể chứng kiến hai thập kỷ tiến bộ về công nghệ được sử dụng trong trình duyệt - từ giao thức httpđến các ứng dụng AppCache ngoại tuyến.
Các công ty Nga vẫn chưa thành thạo đồ họa thông tin tương tác, vì ngay cả những đồ họa thông tin đơn giản ngày nay cũng không phải ai cũng có được chất lượng tốt. Mặc dù thực tế rằng dịch vụ tạo đồ họa thông tin tương tác là một sản phẩm mới thị trường Nga, cơ quan của chúng tôi sẵn sàng thực hiện những nhiệm vụ đó ngay hôm nay, vì định dạng nàyđang ngày càng có nhiều nhu cầu hơn. Chi phí của dịch vụ này cao vì công nghệ tương tự bị cô lập và luôn mang tính cá nhân nghiêm ngặt, điều này đòi hỏi phải tạo ra một sản phẩm phần mềm có số “0” cho mỗi nhiệm vụ.
