Dalam beberapa tahun terakhir, infografis telah berevolusi dari gambar statis menjadi pengalaman interaktif yang kaya dengan elemen animasi dan video yang disesuaikan konten unik. Hal ini tidak lagi terbatas pada persiapan sebelumnya, templat universal. Dan pilihan hari ini berisi contoh infografis terbaik yang menunjukkan seperti apa pengalaman yang menarik dan informatif.

Sebagian besar infografis dalam daftar ini dipilih untuk ditampilkan berbagai cara, yang digunakan desainer untuk melakukan pendekatan visualisasi data. Namun, ada juga beberapa “hibrida” di sini yang menggambarkan kaburnya garis antara infografis dan pengalaman multimedia saat membuat konten menarik dan cerita menarik di halaman arahan. Menyimpang dari bentuk-bentuk tradisional berarti kita memasuki wilayah media yang lebih kompleks, dan eksperimen dengan teknologi dan penyampaian cerita seperti inilah yang akan berdampak pada media. penting untuk membentuk masa depan desain Grafis.

1. Peta angin

Peta Angin adalah desain menakjubkan yang menunjukkan arah dan kecepatan angin di Amerika Serikat. Desain ini memiliki tujuan artistik daripada tujuan utilitarian, dan ini luar biasa: sangat menyenangkan untuk hanya duduk dan menyaksikan bagaimana benang tipis dan tipis melilit peta. Contoh sederhana namun dipikirkan dengan matang tentang bagaimana infografis yang menunjukkan lintasan bentuk mendapat manfaat dari animasi dan gambar bergerak.

2. Dalam penerbangan

Pada tahun 2014, The Guardian meluncurkan infografis berjudul In Flight, yang menampilkan data real-time tentang penerbangan komersial (sepertinya sudah tidak diperbarui lagi, sayang sekali) dan juga memuat pelajaran tentang sejarah penerbangan. Percakapan hening antar awak pesawat di awal pertunjukan interaktif menciptakan suasana istimewa. Sepertinya infografis perlahan berubah menjadi pengalaman sinematik akhir-akhir ini. Setidaknya "In Flight" menunjuk ke arah itu...

3. Panggil Bulan

Tidak banyak hal yang terjadi dalam infografis Dial A Moon, tetapi infografik tersebut memenuhi tujuannya dengan cukup baik. Pada tahun 2015, berkat NASA, infografis fase bulan diperbarui setiap jam, dan tidak perlu membuka Google untuk mencari informasi misterius ini. Sekarang Anda dapat melihat gambar dengan memasukkan bulan, hari dan waktu secara manual.

4. Hari bersama Pluto

Majalah Nature menerbitkan banyak infografis menarik untuk pembacanya yang tertarik pada sains. Diantaranya ada satu tentang penerbangan terkenal itu pesawat ruang angkasa dekat Pluto (24 Jam Pluto). Infografisnya memuat banyak informasi teks, tetapi visualnya memudahkan untuk memahami hal-hal penting, mulai dari struktur planet kerdil hingga proses pembentukan bulan-bulannya. Sekarang tersedia di Internet bagian teks, serta dua video infografis animasi.

5. Bagaimana rumah-rumah di Amerika telah berubah

Ikuti perjalanan melintasi Impian Besar Amerika yang tercermin melalui evolusi gaya rumah. Infografis yang diilustrasikan dengan baik ini memungkinkan Anda berada di belakang kemudi mobil (juga berubah seiring Anda menggulir untuk mengikuti perkembangan zaman) dan menavigasi jalan Anda dari tahun 1900-an hingga 2000-an, melewati gedung-gedung yang populer selama beberapa dekade. Di jalan ini Anda akan bertemu banyak orang bahan yang berguna(termasuk kondisi sosial politik saat itu, serta tren fesyen), dan semuanya diakhiri dengan pertanyaan yang menantang Anda membayangkan masa depan rumah tangga Amerika. Infografis Rumah Amerika Selama Puluhan Tahun - contoh yang bagus pengguliran horizontal, ini berguna di sini.

6. Evolusi analisis pemasaran

Dalam infografis Evolution of Insight, perusahaan intelijen pengguna Vision Critical melacak perkembangan pasar teknologi pemasaran di seluruh dunia dari tahun 1890-an hingga saat ini. Fungsinya mirip dengan infografis Bagaimana Rumah-Rumah di Amerika Berubah, sehingga memungkinkan Anda membandingkan efektivitas penggunaan garis waktu interaktif untuk dua hal yang sangat berbeda. cerita yang berbeda. Infografis Decades Of American Homes memiliki keuntungan melihat rumah saat Anda berkendara, yang jauh lebih intuitif daripada bepergian melalui Great American Analytics. Infografis yang bagus dibuat berdasarkan konten, bukan di sekitarnya.

7. Hak-hak LGBT di seluruh dunia

The Guardian mendapat tempat lain dalam daftar kami dengan infografis bagus yang menjelaskan lanskap hukum hak-hak LGBT di berbagai isu (perkawinan, diskriminasi di tempat kerja, kejahatan rasial, dll.) di setiap negara di dunia. Gerakan setengah lingkaran menyediakan cara yang cepat dan mudah untuk membandingkan statistik antara berbagai negara, dan komposisi infografisnya menjadikan status global tetap menjadi yang terdepan. Ada juga seruan kuat untuk bertindak di sini, yang bertujuan untuk menjembatani kesenjangan antara kesadaran dan aktivisme.

8. Ketimpangan bisa diperbaiki.

Contoh bagus lainnya dari infografis interaktif, Inequality Is Fixable (Ketimpangan Dapat Diperbaiki), mengundang audiens untuk menyelami suatu masalah sambil menjadikannya sangat pribadi. Pemirsa dijamin akan tetap tertarik dengan materi yang memberi tahu dia seberapa besar gaji atasannya dan alasannya. Dengan menjadikan pengguna sebagai bagian dari cerita, pengembang membangkitkan rasa ingin tahu dan membimbing pengguna melalui segala hal. langkah-langkah yang diperlukan langsung ke Ajakan Bertindak di akhir.

“Kami membiarkannya terjadi—bagaimana kami dapat memperbaikinya sekarang?”

9. Gambarkan sendiri: Bagaimana pendapatan keluarga memprediksi peluang seorang anak untuk melanjutkan ke perguruan tinggi

Banyak infografis dalam daftar ini menggunakan animasi dan interaktivitas untuk memberikan pengalaman yang kaya. Secara visual, infografis dari New York Times (You Draw It: How Family Income Predicts Children's College Chances) ini menganut format grafik klasik, namun juga menggunakan pemahaman perilaku pengguna untuk memperluas cakupan desain infografis, yaitu teknik proaktif. dan visualisasi interaktif. Dengan meminta pembaca menggambar kurva mereka sendiri, mereka memperkenalkan elemen kepentingan pribadi dan dengan demikian memberikan informasi yang benar-benar berharga kepada masyarakat.

Bukan yang terbaik hasil terburuk! Sumbu vertikal adalah persentase anak yang melanjutkan pendidikan ke perguruan tinggi. Sumbu horizontal: persentil pendapatan orang tua

10. Bagaimana Orang Amerika Meninggal

Dengan pengecualian gambar judul, contoh ini sebagian besar hanya menggunakan bagan lama untuk memvisualisasikan konten. Namun ini sama sekali tidak membosankan, karena pengguna dapat menavigasi data secara mandiri dengan menggerakkan kursor di sepanjang grafik. Hal ini membuat lebih mudah untuk membandingkan, misalnya, jumlah kematian akibat bunuh diri di tahun 70an dibandingkan dengan sekarang (petunjuk: sekarang sedang meningkat), sesuatu yang tidak bisa dilakukan dengan baik oleh grafik statis.

11.

Sejak Snowfall memulai debutnya dan mendapat perhatian dan pujian luas, The New York Times telah mempertahankan reputasinya atas keunggulan dalam jurnalisme multimedia. Tim publikasi menggunakan kombinasi desain infografis dan penceritaan yang mendalam untuk menciptakan pengalaman menarik yang mengesankan. Mereka memiliki contoh yang lebih mencolok, tetapi The Russia Left Behind adalah sebuah karya yang menimbulkan resonansi tertentu. Infografis berfungsi sebagai tur interaktif Rusia (Anda menavigasi jalan Anda di peta).

12. Mobil Bond

Jika Anda ingin merasakan sejarah James Bond dengan melihat mobilnya, ucapkan terima kasih kepada dealer mobil Inggris Evans Halshaw karena telah memberi Anda kesempatan. Infografis Bond Cars interaktifnya memungkinkan Anda menjelajahi merek dan desain setiap mobil Bond, serta memberi Anda beberapa tambahan fakta menarik. Dengan menggunakan taktik penggeser yang ada di mana-mana, Anda juga dapat "mengungkapkan" mobil dengan segala kemegahan metaliknya (hanya desain satu warna yang diberikan secara default). Beginilah cara penulis secara kreatif memecahkan masalah perlunya menyertakan foto-foto yang kurang sesuai dengan estetika infografis.

13. Warna gerak

The Colors Of Motion adalah seri infografis yang menganalisis film hanya berdasarkan palet warnanya, yang diperoleh dari penggabungan semua bingkai. Jika Anda pernah bertanya-tanya, sekarang Anda punya jawabannya. Tidak dapat menemukan judul di database? Kirimkan saja pesan kepada pengembang - mereka menerima permintaan.

14. Makam kerajaan di Peru

National Geographic memiliki koleksi yang cukup mengesankan yang mereka sebut "grafik interaktif" (sebagian besar disertai dengan detail deskripsi teks, seperti dalam kasus Kolom Trajan, misalnya), namun kami memilih contoh yang relatif sederhana ini untuk menyoroti teknik mana yang benar-benar efektif dalam infografis interaktif. “Makam Kerajaan Wari Peru” mengungkap kekhasan penguburan seorang wanita bangsawan pada masa itu. Fokusnya beralih dari pembungkus mumi ke dekorasi dan posisinya. Dengan membagi informasi menjadi bagian-bagian kecil dan memungkinkan pengguna untuk bernavigasi di antara informasi tersebut, grafik interaktif menghindari jebakan paling berbahaya: kelebihan data dan efek visual. Selain itu, setiap interaksi selanjutnya akan meningkatkan pengalaman, membuatnya jauh lebih bermanfaat dibandingkan jika semuanya disajikan sekaligus. Otak kita memiliki mekanisme yang menolak rangsangan yang berlebihan, dan tipe ini Interaksi menjadi solusi terbaik bagi pengguna, sehingga mudah dalam menyerap informasi.

15. Apa yang dimaksud dengan “Referendum Skotlandia”? Penjelasan untuk orang non-Inggris

The Guardian, seperti New York Times, berkomitmen pada jurnalisme multimedia, dan video mereka menjalankan salah satu fungsi utama infografis dengan baik: memasukkan informasi yang rumit ke dalam bentuk yang dapat dikelola. Bagi banyak dari kita yang tinggal di luar Inggris, referendum adalah topik yang sangat membingungkan. Untungnya, video ini (Dijelaskan Referendum Skotlandia Untuk Non-Inggris) akan membantu Anda mempelajari aspek-aspek penting dengan cepat tanpa mengharuskan Anda mendalami sejarahnya.

16. Kesehatan masyarakat

Misi Atlantik adalah mengembangkan visi untuk meningkatkan kesehatan masyarakat. Mereka menugaskan Truth Labs untuk mengembangkan seri 3 bagian tentang “Kesehatan Penduduk” menjadi penceritaan digital. Tujuan utama artis adalah untuk mempertahankan pengguliran alami dokumen dan pengalaman membaca normal pengguna, sekaligus menciptakan pengalaman yang berbeda dari perspektif visual. Untuk mewujudkannya, mereka meminjam alat dan strategi dari film, namun juga mengandalkan serangkaian prinsip desain untuk mendukung keterbacaan sebagai aturan utama.

17. Biji-bijian Joho

Produser kopi Austria, Joho's, telah menciptakan pengalaman multimedia yang mendalam, Joho's Bean, untuk menceritakan kisah asal muasal biji kopi. Narasinya dengan mulus menggabungkan audio, video, dan fotografi untuk melibatkan hampir semua indra pengguna Perkebunan kopi yang Anda dengar, suara kicauan burung, suara biji kopi sangrai yang dimasukkan ke dalam kantong, serta suara jalanan dan lalu lintas yang ramai di kota.

Joho's membawa Anda dalam perjalanan menjelaskan asal muasal biji kopi mereka

18. Jalan yang masih asli

"Jalan Liar" adalah eksperimen interaktif, catatan perjalanan yang dibuat menggunakan Canvas. Elemen utamanya adalah peta, yang menganimasikan jalur pada peta saat Anda menggulir halaman. Proyek ini mungkin tidak berfungsi di semua browser. Namun disertai dengan artikel yang menjelaskan semua teknologi di balik layar untuk membuat infografis.

19.

Liputan The Guardian mengenai pemilu presiden AS tahun 2016 (Hasil Pemilu Langsung) menghadirkan elemen menyenangkan dalam urusan serius mengenai nomor pemungutan suara dan tempat pemungutan suara. Infografis interaktif melacak suara di empat negara bagian. Secara default, grafik menunjukkan hasil untuk seluruh negara, dan jika pengguna mengarahkan kursor ke suatu area di peta, grafik tersebut menunjukkan angka mana yang diperoleh kandidat di sana. Kandidat presiden ditampilkan sebagai avatar piksel yang lucu. Saat infografik diperbarui secara real time, orang-orang mewarnai negara bagian yang mereka menangkan. Dari waktu ke waktu, kutipan akan muncul dalam gelembung di sebelah kandidat.

Refleksi hasil pemilu secara real time

Masa depan visualisasi data bersifat interaktif.

Tapi bagaimana Anda membuat infografis interaktif yang benar-benar menakjubkan?

Infografis ada dimana-mana, dan akhir-akhir ini itu semakin menjadi interaktif.

Dalam artikel hari ini kami akan berbagi dengan Anda rahasia membuat infografis interaktif, serta tautan ke sumber daya yang bermanfaat.

1. Memahami psikologi

Sebelum Anda membuat infografis menjadi interaktif, penting untuk memahami mengapa Anda ingin membuatnya interaktif.

Sebagaimana dirinci dalam infografis ini, orang-orang mempersepsikan informasi visual dengan lebih baik. Kita akan lebih mungkin membaca, memahami, dan mengingat sebuah presentasi jika presentasi tersebut memiliki visual yang menarik. adalah alat yang efektif pelatihan, tapi itu bisa menjadi lebih baik.

Pelatihan kinetik – alternatif yang bagus, karena orang mempelajari informasi lebih baik melalui tindakan fisik.

Itu sebabnya menambahkan interaktivitas ke bidang visualisasi pemula dapat membantu Anda membuat infografis yang lebih berkesan dan efektif.

Kombinasi pendekatan visual dan kinetik ini menjadikan infografis animasi sebagai konten masa depan. Tentu saja, untuk beberapa tema lebih baik tidak menggunakan elemen interaktif, tetapi dalam banyak kasus, elemen tersebut hanya akan meningkatkan konten.

Gerakan menambah makna pada informasi, memungkinkan pengguna mengontrol pengalaman, dan melibatkan imajinasi dengan cara yang tidak bisa dilakukan oleh infografis statis.

2. Tambahkan efek bergulir

DI DALAM pelajaran ini Kita akan mempelajari cara membuat infografis interaktif menggunakan SVG, CSS, dan JavaScript. Salah satu topik yang jarang dibahas adalah kecenderungan browser baru untuk meningkatkan dukungan terhadap file SVG. Tidak seperti gambar raster seperti PNG, JPG, atau GIF, grafik vektor dalam file SVG sepenuhnya dapat diskalakan ke ukuran apa pun dan akan ditampilkan pada resolusi atau kepadatan layar apa pun tanpa kehilangan kualitas. Dalam banyak kasus, file SVG berukuran jauh lebih kecil dan dimuat lebih cepat. Namun hal menarik yang tidak disadari oleh beberapa pengembang adalah bahwa SVG didasarkan pada spesifikasi XML dan dapat diterapkan dengan cara yang mirip dengan HTML.

Ini juga berarti bahwa kita dapat mengakses dan memanipulasi grafik dan elemen dalam file SVG menggunakan teknologi CSS dan JavaScript yang sudah familiar bagi pengembang web. Pengembang kini dapat membuat beberapa animasi dan efek yang cukup mengesankan menggunakan SVG. Hari ini kami sedang menjelajah kemampuan SVG menggunakan contoh pembuatan infografis vektor interaktif untuk web. Anda dapat melihat demo atau mendownload kode sumber dengan mengklik link di bawah gambar di bawah ini. Mari kita mulai.

Mempersiapkan file SVG

Ada banyak cara untuk membuat grafik SVG. Meskipun dimungkinkan untuk membuat SVG dengan pengkodean tangan, kami ingin memiliki beberapa jenis vektor untuk grafik yang lebih kompleks perangkat lunak, yang dapat mengekspor dalam format SVG. Pilihan populer diantara sebagian besar desainer mungkin ada yang tidak asing lagi bagi kita Adobe Ilustrator , tetapi ada aplikasi lain yang tersedia untuk umum, misalnya, pemandangan tinta, yang mungkin lebih cocok untuk tujuan kita.

Terlepas dari perangkat lunak yang Anda pilih, kemampuan untuk mengelompokkan objek dan memberi nama pada kelompok tersebut (dengan menulis atribut id) tetap penting. Hal ini memungkinkan kita untuk mengatur SVG kita ke dalam hierarki yang tepat, yang nantinya dapat kita akses menggunakan CSS dan/atau JavaScript. Illustrator dan Inkscape memiliki kemampuan untuk melakukan ini dengan memilih beberapa elemen grafis, pergi ke Objek > Kelompokkan (atau Pisahkan) dari menu utama.

Objek atau grup apa pun kemudian dapat diberi nama, yang menjadi atribut id grup atau objek tersebut saat diekspor, jadi hindari spasi, karakter khusus dan duplikat.

Di Illustrator hal ini dapat dilakukan di panel Layers ( lapisan). Cukup temukan objek yang ingin Anda beri nama di panel, klik dua kali pada bidang lapisan dan masukkan id yang diinginkan. Dalam penggunaan Inkscape Objek > Properti Objek panel untuk menetapkan id ke objek atau grup. Ini juga bisa dilakukan dengan Sunting > Penyunting XML panel tempat Anda dapat mendaftarkan tidak hanya id, tetapi juga kelas.

Dalam contoh kita, ketika kita menyimpan file SVG dan membukanya di editor teks, itu akan memiliki struktur berikut:

id="latar belakang" > id="bg-garis-kiri" > < /g> id="bg-garis-kanan" > < /g> < /g> id = "logo" > < /g> id="kutipan" > id="kutipan-kurung kurawal kiri" > < /g> id="kutipan-kanan-penjepit" > < /g> id="teks-kutipan" > < /g> < /g> id = "garis waktu" > id="kopi" > id="kedai kopi" /> id="panah kopi" /> id="waktunya minum kopi" > < /g> id="lencana kopi" > id="lingkaran kopi" /> id="judul kopi" > < /g> id="detail-kopi" > < /g> < /g> < /g> id="desain" > id="bilah-desain" /> id="desain-panah" /> id="waktu desain" > < /g> id="lencana-desain" > id="desain-lingkaran" /> id="judul-desain" > < /g> id="detail-desain" > < /g> < /g> < /g> id = "membangun" > id="build-bar" /> id="build-panah" /> id = "waktu pembuatan" > < /g> id = "build-badge" > id="membangun-lingkaran" /> id = "judul build" > < /g> id = "detail build" > < /g> < /g> < /g> id = "keluhan" > id="bilah keluhan" /> id="panah-keluhan" /> id="waktu pengaduan" > < /g> id="lencana-keluhan" > id="lingkaran keluhan" /> id = "judul pengaduan" > < /g> id="detail-pengaduan" > < /g> < /g> < /g> id = "bir" > id="bar bir" /> id="panah bir" /> id="waktu bir" > < /g> id="lencana bir" > id="lingkaran bir" /> id="judul bir" > < /g> id="detail-bir" > < /g> < /g> < /g> < /g>

Markup di atas menunjukkan struktur yang kita tuju.

Seperti yang bisa kita lihat di markup SVG, setiap tag menunjuk ke grup baru objek yang dapat ditempatkan di dalam grup lain. Tentu saja, saat membuat SVG, tidak perlu menentukan id untuk setiap objek/grup, tetapi akan lebih mudah untuk diakses nanti melalui CSS atau JavaScript, dan lebih mudah dikenali dalam markup.

Memuat SVG ke HTML menggunakan JAVASCRIPT

HTML

Ada cara untuk memasukkan atau menempatkan SVG dalam HTML. Hal ini dimungkinkan melalui penggunaan tag , tandai , atau menggunakan Properti CSS' gambar latar belakang . Untuk tujuan kita, kita memerlukan akses ke DOM di dalam SVG. Kami akan menggunakan HTML5. Kami akan memuat SVG langsung ke halaman menggunakan jQuery.

Pertama, mari buat div di dokumen HTML:

JavaScript

Sekarang menggunakan pemuatan jQuery, muat file SVG ke dalam blok #stage dan tetapkan kelas svgLoaded, yang akan kita gunakan untuk memicu animasi:

$(fungsi () ( $("#stage") .load ("interaktif.svg" ,fungsi (respons) ( $(ini ) .addClass ("svgLoaded" ) ; jika // Pastikan Anda menjalankan ini di server web atau localhost! } } ) ; } ) ;

Penting: Kami memuat SVG menggunakan JavaScript untuk mengakses DOM-nya. Chrome (dan mungkin browser lain) tidak mengizinkan Anda melakukan ini secara lokal; ini hanya akan berfungsi saat dijalankan protokol HTTP untuk alasan keamanan.

CSS

Harap dicatat bahwa CSS dalam tutorial ini tidak akan berisi spesifikasi browser apa pun, tetapi filenya akan berisi.

Pertama-tama, kami menentukan beberapa gaya untuk blok div. Saat memuat SVG, file harus sesuai dengan ukuran blok, jadi penting untuk mengatur ukuran blok agar sesuai dengan ukuran kanvas SVG.

#panggung ( lebar : 1024 piksel ; tinggi : 1386 piksel ; )

Menata Elemen SVG: Mengatur "transform-origins"

Kunci untuk menghidupkan elemen dalam kanvas ada pada properti transform-origin. Secara default, semua transformasi ke elemen apa pun dalam SVG berasal dari kanvas SVG (0px, 0px). Untuk elemen apa pun yang ingin kita ubah (misalnya skala, putar), kita perlu menyetel asal transformasi yang sesuai di sisi kiri dan atas kanvas SVG. Sumbernya akan berbeda untuk setiap elemen tergantung pada efek/animasi yang diinginkan, namun dalam banyak kasus akan sama dengan titik pusat di mana elemen tersebut ditempatkan. Ini bisa sangat membosankan, tapi lebih mudah hanya dengan menyalin informasi koordinat yang disediakan di editor vektor kita.

#coffee ( transform-origin: 517px 484px ; ) #coffee-badge ( transform-origin: 445px 488px ; ) #coffee-title ( transform-origin: 310px 396px ; ) #coffee-details ( transform-origin: 311px 489px ; ) #desain ( 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 ; ) #beer ( transform-origin: 513px 1199px ; ) #beer-badge ( transform-origin: 444px 1193px ; ) #beer-title ( transform-origin: 313px 1097px ; ) ) #detail bir ( asal transformasi: 316px 1202px ; )

Menerapkan beberapa transformasi awal

Kita perlu mengatur gaya awal untuk mengubah posisi beberapa objek. Kita juga perlu menyembunyikan objek tertentu yang tidak ingin kita tampilkan sampai kita mengarahkan kursor ke objek tersebut.

Untuk melakukan ini kita akan menggunakan Pemilih CSS. Kami terutama memilih objek dengan id "akhiran".

[ id$=lencana] ( /* Elemen apa pun dengan id yang diakhiri dengan "lencana" */ transformasi: skala(0 . 5 , 0 .5 ) ; ) [ id$=judul] ( transformasi: skala(1 . 8 ) terjemahkan(0px , 48px ) ; ) [ id$=detail] ( transformasi: skala(0 , 0 ) ; )

Menambahkan gaya untuk :hover dan menerapkan transisi

Kami memilih elemen di dalam grup yang dilayangkan dan mengembalikannya ke posisi semula. Lalu kami mengatur transisinya 0,25 detik untuk efek animasi yang keren.

#timeline > g:hover [ id$=badge] , #timeline > g:hover [ id$=details] ( transformasi: skala(1 , 1 ) ; ) #timeline > g:hover [ id$=title] ( transformasi : skala(1 ) terjemahan(0px , 0px ) ; ) [ id$=lencana] , [ id$=judul] , [ id$=detail] ( transisi: transformasi 0 0,25 detik kemudahan masuk-keluar; )

Pengantar Animasi

Kami menggunakan animasi CSS. Pertama, kita perlu membuat beberapa keyframe untuk menganimasikan beberapa properti CSS yang berbeda:

@keyframes kurung kurawal kiri ( 0 % ( transformasi: TranslateX(220px ) ; opacity: 0 ; ) 50 % ( opacity: 1 ; transformasi: TranslateX(220px ) ; ) 100 % ( transformasi: TranslateX(0px ) ; ) ) @keyframes kurung kurawal kanan ( 0 % ( transformasi: TranslateX(-220px ) ; opacity: 0 ; ) 50 % ( opacity: 1 ; transformasi: TranslateX(-220px ) ; ) 100 % ( transform: TranslateX(0px ) ; ) ) @keyframes memudar ( 0 % (opasitas: 0; ) 100 % ( opacity: 1 ; ) ) @keyframes tumbuh-y ( 0 % ( transformasi: skalaY(0 ) ; ) 100 % ( transformasi: scaleY(1 ) ; ) ) @keyframes tumbuh-x ( 0 % ( transformasi: skalaX(0 ) ; ) 100 % ( transform: scaleX(1 ) ; ) ) @keyframes tumbuh ( 0 % ( transformasi: skala(0 , 0 ) ; ) 100 % ( transformasi: skala(1 , 1 ) ; ) )

Membuat Urutan Animasi

Kita bisa menggunakan selector berdasarkan kelas svgLoaded yang kita gunakan sebelumnya.

Untuk mengatur urutan animasi, kita akan mengatur properti animation-delay, dan mengatur animation-fill-mode: backwards sehingga animasi akan mengalami jeda.

SvgLoaded #logo ( animasi: fade-in 0 .5s ease-in-out; ) .svgLoaded #quote-text ( animasi: fade-in 0 .5s ease-in-out 0 .75s ; mode pengisian animasi: mundur ; ) .svgLoaded #quote-left-brace ( animasi: left-brace-intro 1s ease-in-out 0 .25s ; mode pengisian-animasi: mundur; ) .svgLoaded #quote-right-brace ( animasi: kanan- brace-intro 1s ease-in-out 0 .25s ; animasi-fill-mode: mundur ) .svgLoaded #background ( animasi: tumbuh-y 0 .5s ease-in-out 1 .25s ; transform-origin: 512px 300px ; mode pengisian animasi: mundur; ) .svgLoaded #background > g ( animasi: tumbuh-x 0 ,25 detik kemudahan masuk 1 ,75 detik ; mode pengisian animasi: mundur; ) .svgLoaded #background > g: terakhir -of-type ( transform-origin: 458px 877px ; ) .svgLoaded #background > g:first-of-type ( transform-origin: 563px 877px ; ) .svgLoaded #coffee , .svgLoaded #design , .svgLoaded #build , . svgLoaded #complain , .svgLoaded #beer ( animasi: tumbuh 0,25 detik kemudahan masuk;

mode pengisian animasi: mundur; ) .svgLoaded #coffee ( penundaan animasi: 2s; ) .svgLoaded #design ( penundaan animasi: 2 .25s ; ) .svgLoaded #build ( penundaan animasi: 2 .5s ; ) .svgLoaded #complain ( penundaan animasi: 2 0,75 detik; ) .svgLoaded #beer ( penundaan animasi: 3 detik; )

font WEB Sejak kami menggunakannya font khusus

di file SVG kami, kami juga perlu memasukkannya ke halaman web kami. Penting untuk menentukan dengan benar nama font yang digunakan saat mengekspor SVG. Kami membuka file SVG di editor teks dan mencari teks tempat font tersebut digunakan dan melihat properti font-family:

Seperti yang bisa kita lihat, file SVG diekspor menggunakan font keluarga font bernama 'LigaGotik'. Jadi kita tinggal mendefinisikan font web di CSS menggunakan nama yang sama persis.

@font-face ( font-family : "LeagueGothic" ; url ( "../fonts/league-gothic/league-gothic.eot.woff") format("woff" ) ;

)

Ini saja! Kami harap Anda menikmati tutorialnya dan menganggapnya bermanfaat serta informatif. Kami ingin mendengar komentar Anda.

Terjemahan - Ruang tugas.

Berikut panduan visualisasi data bagi pemula bagi siapa saja yang ingin mempelajari cara membuat infografis dan peta interaktif. Infografis dan peta interaktif telah menjadi bagian dari banyak proyek yang dilaksanakan oleh aktivis, jurnalis dan gerakan sosial . Namun bagaimana dengan organisasi yang tidak memiliki desainer penuh waktu? Bahkan dalam hal ini, Anda dapat membuat yang berkualitas tinggi - materi visual Penjaga

memberitahuku bagaimana melakukannya.

Data

Hal pertama yang perlu Anda lakukan adalah memahami data apa yang ingin Anda visualisasikan.

Bayangkan Anda menjalankan kampanye yang menyerukan peningkatan sanitasi di seluruh dunia. Untuk menunjukkan betapa pentingnya hal ini, perlu digarisbawahi betapa banyak negara yang masih memiliki akses terbatas terhadap toilet bersih dan betapa sedikit perubahan yang terjadi dalam 10 tahun terakhir. Dalam tutorial ini kita akan menggunakan dataset dari Bank Dunia. Kami sekarang mempunyai data 10 tahun, tapi kami hanya membutuhkan angka tahun 2000 dan 2012. Oleh karena itu, setelah kami memuat data kami, kami menghapus baris dan kolom yang tidak perlu (saran: simpan berkas asli

dengan data).

Sekarang setelah Anda membersihkan data, Anda siap memvisualisasikannya. Dalam kasus kami, kolom lain ditambahkan sebelum visualisasi - perbedaan persentase antara tahun 2000 dan 2012.

Cara membuat grafik interaktif

Menampilkan data pada grafik adalah cara tercepat dan termudah untuk memvisualisasikan informasi. Situs seperti Datawrapper, Infogr.am, dan PiktoChart adalah alat yang ringan dan mudah digunakan untuk membuat berbagai grafik dan bagan dan menyematkannya ke situs web mana pun. Datawrapper mungkin yang paling intuitif dan juga gratis. Kelemahan alat ini adalah tampilannya tidak terlalu baik wilayah yang luas

data, jadi kami hanya akan memvisualisasikan 10 negara yang mengalami perubahan paling besar selama 10 tahun terakhir.

1. Daftar di situs Datawrapper dan buat grafik baru.
2. Salin dan tempel informasi Anda ke bidang yang tersedia.
3. Periksa detail Anda.
4. Sekarang bagian yang menyenangkan - pilih templat grafik. Untuk visualisasi ini, dipilih yang sederhana grafik interaktif, tetapi Anda dapat memilih jumlah besar pilihan yang disajikan di situs web.
5. Langkah terakhir adalah pengeditan terakhir jadwal Anda. Anda dapat mengubah warna, menambahkan judul, deskripsi, dll.

Cara membuat peta interaktif

Untuk menampilkan data terkait berbagai negara, cara terbaik adalah menggunakan peta. Kami menyajikan kepada Anda ikhtisar ketiganya alat gratis untuk pemula.

Pembungkus data

Alat ini sekarang memiliki opsi peta choropleth - membuat gradien berdasarkan data Anda. Datawrapper membuat peta dengan cara yang sama seperti grafik.

Untuk: salah satu yang tercepat dan alat sederhana. Datawrapper akan memberitahu Anda jika Anda salah memasukkan nama negara. Hal baik lainnya tentang alat ini adalah jika Anda mengarahkan kursor warna tertentu dalam legenda, hanya negara dengan warna ini yang akan disorot di peta.

Melawan: Tidak ada templat untuk masing-masing negara atau kota.

Untuk: gratis dan mudah digunakan (terutama untuk membuat titik di peta).

Melawan: fitur tambahan, misalnya, mengubah skema warna mungkin tampak sulit bagi pemula (tetapi jika Anda tahu cara menghubungkan file KML dengan data yang ada, Anda dapat membuat peta seperti itu). Sulit untuk menambahkan legenda ke peta.

Ini mungkin tampak menakutkan pada awalnya, tetapi dengan alat ini Anda dapat membuat berbagai macam peta dan menyesuaikannya tergantung pada apa yang ingin Anda lihat di peta.

Untuk: akan memungkinkan Anda membuat banyak penyesuaian dan menambahkan lapisan tambahan. Bekerja di perangkat seluler.

Melawan: jika Anda berencana membuat lebih dari 5 peta dan berharap mendapatkan lebih dari 10.000 tampilan per bulan, Anda harus membayar untuk menggunakan alat ini.

Cara Membuat Infografis Tradisional

Infografis tradisional bersifat statis, gambar berwarna, yang menampilkan informasi dalam angka dan ikon. Alat yang telah disebutkan sebelumnya - Infogr.am dan PiktoChart - akan membantu Anda membuat gambar seperti itu. Mereka mudah digunakan - Anda cukup menarik dan melepas informasi yang Anda perlukan dan menempelkan data Anda untuk membuat grafik. Jumlah templat yang tersedia di versi gratis alat, terbatas.

Contoh visualisasi cepat kumpulan data kami menggunakan Infogr.am:

Dengan alat yang disajikan dalam panduan ini, siapa pun, terlepas dari tingkat keahliannya, dapat membuat infografis atau peta yang indah dan interaktif serta mengomunikasikan pesan mereka kepada khalayak luas.

Triknya dengan realitas virtual adalah Anda akan terlihat seperti orang bodoh di mata orang lain

Lab Desain Cardboard Google adalah "tutorial" yang bagus untuk desainer realitas virtual pemula

Infografis - seperti game petualangan

Masalah dengan Unity adalah hal itu tidak mudah dilakukan. hal yang baik di bawah web

Realitas virtual seperti headphone untuk mata Anda

Realitas virtual membutuhkan lingkungan yang aman; Anda tidak bisa memasukinya “saat bepergian”. Ini membatasi apa yang dapat dilakukan VR

Menutup sesi di paruh pertama hari itu Archie Tse dari The New York Times dengan topik provokatif “Mengapa NYT melakukan pekerjaan yang kurang interaktif.”

Karya NYT didasarkan pada tiga aturan pengisahan cerita visual:

1. Jika pembaca perlu mengeklik alih-alih menggulir, sesuatu yang tidak biasa pasti terjadi.
2. Asumsikan bahwa tooltips dan efek hover lainnya tidak akan pernah terlihat oleh siapa pun. Jika kontennya penting, pastikan pembaca langsung melihatnya.
3. Jika Anda ingin membuat sesuatu yang interaktif, ingatlah bahwa akan mahal untuk membuatnya berfungsi di semua platform.

Anda harus menggambar ulang grafik Anda 2 atau 3 kali agar dapat berfungsi di desktop dan seluler

Bagaimana peraturan ini mengubah pendekatan NYT:

1. Kebanyakan visualisasi sekarang bersifat statis
2. Ada lebih banyak teks
3. Jika diperlukan gerakan pada gambar, gambar tersebut akan muncul saat menggulir

(Poin keempat menyatakan bahwa mereka masih melakukan pekerjaan interaktif. Tapi sekarang alasannya pasti SANGAT bermakna).

Kami melakukan “multi-langkah”. Pengguna berhenti di langkah 3. Pembaca hanya ingin menggulir, bukan mengklik

Archie Tse: Menggulir Vs. mengklik

Selama 18 minggu terakhir, setiap Minggu malam Andy Kriebel memposting infografis dan data berdasarkan VizWiz. Tugasnya adalah menyisihkan sekitar satu jam waktu pada hari Senin, menganalisis visualisasi dengan cepat dan membuat versi Anda sendiri.

Di bawah ini kami mempublikasikan hasil minggu lalu - Perbudakan di abad ke-21.

#MakeoverMonday oleh Andy Kriebel. Deskripsi Rinci dan interaktif - di blog Andy:

#MakeoverMonday oleh Andy Cotgreave. Deskripsi detail dan interaktif - di blog Andy:

Saya juga mengetahui bahwa 51% orang di dunia lebih muda dari saya, dan 63% orang di Rusia lebih tua, dan peluang saya untuk meninggal saat ini tidak terlalu besar. Angka-angka itu tiba-tiba berhenti menjadi “statistik” dan menarik perhatian saya.

Visualisasi data - menggunakan kumpulan data besar dengan lebih sedikit pekerjaan desain manual; berdasarkan algoritma. Misalnya, karya interaktif New York Times.

seni visual - pengkodean searah. Visualisasi yang indah namun sulit diuraikan, seperti seni komputasi Kunal Anand.

Apa masalahnya?

Akibatnya, banyak karya hanya menarik pengguna tingkat lanjut, namun tidak memungkinkan pembaca yang belum tahu untuk memahami inti permasalahan, sehingga menggagalkan tujuan visualisasi - untuk menginformasikan kepada publik. Inilah mengapa sangat penting untuk mengenali dan memahami masalah literasi visual dalam konteks visualisasi.

Sebuah “tata bahasa visual” baru dalam jurnalisme

Berikut tiga karya yang bereksperimen dengan cara menghadirkan jurnalisme interaktif. Mereka terlihat mengesankan, namun penafsirannya bisa menjadi tugas yang sulit bagi banyak orang.

Hak-hak kaum gay di AS, negara bagian demi negara bagian

Banyaknya sumber data dan alat pemrosesan yang tersedia saat ini jelas menunjukkan bahwa belum pernah ada begitu banyak orang yang mencoba membiasakan diri dengan dunia visualisasi data. Dan ketika ada begitu banyak materi yang tersedia untuk dipelajari, hanya ada satu pertanyaan "Di mana memulainya?" dapat mengintimidasi setiap pemula. Jadi, perpustakaan mana yang terbaik dan apa yang direkomendasikan oleh para profesional? Hal ini akan dibahas dalam artikel ini.

Berbicara tentang visualisasi data dan tidak menyebutkannya sama saja dengan berbicara tentang sejarah penciptaan komputer pribadi dan tidak mengatakan sepatah kata pun tentang Steve Jobs. D3 (dari Bahasa Inggris Data Driven Documents), tanpa berlebihan, adalah yang paling penting dan dominan di pasar perpustakaan JavaScript dengan terbuka kode sumber, yang biasa digunakan untuk membuat grafik SVG. SVG (dari bahasa Inggris Scalable Vector Graphics), pada gilirannya, adalah sebuah format gambar vektor, didukung oleh browser web tetapi sebelumnya jarang digunakan.

Pustaka D3 mendapatkan popularitasnya karena minat mendadak terhadap SVG di kalangan desainer web, yang sebagian besar disebabkan oleh betapa menguntungkannya SVG. grafik vektor terlihat seperti di layar dengan resolusi tinggi(khususnya pada layar Retina yang digunakan di Perangkat Apple), yang menjadi semakin umum.

“Jujur saja, jika tugasnya adalah memvisualisasikan data berdasarkan SVG, maka semua perpustakaan lain belum bisa menyelesaikannya,” kata Moritz Stefaner, ahli independen dalam visualisasi data dan pemilik perusahaan Kebenaran & Keindahan. “Ada juga banyak proyek menarik yang dibuat berdasarkan D3, seperti NVD3, yang menyediakan komponen grafis standar - siap digunakan, tetapi dapat disesuaikan; atau katakanlah Crossfilter hanyalah alat pemfilteran data yang luar biasa.”

Scott Murray, desainer programmer dan penulis buku Visualisasi Data Interaktif untuk Web, setuju dengan pendapat sebelumnya: “D3 sangat kuat karena memanfaatkan semua yang ditawarkan browser. Meskipun juga ada sisi sebaliknya: Jika browser tidak mendukung sesuatu, misalnya gambar 3D berdasarkan WebGL (dari English Web Graphics Library), maka D3 tidak akan mendukungnya."

Meskipun perpustakaan ini benar-benar universal, namun tetap saja bukan solusi ideal untuk setiap tugas. “Kelemahan utama dari perpustakaan D3 adalah bahwa ia tidak meresepkan atau bahkan menyarankan pendekatan tertentu terhadap visualisasi,” tambah Scott Murray. “Jadi ini benar-benar alat untuk memuat data ke dalam browser dan kemudian menghasilkan komponen DOM berdasarkan data tersebut.”

Meskipun D3 adalah alat hebat untuk gambar khusus, jika Anda ingin membuat grafik standar tanpa banyak bekerja pada aspek visual, Anda mungkin menemukan alat seperti Vega. Menjadi kerangka kerja yang dikembangkan di atas D3, Vega memberikan alternatif untuk menampilkan komponen grafis. Dengan menggunakan Vega, Anda dapat memvisualisasikan data dalam format JSON Pusat Jurnalisme Eropa dan proyek Jurnalisme Berbasis Data. Tanggal yang tepat Kursusnya belum diketahui, tapi Anda bisa mendaftar sekarang.

Dalam lima hari, peserta kursus akan dapat mempelajari apa itu jurnalisme data, cara kerjanya, dan keterampilan utama apa yang harus mereka kuasai untuk menjadi spesialis di bidang ini. Cari tahu di mana mencari data untuk mendukung cerita Anda dan bagaimana menemukan ide-ide baru dalam data yang sudah ada. Pelajari seni mengubah data membosankan menjadi cerita menarik, infografis, atau bahkan visualisasi interaktif. Mengenal prinsip dasar desain grafis yang perlu diketahui seorang jurnalis.

Instruktur kursus adalah lima pakar terkemuka dunia dalam jurnalisme dan visualisasi data.