Memvisualisasikan semua buku dunia di ISBN-Space

 (phiresky.github.io)
2 poin oleh GN⁺ 2025-02-02 | 1 komentar | Bagikan ke WhatsApp
  • Untuk menjelajahi data lebih dari 100 juta buku yang ditangani Anna’s Archive dalam satu layar, diperlukan pendekatan yang mengubah ruang pengenal terbatas bernama ISBN menjadi peta
  • ISBN13, jika mengecualikan prefiks 978-/979- dan checksum terakhir, adalah ruang satu dimensi dengan sekitar 2 miliar slot, dan rentang negara serta penerbit dialokasikan per unit prefiks
  • Tata letak per baris sederhana atau Hilbert curve dapat membuat struktur ISBN lebih sulit dilihat, sehingga digunakan Bookshelf-Curve yang memindahkan digit desimal ke koordinat 2D
  • Tile peta disediakan sebagai berkas statis PNG dan JSON, dan shader WebGL/GLSL menangani rendering dan filtering seperti tahun terbit, rasio kepemilikan, perbandingan dataset, dan penyorotan penerbit secara instan
  • Diimplementasikan sebagai frontend statis berbasis ThreeJS, React, MobX, dan react-threejs-fiber, dengan optimasi performa render teks dalam jumlah besar dan perpindahan zoom yang sangat menentukan kegunaan nyata

Mengapa menjadikan ruang ISBN sebagai objek visualisasi

  • Perpustakaan telah lama mengumpulkan pengetahuan umat manusia, dan di era digital, pengumpulan karya secara menyeluruh yang memenuhi kriteria tertentu bisa menjadi mungkin
  • Anna’s Archive, salah satu shadow library, membutuhkan visualisasi yang dapat menjelajahi lebih dari 100 juta buku sekaligus
  • Data target mencakup judul, penulis, negara, penerbit, waktu terbit, jumlah perpustakaan yang memilikinya, dan ketersediaan digital
  • Visualisasi interaktif mendukung pemilihan dataset, pencarian buku individual, pemfilteran tahun terbit, dan visualisasi gabungan berbasis shader kustom
  • Saat diperbesar maksimal, tampilannya berubah sehingga setiap buku tampak seperti disusun di rak buku

Struktur ISBN

  • ISBN13 adalah nomor 13 digit yang diberikan pada hampir semua buku terbitan
  • Saat ini, tiga digit pertama ISBN13 tetap 978- atau 979-, dan digit terakhir adalah checksum
  • Karena itu, ruang ISBN13 yang sebenarnya dapat dipandang memiliki sekitar 2 miliar slot
  • Prefiks 978- dan 979- muncul karena ISBN13 merupakan subset dari European Article Number, dan prefiks tetap ini disebut Bookland
  • Blok ISBN besar dialokasikan oleh International ISBN Agency ke organisasi internasional, lalu tiap negara membaginya lagi per penerbit
  • Blok ISBN selalu dialokasikan berdasarkan unit prefiks
    • 978-4 dialokasikan ke Jepang
    • Jepang mengalokasikan 978-4-312 ke satu penerbit
    • Penerbit tersebut dapat mengalokasikan item dalam rentang 000000-99999 untuk membuat ISBN seperti 978-4-312-99999-X
  • Semakin panjang prefiks negara, semakin sedikit jumlah buku yang bisa dialokasikan di dalamnya
    • Jepang memiliki ruang ISBN sebanyak 100 juta
    • Singapura dimulai dengan prefiks 978-9971- sehingga hanya memungkinkan 100 ribu ISBN

Cara membentangkan ISBN satu dimensi menjadi dua dimensi

  • Jika prefiks 978-/979- dan checksum dihapus, ISBN menjadi nilai satu dimensi desimal antara 0 hingga 2 miliar
  • Cara paling sederhana adalah mengisi piksel per baris dari atas, tetapi area kecil akan memanjang secara horizontal sehingga struktur ISBN sulit dilihat
  • Hilbert curve membuat area kecil lebih mendekati persegi, tetapi dapat menimbulkan artefak struktur spasial yang tidak ada di data
  • Untuk menghindari struktur yang tidak ada di data, visualisasi ini menggunakan Bookshelf-Curve yang memanfaatkan sifat desimal ISBN

Bookshelf-Curve

  • Bookshelf-Curve menempatkan 0-9 dari digit desimal pertama secara mendatar, lalu 0-9 dari digit berikutnya secara vertikal ke atas-bawah, dan pola ini diulang secara rekursif
  • Untuk mempertahankan rasio persegi panjang dua tingkat, rasio aspek tiap blok harus √10, yaitu sekitar 3.16:1
  • Struktur ini mirip konsep rasio aspek rekursif pada kertas A4, tetapi alih-alih dibagi dua, dibagi menjadi 10 bagian
  • Transformasi koordinat sederhana karena dilakukan dengan memakai digit-digit ISBN secara selang-seling sebagai koordinat
  • Kode implementasinya menjadi 50 baris karena upaya generalisasi, tetapi prinsipnya cukup mudah dipahami sampai seseorang bisa menelusuri posisi ISBN tertentu secara manual

Tile peta dan encoding data

  • Gambar tile dibuat untuk setiap prefiks ISBN
  • Ukuran target tile sekitar 100kB, dan hasilnya ukuran tile menjadi 2000 × 633 piksel
  • Informasi yang disimpan di piksel berbeda untuk tiap dataset
    • Dataset tahun terbit menyimpan nilai setelah 1800 dikurangi dalam rentang 8-bit
    • Kanal merah menyimpan rata-rata tahun terbit buku dalam piksel tersebut
    • Kanal biru menyimpan rasio buku yang ada
    • Misalnya, jika 50% buku ada, maka nilai kanal biru adalah 127/255
  • Pada level zoom maksimum, 1 buku dipetakan ke 1 piksel untuk menjaga akurasi

Rendering berbasis shader GLSL

  • Awalnya data RGB disimpan langsung di tile, tetapi untuk meningkatkan fleksibilitas, disimpan data yang lebih abstrak dan rendering aktual dilakukan di GLSL fragment shader pada GPU
  • Pendekatan ini memungkinkan pemilihan palet warna belakangan, penerapan transformasi dan filter seketika, atau penggabungan beberapa dataset secara langsung
  • Data tahun terbit menyimpan rentang 1800-2055, tetapi 95% data berada di rentang 1985-2024, sehingga shader dapat meringkas tampilan ke rentang ini
  • Fungsi heatmapColor(float) mengubah nilai 0-1 menjadi skala warna pilihan pengguna
  • Sintaks $dataset_x bukan sintaks GLSL asli, melainkan sintaks template sederhana berbasis regex agar hanya gambar yang benar-benar dibaca shader yang dimuat
  • Di opsi ⚙️ Advanced pada visualisasi, shader dapat diedit langsung dan hasil perubahannya tercermin secara real-time
  • Arti tiap piksel dataset dirangkum di README

Membuatnya tampak seperti rak buku saat diperbesar

  • Pada tampilan yang diperbesar penuh, setiap piksel diberi gaya agar tampak seperti buku
  • Setiap buku dibuat memiliki lebar, tinggi, dan pola acak
  • Bentuknya tidak persis sama dengan buku nyata, tetapi membuat layar pada zoom maksimum terlihat seperti adegan yang lebih hidup
  • Semua styling ini diimplementasikan di shader
  • Karena hasil pembangkit angka acak yang sama dibutuhkan di GLSL dan JavaScript, bagian menghitung tinggi buku agar batas teks cocok menjadi rumit
  • Dengan mengirim nilai zoom saat ini sebagai uniform dan melakukan fade-in di antara dua level zoom, gaya rak buku bisa dimunculkan dengan halus

Teks, struktur pohon, dan performa

  • Seperti tile gambar, teks juga dirender dalam struktur hierarkis berdasarkan level zoom dan view frustum culling
  • Implementasinya memakai react-threejs-fiber
  • React menambahkan elemen adegan secara rekursif saat tampilan berpindah, menyusun Plane, teks HTML, dan node prefiks anak untuk tiap prefiks
  • Saat harus merender banyak teks, pada awalnya muncul masalah performa besar
  • Pendekatan terbaik adalah memasukkan HTML ke dalam <foreignObject /> milik SVG, merendernya ke canvas dengan drawImage, lalu memuatnya sebagai tekstur
  • Pendekatan ini berhasil, tetapi menciptakan delay 20ms secara sinkron setiap kali selama proses rendering
  • Karena SVG tidak bisa digambar di WebWorker, sulit memindahkannya ke WebWorker
  • Masalah performa nyata sebagian besar teratasi dengan mengurangi jumlah elemen HTML, membatasi konten DOM yang ditambahkan per frame, dan terutama menghapus tumpukan filter CSS text-shadow

Barcode dan rentang penerbit

  • Pada zoom maksimum, setiap buku menampilkan barcode
  • Barcode ditambahkan untuk memperkuat gagasan bahwa buku-buku diurutkan berdasarkan ISBN
  • Alih-alih pustaka rendering barcode, digunakan font TTF Libre Barcode yang merender angka 13 digit menjadi barcode sekaligus menghitung check digit
  • Berkat optimasi rendering teks pada sistem operasi, cara ini praktis dan berkinerja baik
  • Tiap grup biasanya memiliki rentang besar setingkat negara, dan penerbit memiliki rentang yang lebih kecil di dalamnya
  • Grup dan penerbit masing-masing diberi warna acak yang unik
  • Meski satu penerbit memiliki beberapa rentang, warna yang digunakan tetap sama
  • Untuk menyorot semua rentang sekaligus, setiap penerbit diberi ID unik lalu disimpan sebagai komponen RGB
  • Warna penerbit masih menyisakan beberapa hal yang belum memuaskan
    • Warna penerbit berbenturan dengan skala warna heatmap
    • Rentang negara sulit dilihat

Navigasi pencarian dan jalur terbang

  • Saat mencari buku atau mengeklik minimap, tampilan akan terbang berpindah ke lokasi tersebut
  • Menghitung jalur terbang yang enak dilihat ternyata lebih sulit dari dugaan
  • Pencocokan parabola menghasilkan hasil yang biasa saja, lalu dicoba pendekatan yang memakai ruang transformasi terpisah
  • Hasil akhirnya belum sempurna dan terasa agak over-engineered dengan sekitar 500 baris kode, tetapi bekerja lebih baik daripada pendekatan awal

Arsitektur dan pipeline pemrosesan

  • Backend tidak diperlukan
    • Tile gambar disimpan sebagai PNG
    • Pohon data disimpan sebagai JSON
    • HTML, JS, CSS, PNG, JSON cukup diunggah ke host berkas statis seperti GitHub Pages
  • Frontend memakai ThreeJS, React, dan MobX
  • Kombinasi ini nyaman untuk membangun adegan 2D/3D deklaratif akselerasi-GPU yang reaktif dengan komponen yang dapat digunakan ulang
  • Skrip pemrosesan sebagian besar ditulis dalam JS dan langsung menghasilkan JSON serta PNG
  • Beberapa skrip ditulis dalam Rust karena harus membaca berkas sumber 250GB dan mengeluarkannya ke SQLite

Hasil dan kode

  • Hasil akhirnya menjadi cara yang fleksibel untuk memvisualisasikan buku terbitan yang memiliki ISBN
  • Proyek ini dimungkinkan karena ISBN dirancang sebagai ruang pengenal yang nyaris cukup kecil
  • Jika pekerjaan yang sama dilakukan dengan UUID, sebagian besar ruangnya akan menjadi kosong besar
  • Kode sumber tersedia secara publik di isbn-visualization

Bacaan terkait

1 komentar

 
GN⁺ 2025-02-02
Komentar Hacker News

  • Saat memulai Amazon, saya sebenarnya ingin melakukan hal persis seperti ini, tetapi alih-alih ISBN, saya ingin memakai klasifikasi tiga tingkat Library of Congress
    Pada akhirnya, penyedia data Baker & Taylor dan Books In Print menggabungkan klasifikasi tiga tingkat itu menjadi satu string, sehingga batas-batasnya tidak bisa ditemukan secara stabil, dan kami harus menyerah bahkan sebelum benar-benar memulainya
    Menerapkan penjelajahan bergaya “terbang” seperti ini di web versi 1994–1995 juga jelas tidak akan mudah, jadi ini pekerjaan yang keren

    • Saya penasaran apa yang dimaksud dengan klasifikasi tiga tingkat LoC di sini
      Saya cukup banyak melihat LoC Classification dan LoC Subject Headings, dan sayang sekali keduanya tidak tersedia secara bebas dalam format yang berguna untuk dibaca mesin. Untuk PDF, sampai batas tertentu bisa diakali
      Khususnya bagian hukum negara bagian (state law) dalam Classification memiliki kepadatan klasifikasi yang sangat tidak merata antarnegara bagian; seingat saya NY dan CA jauh lebih kompleks, PA berada di posisi ketiga yang agak tertinggal, sementara banyak negara bagian “flyover” nyaris menggelikan karena begitu sederhana dan mirip satu sama lain. Ini tampaknya mencerminkan kompleksitas undang-undang tertulis, regulasi, dan hukum preseden di masing-masing negara bagian
      Fakta historis lain yang menarik: sistem klasifikasi dan pembagian tingkat teratas secara alfabetis tampaknya berasal langsung dari perpustakaan pribadi Thomas Jefferson, yang menjadi asal-usul LoC
      Jika tertarik, laporan tahunan Librarian of Congress kepada Kongres yang ada di Hathi Trust memuat banyak sejarah perkembangan dan perluasan Classification
      Classification: <https://www.loc.gov/catdir/cpso/lcco/>
      Subject headings: <https://id.loc.gov/authorities/subjects.html>
      Annual reports — Recent: <https://www.loc.gov/about/reports-and-budgets/annual-reports...> / Historical archive to ~1866: <https://catalog.hathitrust.org/Record/000072049>
    • Dari pengalaman saya dulu berurusan dengan Baker & Taylor, ini sama sekali tidak mengejutkan
      Mereka salah satu perusahaan paling tertinggal secara teknis yang pernah saya ajak bertransaksi, dan bahkan sampai saya menutup akun pada awal 2020, pesanan pembelian dan rekonsiliasi masih diproses lewat kertas, PDF, dan email. Seingat saya, suatu waktu mereka juga pernah meminta dokumen dikirim lewat faks

  • Karena tidak jarang ISBN dialokasikan ganda ke buku yang berbeda [0], ungkapan “semua buku di ruang ISBN” mungkin agak berlebihan
    Ada juga buku dengan ISBN tidak valid yang digit pemeriksanya tidak cocok dengan sisa ISBN. Jika memperbaiki digit pemeriksa itu justru membuatnya cocok dengan buku lain, maka buku tersebut akan berada di luar ruang ISBN yang diasumsikan oleh artikel blog ini
    [0] https://scis.edublogs.org/2017/09/28/the-dreaded-case-of-dup...

    • Bisa jadi malah memang tidak pernah dialokasikan
      Saat melihat ISBN terendah yang diketahui dari penerbit Ceko, ada warna lain yang muncul, dan https://books.google.cz/books?vid=ISBN9788000000015&redir_es... tampaknya bukan ISBN yang valid :-) Namun saya tidak tahu apakah buku itu memang memuat ISBN palsu yang begitu terang-terangan, atau ini kesalahan data Google Books

  • Presentasinya mengesankan
    Namun tampilan ini bukan katalog ISBN lengkap, melainkan hanya mencerminkan koleksi Anna's Archive. Karena bias pengumpulan Anna, terlihat kecenderungan ke rentang bahasa tertentu, dan area yang ditandai hitam adalah item yang tidak ada di arsip

    • Tidak sepenuhnya tepat. Anna's Archive memiliki basis data terpisah untuk buku yang benar-benar dimilikinya sebagai file, dan basis data untuk buku yang hanya diketahui metadatanya
      Basis data metadata itu berasal dari berbagai sumber, dan sejauh yang saya tahu cukup lengkap. Area hitam kemungkinan besar adalah wilayah yang memang tidak memiliki buku yang dialokasikan

  • Benar-benar keren, proyek penuh semangat yang menakjubkan sekaligus sumber daya yang luar biasa
    Saat diperbesar, judul dan barcode terlihat, dan saat kursor diarahkan, sampul serta detailnya juga muncul. Hampir semua yang bisa diharapkan sudah ada
    Sebagai ide perbaikan, akan bagus jika ada kotak centang untuk menyembunyikan panel putih mengambang di kiri atas dan elemen di kanan atas. Saya suka “tenggelam” dalam visualisasi seperti ini, tetapi elemen mengambang itu sedikit menarik saya keluar dari pengalaman tersebut, sehingga kesenangan dan fungsionalitasnya sedikit berkurang

  • Ini adalah kasus penggunaan yang sangat cocok untuk Microsoft Silverlight PivotViewer, antarmuka web hebat yang dulu dipakai di bidang neuroimaging sebelum dihentikan Microsoft
    Ada presentasi TED yang mengesankan dari Gary W. Flake yang menunjukkan cara menggunakannya
    https://m.youtube.com/watch?v=LT_x9s67yWA
    Ada juga makalah IEEE yang ditulis pada 2011. Sayang sekali ini bukan standar web
    https://www.dropbox.com/scl/fi/bl8zkjs3y47q3377hh3ya/Yan_Wil...

  • Visualisasi yang sangat keren
    Ada kiriman-kiriman lain yang lebih keren di sini: https://software.annas-archive.li/AnnaArchivist/annas-archiv...
    Karya saya ada di https://isbnviz.pages.dev

  • Jika diperbesar, tampilannya seperti rak buku. Benar-benar keren

    • Kemungkinan perbaikan: edisi paperback dan edisi jilid ditampilkan berdampingan, tetapi terlihat sama persis. Untuk ebook, saya kurang tahu

  • Luar biasa. Rasanya seperti Library of Babel versi dunia nyata: https://libraryofbabel.info/
    Di antara segala omong kosong VR, saya rasa saya mungkin mau membayar untuk perpustakaan tak terbatas atau museum tak terbatas di dunia nyata

    • Sayangnya, dalam implementasi spesifik ini, para penulis sama sekali tidak akan menerima uang itu
      Akan jauh lebih menarik jika ini adalah proyek yang memberi akses ke semua teks yang dapat diunduh dan disediakan secara legal. Misalnya sebagai antarmuka untuk tempat seperti ini:
      https://onlinebooks.library.upenn.edu/

  • Presentasi dalam format saat ini terasa sedikit membanjiri
    Butuh waktu bagi saya untuk memahami bahwa bagian preset di kiri atas sebenarnya mengarah ke sumbu visualisasi data tambahan seperti apakah AA disertakan, kelangkaan, dan apakah Google Books disertakan. Meski begitu, visualisasi dan kedalaman datanya sangat kaya
    Saya juga menyukai https://archive.anarchy.cool/blog/all-isbns.html#visualizing yang menunjukkan tampilan klaster regional
    Preset tahun juga menarik dengan sendirinya untuk melihat aktivitas penerbitan per wilayah. Poland tampak sangat aktif belakangan ini, sementara Norway terlihat relatif sepi. China tampaknya mulai meningkat sekitar 2005 dan berkembang sangat besar dalam 10 tahun terakhir
    Ada juga hal yang aneh di United States. Saya belum pernah mendengarnya, tetapi Blackstone Audio, Blurb Inc., dan Draft2Digital menerbitkan ISBN dalam jumlah sangat besar

    • Memang cukup banyak noise, dan itu sampai batas tertentu disengaja karena fokusnya pada kepadatan data yang tinggi
      Tampilan yang sedikit lebih minimalis (lebih sedikit warna, dan hanya menampilkan satu level teks pada satu waktu) ada di sini:
      https://phiresky.github.io/isbn-visualization/?dataset=all&g...
      Sepertinya masih bisa disetel lagi, misalnya dengan menyembunyikan sebagian teks seperti bagian N publishers, atau mengurangi informasi saat mouse over

  • Jalur terbang dapat dipikirkan cukup masuk akal jika dimodelkan sebagai gerakan di atas bidang setengah atas hiperbolik. Ambil x sebagai posisi pada lintasan linear di antara titik akhir, dan y sebagai panjang salah satu sisi viewport
    Saya memikirkan dua metrik yang ternyata menjadi sama. Pertama, dengan mengasumsikan peta tile hierarkis dan meminimalkan jumlah tile yang dimuat. Jika y digunakan sebagai panjang sisi viewport, biaya bergerak horizontal sejauh x adalah x/y tile, dan jika memperbesar/memperkecil dari y_0 ke y_1, jumlah tile yang dimuat adalah abs(log_2(y_1/y_0)), sehingga cocok dengan ds = dy/y. Jika digabung, ds^2 = (dx^2 + dy^2)/y^2, persis metrik bidang setengah atas
    Cara lain adalah melihatnya sebagai upaya meminimalkan “aliran optik” viewport dalam suatu pengertian. Ini juga menghasilkan metrik yang sama, hanya berbeda skala. Jika melakukan panning sejauh x tanpa zoom, semuanya bergerak sebesar x/y, yaitu rasio terhadap viewport. Jika memperbesar k kali, piksel di (u,v) berpindah ke (ku,kv), sehingga perpindahannya adalah (u,v)(k-1). Jika panjang sisi berubah dari y ke y+dy, hasilnya menjadi (u,v)dy/y, sehingga bergantung pada cara merata-ratakan perpindahan, itu menjadi kelipatan konstanta tertentu dari dy/y
    Maka geodesik yang diinginkan adalah horocycle, yaitu lingkaran yang berpusat di y=0, tetapi perlu sedikit pekerjaan untuk menghitung gerakan di sepanjang kurva. Jika mengambil busur dari θ_0 ke θ_1, total waktunya diperoleh dengan mengintegralkan dtheta/y = dθ/sin(θ), jadi untuk akurat perlu membalik t = ln(csc(θ)-cot(θ)). Saya pikir lebih baik memakai aproksimasi, tetapi Mathematica memberi tahu bahwa θ = atan2(1-2    e^(2t), 2    e^t), jadi tidak terlalu buruk
    Dibandingkan dengan logika “blub space”, metrik efektif di sana tampaknya ds^2 = dz^2 + (z+1)^2 dx^2. Itu adalah koordinat polar dengan z=1/y sebagai tingkat zoom, dan jika memakai dz=dy/y^2, maka ds^2 = dy^2/y^4 + dx^2*(1/y^2 + ...). Dengan kata lain, implementasi yang ada tampaknya menghabiskan jauh lebih banyak waktu untuk panning pada tingkat pembesaran tinggi dibanding model hiperbolik. Biaya menurunkan dari 4x ke 2x adalah dua kali biaya menurunkan dari 2x ke 1x, padahal secara visual keduanya sama

    • Setelah saya coba langsung, hasilnya sangat berbeda dari perkiraan, dan jauh lebih banyak melakukan zoom out. Itu karena saya melewatkan sebagian kode zoom
      Zoom mereka bukan faktor skala, melainkan sesuai dengan “y” saya, sehingga metriknya menjadi ds^2 = dy^2 + (C-y)^2 dx^2. Di sini C sedikit lebih besar daripada tingkat zoom maksimum. Ada juga penanganan khusus untuk saat kurva itu ingin zoom out lebih jauh
      Jika dinormalisasi agar biaya melakukan panning sampai ujung saat sepenuhnya zoom out (zoom=1) sama, pada keadaan sangat diperbesar biaya panning hampir datar, sedangkan pada keadaan yang relatif tidak terlalu diperbesar biayanya lebih besar daripada model hiperbolik. Jadi ini tampaknya berkontribusi pada kesan bahwa untuk jarak pendek viewport bergerak sangat cepat, sedangkan untuk jarak panjang tampilannya hampir sepenuhnya zoom out. Karena tingkat pembesaran menengah kurang menguntungkan, lebih baik hampir sampai ujung