Memetakan perairan: antara Bokeh dan D3

Memetakan perairan: antara Bokeh dan D3

Pengenalan

Ada saatnya dalam kehidupan pemula "kunci rendah tetapi juga kunci tinggi berusaha untuk menjadi pereka dan pemaju front-end" ketika mereka harus memasuki dunia perpustakaan grafik.

Perpustakaan grafik menghasilkan visualisasi berdasarkan data. Ini adalah alasan anda dapat dengan cepat memahami trend jangka hayat di FiveThirtyEight atau mengukur sentimen nasional mengenai pilihan raya presiden (yikes) yang akan datang di The New York Times.

Fikirkan carta yang boleh anda buat dalam Helaian Google, kecuali sekarang anda mempunyai hak melihat dan menyunting langsung ke perpustakaan yang mendorong carta tersebut. Anda adalah penguasa blok bangunan tingkat rendah yang membentuk "carta"

Beberapa pustaka charting ditulis dalam JavaScript, bahasa yang lebih biasa bagi pembangun web daripada kebanyakan, yang menjadikannya mempelajarinya sebagai prestasi yang kurang menakutkan. Apabila dilaksanakan dengan betul, perpustakaan grafik mempunyai kekuatan untuk membawa pulang mesej yang kuat dan memberi anda peluang untuk melihat permen visual yang serius.

Baru-baru ini, pasukan kami ditugaskan untuk membuat antara muka yang diperlukan untuk menyatukan perpustakaan grafik untuk memenuhi tujuan. Akibatnya, kami terpaksa memutuskan perpustakaan yang memenuhi kes penggunaan khusus kami. Sekiranya anda mempertimbangkan keperluan anda dengan betul dan memilih perpustakaan yang dapat memenuhi semua keperluan mereka, kehidupan adalah keemasan.

Walau bagaimanapun, perpustakaan tidak pernah menjadi kesepakatan satu ukuran. Lebih sering daripada tidak, anggapan awal anda bahawa perpustakaan adalah padanan yang sempurna tidak betul kerana halangan yang tidak dijangka muncul.

Mungkin anda berfikir: "Apa pilihan itu?", "Bagaimana Anda mendekati memilih pilihan?" atau "Mengapa anda merasa bodoh?" (merujuk kepada mesej Slack di atas).

Artikel ini akan menerangkan proses kami memilih pustaka charting di antara banyak perpustakaan charting JavaScript yang ada sekarang, keputusan penting untuk beralih antara dua library charting (Bokeh dan D3.js), dan kelebihan dan kekurangan masing-masing. Bagi saya, ini adalah wilayah "belum dipetakan", dan jika anda merasakan cara yang sama tentang memetakan perpustakaan atau visualisasi data secara umum, anda akan merasa lebih baik setelah membaca ini.

Mari kita mulakan!

Mengapa Kami Mencuba Bokeh Pertama

Keperluan kita jatuh ke dalam dua kem: kepantasan dan interaktiviti . Kerana kami mengendalikan data dalam jumlah yang lebih besar, visualisasi kami harus dapat diperbarui pada kecepatan kilat (atau setidaknya pada kecepatan yang tidak memiliki jeda yang dapat dilihat).

Aplikasi kami juga perlu mempunyai interaktiviti yang diinginkan yang kami bayangkan untuk pengguna. Dalam senario yang ideal, perpustakaan sudah merangkumi beberapa fungsi interaktif yang dapat kita lemparkan dengan mudah, dan bukannya menulisnya dari awal.

Masukkan Bokeh.

Mengenai Bokeh

Bokeh adalah perpustakaan yang terutama bertujuan untuk membuat visualisasi dalam penyemak imbas dari set data besar atau streaming. Anda membuat visualisasi ini menggunakan Python. Kemudian API JavaScript Bokeh mengambil skrip Python anda dan membuat plot atau carta selain menangani interaksi UI dalam penyemak imbas.

Anda juga boleh memilih untuk menggunakan Pelayan Bokeh untuk menangani streaming data anda. Dalam dokumentasi Bokeh 0.12.13, dinyatakan: "Keupayaan ini untuk menyegerakkan antara python dan penyemak imbas adalah tujuan utama Bokeh Server."

Kelebihan

Bokeh ajaib kerana banyak sebab. Ini menjadikan pertama kali menggunakan WebGL dengan sandaran Kanvas HTML5, menyediakan beberapa alat bawaan untuk berinteraksi dengan carta, menangani set data yang sangat besar, dan akhirnya, membuat sesuatu yang dapat masuk ke web dengan segera.

Keupayaan untuk menavigasi antara Python dan JavaScript juga sangat kuat untuk membuat peta kerana Python membolehkan anda memanfaatkan struktur data dan alat analisis data yang berguna, sementara JavaScript menerjemahkan data yang dimanipulasi menjadi visualisasi yang mesra penyemak imbas.

Kekurangan

Akan tetapi, satu kelemahan bagi Bokeh adalah bahawa tahap interaktiviti yang terhad dapat dimiliki oleh visualisasi. Bokeh membolehkan anda "membuat peta" dalam pengertian yang lebih konvensional - ia menawarkan kanvas 2-D, seperti grid dengan sumbu sebagai garis dasar. Dan tidak mengapa, kerana selalunya itulah yang diperlukan dan diinginkan oleh pengguna. Pengguna Bokeh yang berpengalaman dapat membuat barang yang sangat indah (lihat contoh di sini).

Tetapi jika saya ingin membuat visualisasi yang berada di luar ciri konvensional carta, seperti mensimulasikan daya antara atom dan menyeret atom ke sekeliling, saya tidak tahu bagaimana saya akan mencapainya di Bokeh.

Bokeh juga dimaksudkan untuk pengembangan di Python, bukan JavaScript. Berikut adalah contoh barchart di Bokeh menggunakan Python. Sangat sederhana dan bersih.

Bokeh Barchart menggunakan Python (melalui Jupyter Notebook)

Sebelum mulai menggunakan Bokeh, kami membuat keputusan secara sadar untuk membuat skrip dalam JavaScript dan bukannya Python kerana seluruh aplikasi web kami dibangun dan dibangun berdasarkan kerangka kerja JavaScript. Tak satu pun dari dokumentasi Bokeh ada dalam JavaScript (ada di Python, seperti yang anda harapkan), dan usaha untuk berada di bawah tudung JavaScript terbukti sukar.

Sekiranya anda bekerja dengan glyph tahap rendah, memang betul bahawa apa-apa yang mungkin berlaku di Python mungkin dalam JavaScript dengan Bokeh. Namun, jika anda baru mula belajar kedua-dua bahasa seperti saya, menterjemahkan sintaks antara keduanya tidak intuitif.

Selain itu, ada batasan untuk JavaScript Bokeh.Chartsdan Bokeh.PlottingAPI tingkat tinggi - ada yang tidak digunakan lagi, yang lain menjadikan anda sukar untuk mengubah ciri plot. Contoh di bawah adalah percubaan saya membuat plot Bokeh dalam JavaScript.

Bokeh Barchart Peringkat Rendah menggunakan Javascript

Barokart Aras Tinggi Bokeh menggunakan API Javascript Bokeh.Charts

Lebih lanjut mengenai pengembangan dalam JavaScript dengan Bokeh di sini. Seperti yang anda lihat, JavaScript dengan pustaka Bokeh kehilangan garis kod yang lebih mudah yang kami perhatikan ketika berkembang dengan Python. Saya rasa mengambil masa sekitar satu jam bermain-main di konsol untuk menambahkan garis putih pada bar dan tajuk dalam carta tahap tinggi saya, yang mengulangi perjuangan saya untuk menavigasi di luar batas Bokeh.ChartsAPI JavaScript ketika anda ingin mengubah butiran visual carta.

Akhirnya, terdapat lebih banyak dokumentasi dan penggunaan aktif perpustakaan carta lain , seperti D3.js atau three.js, berbanding Bokeh. Dengan penyumbang dan pengguna perpustakaan yang lebih aktif datang akebarangkalian yang lebih tinggi untuk mencari penyelesaian yang anda perlukan untuk memperbaiki pepijat tertentu.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Mengapa Kami Beralih ke D3

Oleh itu, kami tersekat. Kami telah sampai ke titik "perpustakaan ini sesuai dengan keperluan kami, tetapi sangat menyakitkan untuk terus membuat sesuatu dalam JavaScript dan mungkin kita akan mencapai langit-langit suatu hari apabila kita menyedari bahawa kita memerlukan sesuatu yang tidak tersedia di Bokeh betul sekarang. " Sejuk.

Masukkan D3.

Keprihatinan awal kami dengan D3 adalah bahawa visualisasi kami akan menjadi terlalu lambat, mengingat pengalaman masa lalu dengan membuat SVG di penyemak imbas dengan jumlah data yang lebih besar. Kami juga tahu bahawa keluk pembelajaran untuk D3 jauh lebih tinggi daripada keluk pembelajaran Bokeh.

Tetapi kami masih optimis dengan popularitas D3, jumlah aplikasi D3 yang didokumentasikan dengan indah, dan sikap "Dapatkan Sh * t Done" kami ... jadi kami memutuskan untuk mencobanya.

Mengenai D3

D3.js adalah perpustakaan JavaScript yang menekankan pengikatan data. Ini memberi anda kekuatan unik untuk menghasilkan elemen dalam DOM dan mengikat datum / data ke elemen secara serentak. Dengan perpustakaan yang didorong sepenuhnya oleh data, anda dapat menambahkan elemen secara dinamik ketika menambahkan atau membuang titik data dan peralihan antara set data. D3 juga memberikan lebih banyak kawalan ke atas estetika dan interaktiviti hasil akhir, yang bermaksud anda dapat melepaskan diri dengan membuat visualisasi yang paling pelik / indah.

Kelebihan

Yang mengejutkan kami, visualisasi D3 yang kami buat dengan set data kami sangat hebat. Kami dengan cepat menyedari bahawa D3 disusun secara khusus untuk rendering cepat, walaupun terdapat susunan besar yang kami lalui ke perpustakaan.

Daripada meneruskan titik data satu persatu dan menghasilkan SVG masing-masing, yang agak membosankan, D3 membolehkan anda mengikat seluruh data set anda ke SVG anda sebelum ada. SVG kemudian dihasilkan dengan cepat dan dikaitkan dengan titik data masing-masing sekaligus.

Ia seperti tukang masak di dapur yang menerima senarai pesanan sekaligus dan dapat menyiapkan makanan dalam urutan yang menghilangkan waktu menunggu yang tidak perlu, dan bukannya selalu menunggu untuk menerima pesanan berikutnya setelah menyediakan satu hidangan.

Bahagian terbaik mengenai D3 ialah ia menawarkan banyak peluang untuk interaksi dan peralihan yang lancar antara set data. Oleh kerana tujuan utama kami adalah dan memberi kuasa kepada pengguna, kami ingin membuat visualisasi yang akan mengundang individu untuk terlibat dengannya.

D3 juga dimaksudkan untuk pengembangan JavaScript. Tidak akan ada lagi "menggali di bawah tudung" API JavaScript seperti yang kita lakukan dengan Bokeh. Contoh barchart yang saya buat menggunakan BokehJS sebelumnya dalam artikel ini ditunjukkan di bawah menggunakan perpustakaan D3.

D3 Barchart

Ya, terdapat garis kod yang lebih kompleks berbanding kod yang diperlukan untuk carta Bokeh. Ia memerlukan lebih banyak masa dan tenaga untuk diambil. Tetapi anda mempunyai kawalan penuh terhadap setiap butiran kecil carta anda, dan semuanya didokumentasikan di suatu tempat dalam talian (mungkin melalui pencipta, Mike Bostock). Cukup hebat.

Terakhir, terdapat penggunaan D3 secara meluas dalam beberapa tahun terakhir untuk memvisualisasikan pilihan raya AS 2017, pergerakan populasi pelarian, kadar vaksinasi bayi untuk WHO, dan banyak lagi trend dan kisah lain. Hasilnya, D3 telah mendapat yang ketara jumlah pendedahan dan perhatian, yang membawa kepada pengguna yang lebih aktif dan cara-cara baru untuk menggunakan perpustakaan setiap hari.

Apabila memilih perpustakaan untuk jangka masa panjang dan ingat bahawa rakan sepasukan anda juga perlu mempelajarinya pada akhirnya, sangat penting untuk mempertimbangkan komuniti penyumbang perpustakaan semasa dan masa depan. Perpustakaan dengan komuniti yang terus berkembang adalah ideal, dan D3 nampaknya memupuk komuniti jenis itu.

Kekurangan

Keluk pembelajaran awal lebih tinggi untuk D3 berbanding Bokeh, dengan andaian anda sedang berkembang di Python dengan Bokeh. JavaScript lebih verbose daripada Python. Namun, jika seperti kami anda berencana untuk mengembangkan dalam JavaScript, ada baiknya membaca tutorial D3.

Sangat sukar untuk memahami bagaimana pemilihan berfungsi, apa maksudnya .enter () dan .exit (), dan keajaiban yang hanya berlaku dengan satu baris kod mudah (.transition () siapa sahaja?). TETAPI - setelah anda melingkari struktur unik D3 dengan menganggap bahawa benda ada sebelum wujud, kemungkinannya tidak akan habis.

Pada akhirnya, keuntungan D3 melebihi usaha dan masa mempelajarinya, dan kami mempunyai firasat bahawa beralih ke D3 akan menjadi pelaburan jangka panjang yang baik.

Kesimpulannya

Jadi di sana anda memilikinya! Kami masih aktif menggunakan dan mempelajari D3 ketika kami mengintegrasikan perpustakaan ke dalam aplikasi dan pasukan kami. Walaupun hanya karena kita bergerak maju dengan D3 tidak berarti kita tidak akan menggunakan Bokeh untuk aplikasi yang berbeda di masa depan. Terdapat kebaikan dan keburukan pada setiap pustaka grafik, dan penting untuk terus menerus memikirkan untuk menentukan sama ada anda harus terus menggunakan pustaka semasa atau mula meneroka pilihan lain.

Sebelum memilih perpustakaan peta, ketahui keperluan khusus anda dan jangan takut untuk menyelam terlebih dahulu ke perairan perpustakaan yang belum dipetakan dengan mempertimbangkan keperluan tersebut. Sekiranya sesuatu tidak berfungsi pada kali pertama, cubalah sesuatu yang baru yang nampaknya menjanjikan.

Ini mengenai meneroka, mendokumentasikan, dan memeriksa semula diri anda dan rakan sepasukan anda untuk terus mengembangkan projek ini dengan cara yang produktif.

Maju!

Sekiranya anda mempunyai komen, pembetulan, cadangan, atau hanya ingin bercakap, jangan ragu untuk menghantar e-mel kepada saya di [email protected] Anda boleh mendapatkan sebahagian daripada karya saya di //mandilicai.com/.