दुनिया की सभी किताबों को ISBN-Space में विज़ुअलाइज़ करना

 (phiresky.github.io)
2 पॉइंट द्वारा GN⁺ 2025-02-02 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Anna’s Archive के 10 करोड़ से अधिक किताबों के डेटा को एक ही स्क्रीन पर explore करने के लिए, ISBN नाम के सीमित identifier space को map में बदलने वाला approach चाहिए
  • ISBN13, 978-/979- prefix और आख़िरी checksum हटाने पर, करीब 2 अरब slots का 1-dimensional space है, और देश व publisher ranges prefix के आधार पर allocate किए जाते हैं
  • साधारण row-wise layout या Hilbert curve ISBN की structure को समझना मुश्किल बना सकते हैं, इसलिए decimal digits को 2D coordinates में ले जाने वाली Bookshelf-Curve का उपयोग किया गया
  • map tiles PNG और JSON static files के रूप में दिए जाते हैं, और WebGL/GLSL shader publication year, holdings ratio, dataset comparison, publisher highlighting जैसी rendering और filtering तुरंत handle करता है
  • इसे ThreeJS, React, MobX, react-threejs-fiber आधारित static frontend के रूप में implement किया गया है, और बड़े पैमाने पर text rendering व zoom/pan performance optimization ही असली usability तय करते हैं

ISBN space को visualization target बनाने की वजह

  • Libraries लंबे समय से मानव ज्ञान को इकट्ठा करती आई हैं, और digital era में किसी खास criteria को पूरा करने वाली works को व्यापक रूप से collect करना संभव हो सकता है
  • shadow libraries में से एक Anna’s Archive को 10 करोड़ से अधिक किताबों को एक साथ explore कर सकने वाली visualization की ज़रूरत थी
  • target data में title, author, country, publisher, publication period, holdings वाली libraries की संख्या, digital availability आदि शामिल हैं
  • interactive visualization dataset selection, individual book search, publication year filtering, custom shader आधारित composite visualization को support करती है
  • maximum zoom पर हर किताब bookshelf में लगी हुई जैसी दिखने वाली representation में बदल जाती है

ISBN की structure

  • ISBN13 लगभग सभी published books को दिया जाने वाला 13-digit number है
  • अभी ISBN13 के पहले तीन digits 978- या 979- fixed होते हैं, और आख़िरी digit checksum होता है
  • इसलिए actual ISBN13 space को करीब 2 अरब slots माना जा सकता है
  • 978- और 979- prefixes इसलिए हैं क्योंकि ISBN13 European Article Number का subset है, और इस fixed prefix को Bookland कहा जाता है
  • बड़े ISBN blocks International ISBN Agency द्वारा international organizations को allocate किए जाते हैं, और हर देश अपना block publishers के हिसाब से फिर divide करता है
  • ISBN blocks हमेशा prefix के basis पर allocate होते हैं
    • 978-4 Japan को allocate है
    • Japan ने 978-4-312 एक publisher को allocate किया
    • वह publisher 000000-99999 range के items allocate करके 978-4-312-99999-X जैसा ISBN बना सकता है
  • country prefix जितना लंबा होगा, उसके भीतर allocate की जा सकने वाली books की संख्या उतनी कम होगी
    • Japan के पास 10 करोड़ ISBN space है
    • Singapore 978-9971- prefix से शुरू होता है और सिर्फ 1 लाख ISBN ही संभव हैं

1-dimensional ISBN को 2-dimensional में फैलाने का तरीका

  • 978-/979- prefix और checksum हटाने पर ISBN 0 से 2 अरब के बीच का decimal 1-dimensional value बन जाता है
  • सबसे simple तरीका pixels को ऊपर से row-wise भरना है, लेकिन छोटे regions horizontal direction में लंबाई में फैल जाते हैं, जिससे ISBN structure देखना मुश्किल हो जाता है
  • Hilbert curve छोटे regions को square के ज्यादा करीब बना सकती है, लेकिन data में मौजूद न होने वाले spatial structure artifacts पैदा हो सकते हैं
  • यह visualization data में मौजूद न होने वाली structure से बचने के लिए ISBN की decimal nature का इस्तेमाल करने वाली Bookshelf-Curve उपयोग करती है

Bookshelf-Curve

  • Bookshelf-Curve में first decimal digit के 0-9 को बगल-बगल रखा जाता है, और next digit के 0-9 को ऊपर-नीचे रखा जाता है; यह process recursively repeat होती है
  • दो levels के rectangles का ratio बनाए रखने के लिए हर block का aspect ratio √10, यानी करीब 3.16:1 होता है
  • यह structure A4 paper के recursive aspect ratio concept जैसी है, लेकिन दो हिस्सों में बांटने के बजाय 10 intervals में बांटती है
  • coordinate transform simple है, क्योंकि ISBN के digits को एक-एक छोड़कर coordinates के रूप में इस्तेमाल किया जाता है
  • implementation code generalization की कोशिश की वजह से 50 lines का हो गया, लेकिन principle इतना समझने में आसान है कि किसी specific ISBN location को हाथ से follow करके खोजा जा सकता है

map tiles और data encoding

  • हर ISBN prefix के लिए tile image generate की जाती है
  • target tile size करीब 100kB था, और इसके परिणामस्वरूप tile size 2000 × 633 pixels बना
  • dataset के हिसाब से pixel में store की जाने वाली information अलग होती है
    • publication year dataset में 1800 घटाई गई value को 8-bit range में store किया जाता है
    • red channel उस pixel के भीतर books का average publication year रखता है
    • blue channel existing books का ratio रखता है
    • उदाहरण के लिए अगर 50% books मौजूद हैं, तो blue channel value 127/255 होती है
  • maximum zoom level पर accuracy के लिए 1 book को 1 pixel से map किया जाता है

GLSL shader आधारित rendering

  • शुरुआत में RGB data सीधे tiles में store किया गया था, लेकिन flexibility बढ़ाने के लिए ज्यादा abstract data store किया गया और actual rendering GPU के GLSL fragment shader में handle की गई
  • यह तरीका color palette बाद में चुनने, arbitrary transforms और filters तुरंत apply करने, या कई datasets को on-the-fly combine करने की सुविधा देता है
  • publication year data 1800-2055 range store करता है, लेकिन 95% data 1985-2024 range में है, इसलिए shader में इस interval में compress करके दिखाया जा सकता है
  • heatmapColor(float) function 0-1 value को user-selected color scale में convert करता है
  • $dataset_x syntax GLSL की अपनी syntax नहीं है, बल्कि shader वास्तव में जिन images को पढ़ता है सिर्फ उन्हें load करने के लिए simple regex-based template syntax है
  • visualization के ⚙️ Advanced option में shader को सीधे modify किया जा सकता है, और changes real time में reflect होते हैं
  • हर dataset pixel का meaning README में summarized है

zoom करने पर bookshelf जैसा दिखाने वाली representation

  • पूरी तरह zoomed-in view में हर pixel को book जैसा दिखने वाला style दिया जाता है
  • हर book को random width, height और pattern दिया जाता है
  • यह real book shape जैसा exact नहीं है, लेकिन maximum zoomed screen को ज्यादा जीवंत scene जैसा दिखाता है
  • यह styling पूरी तरह shader में implement की गई है
  • GLSL और JavaScript में same random number generation result चाहिए था, इसलिए book height calculate करके text boundary align करने वाला हिस्सा tricky था
  • current zoom value को uniform के रूप में pass करके और दो zoom levels के बीच fade-in करने पर bookshelf style smoothly दिखाया जा सकता है

text, tree structure, performance

  • image tiles की तरह text भी zoom level और view frustum culling के आधार पर hierarchical structure में render होता है
  • implementation में react-threejs-fiber का उपयोग किया गया
  • view move होने पर React recursively scene elements add करता है, और हर prefix के लिए Plane, HTML text, child prefix nodes compose करता है
  • बहुत सारा text render करते हुए शुरुआत में बड़े performance issues थे
  • HTML को SVG के <foreignObject /> के अंदर डालकर, उसे canvas पर drawImage से render करने और फिर texture के रूप में load करने वाला तरीका सबसे अच्छा approach था
  • यह तरीका काम करता था, लेकिन rendering process में synchronously हर बार 20ms delay बनाता था
  • SVG को WebWorker में draw नहीं किया जा सकता, इसलिए इसे WebWorker में move करना मुश्किल था
  • actual performance issues ज्यादातर HTML elements की संख्या घटाने, प्रति frame add होने वाले DOM content को limit करने, और खासकर text-shadow CSS filter stack हटाने से सुधर गए

barcode और publisher ranges

  • maximum zoom पर हर book पर barcode दिखता है
  • barcode इसलिए जोड़ा गया ताकि यह concept मजबूत हो कि books ISBN order में sorted हैं
  • barcode rendering library की जगह Libre Barcode TTF font का इस्तेमाल किया गया, जो 13-digit numbers को barcode में render करता है और check digit भी calculate करता है
  • operating system की text rendering optimization की वजह से यह तरीका convenient और performant था
  • हर group आमतौर पर country-level की बड़ी range रखता है, और publisher उसके अंदर छोटी range रखता है
  • groups और publishers को अलग-अलग unique random colors allocate किए जाते हैं
  • अगर किसी publisher की कई ranges हों, तब भी same color इस्तेमाल होता है
  • सभी ranges को simultaneously highlight करने के लिए हर publisher को unique ID दिया गया और इसे RGB components के रूप में store किया गया
  • publisher colors में अभी भी कुछ असंतोषजनक points बचे हैं
    • publisher colors heatmap color scale से clash करते हैं
    • country ranges देखना मुश्किल है

search navigation और flight path

  • book search करने या minimap click करने पर उस location तक fly navigation होता है
  • देखने में अच्छा flight path calculate करना उम्मीद से ज्यादा कठिन था
  • parabola fitting से result ordinary था, और बाद में अलग transform space इस्तेमाल करने वाला approach try किया गया
  • final result perfect नहीं है और करीब 500 lines of code के साथ थोड़ा over-engineered लगता है, लेकिन original approach से बेहतर काम करता है

architecture और processing pipeline

  • backend की ज़रूरत नहीं है
    • image tiles PNG के रूप में store हैं
    • data tree JSON के रूप में store है
    • HTML, JS, CSS, PNG, JSON को GitHub Pages जैसे static file host पर upload करना काफी है
  • frontend ThreeJS, React, MobX का इस्तेमाल करता है
  • यह combination reusable components के साथ responsive, declarative, GPU-accelerated 2D/3D scenes बनाने में convenient था
  • processing scripts ज्यादातर JS में लिखी गईं और JSON व PNG सीधे output करती हैं
  • कुछ scripts को 250GB source files पढ़कर SQLite में output करना था, इसलिए उन्हें Rust में लिखा गया

result और code

  • result ISBN दिए गए published books को flexibly visualize करने का तरीका बना
  • यह project ISBN की वजह से संभव हुआ, जिसका identifier space बस इतना छोटा design किया गया था कि यह काफी हो सके
  • UUID से यही काम किया जाता, तो ज्यादातर हिस्सा विशाल empty space होता
  • source code isbn-visualization पर public है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-02-02
Hacker News की राय

  • Amazon शुरू करते समय मैं ठीक ऐसा ही करना चाहता था, लेकिन ISBN के बजाय Library of Congress की तीन-स्तरीय classification इस्तेमाल करने की सोच रहा था
    आखिरकार data providers Baker & Taylor और Books In Print ने तीनों classifications को एक ही string में मिला दिया, जिससे boundaries को स्थिर रूप से पहचानना संभव नहीं था, और ठीक से शुरू करने से पहले ही इसे छोड़ना पड़ा
    1994~1995 वाले web पर इस तरह की “flight”-style exploration implement करना भी निश्चित रूप से आसान नहीं रहा होगा, इसलिए यह शानदार काम है

    • यहाँ जिस LoC three-level classification की बात हो रही है, वह क्या है, यह जानने की जिज्ञासा है
      मैंने LoC Classification और LoC Subject Headings को काफी देखा है, लेकिन अफसोस कि दोनों ही freely available, उपयोगी machine-readable format में नहीं मिलते। PDF के साथ कुछ हद तक workaround किया जा सकता है
      खास तौर पर Classification का state law section, states के हिसाब से classification density में बहुत असमान था; मेरी याद में NY और CA बेहद complex थे, PA थोड़ा पीछे तीसरे नंबर पर था, और कई “flyover” states लगभग हास्यास्पद रूप से simple और एक-दूसरे जैसे थे। यह शायद हर state के statutory law, regulations और case law की complexity को दर्शाता है
      एक और दिलचस्प ऐतिहासिक तथ्य यह है कि classification system और alphabetical top-level divisions सीधे Thomas Jefferson की personal library से आए लगते हैं, जिससे LoC की शुरुआत हुई थी
      अगर रुचि हो, तो Hathi Trust में मौजूद Librarian of Congress की Congress को submitted annual reports में Classification के development और expansion का काफी इतिहास देखा जा सकता है
      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>
    • पहले Baker & Taylor से deal कर चुके व्यक्ति के तौर पर, यह बिल्कुल भी चौंकाने वाला नहीं है
      जिन companies के साथ मैंने काम किया है, उनमें यह technically सबसे पीछे रहने वालों में से एक थी, और 2020 की शुरुआत में account बंद करने तक भी purchase orders और settlements कागज, PDF और email से handle होते थे। एक समय तो शायद उन्होंने documents fax से भेजने को भी कहा था

  • ISBN का अलग-अलग books को duplicate assignment होना दुर्लभ नहीं है [0], इसलिए “ISBN space की सभी books” कहना थोड़ा बढ़ा-चढ़ाकर हो सकता है
    कुछ books में invalid ISBN भी होते हैं, जिनका check digit बाकी ISBN से match नहीं करता। अगर check digit ठीक करने पर वह किसी दूसरी book से match हो जाए, तो वह उस ISBN space के बाहर चली जाती है जिसे blog post ने assume किया है
    [0] https://scis.edublogs.org/2017/09/28/the-dreaded-case-of-dup...

    • यह भी संभव है कि वह कभी assign ही न हुआ हो
      Czech publishers के सबसे कम known ISBNs देखते हुए एक अलग रंग उभर आया, लेकिन https://books.google.cz/books?vid=ISBN9788000000015&redir_es... सही ISBN नहीं लगता :-) हालांकि यह नहीं पता कि उस book में सचमुच इतना साफ-साफ fake ISBN है, या यह Google Books data error है

  • presentation प्रभावशाली है
    हालांकि यह screen पूरे ISBN catalog को नहीं, बल्कि सिर्फ Anna's Archive की holdings को दर्शाती है। Anna के collection bias की वजह से कुछ language ranges की तरफ bias दिखता है, और black में दिखाए गए areas archive में मौजूद items नहीं हैं

    • पूरी तरह सही नहीं है। Anna's Archive में books की एक database है जिनकी actual files उसके पास हैं, और एक अलग database है जिन books का उसे सिर्फ metadata पता है
      metadata database कई sources से आता है, और जहाँ तक मुझे पता है, काफी complete है। black areas संभवतः ज्यादातर वे sections हैं जहाँ assigned books नहीं हैं

  • वाकई शानदार, हैरान करने वाला passion project और बेहतरीन resource है
    zoom करने पर titles और barcodes दिखते हैं, और mouse hover करने पर cover और details तक दिखती हैं। जो चाहा जा सकता है, लगभग सब है
    improvement idea के तौर पर, अच्छा होगा अगर top-left floating white panel और top-right elements को hide करने के लिए checkbox हो। मुझे ऐसी visualization में “immersed” होना पसंद है, लेकिन floating elements उस experience से थोड़ा बाहर खींच लेते हैं, जिससे मजा और functionality थोड़ी कम हो जाती है

  • यह Microsoft द्वारा बंद किए जाने से पहले neuroimaging field में इस्तेमाल हुए बेहतरीन web interface Microsoft Silverlight PivotViewer के लिए बिल्कुल perfect use case है
    Gary W. Flake का एक impressive TED talk है जिसमें वे इसका use दिखाते हैं
    https://m.youtube.com/watch?v=LT_x9s67yWA
    2011 में लिखा गया IEEE paper भी है। बहुत अफसोस है कि यह web standard नहीं है
    https://www.dropbox.com/scl/fi/bl8zkjs3y47q3377hh3ya/Yan_Wil...

  • बहुत शानदार visualization है
    यहाँ और भी बढ़िया submissions हैं: https://software.annas-archive.li/AnnaArchivist/annas-archiv...
    मेरा काम https://isbnviz.pages.dev पर है

  • ज़ूम इन करने पर यह बुकशेल्फ़ जैसा दिखता है। वाकई शानदार

    • सुधार की गुंजाइश: पेपरबैक और बाउंड एडिशन साथ-साथ दिखते हैं, लेकिन बिल्कुल एक जैसे लगते हैं। eBook के बारे में पक्का नहीं

  • बेहतरीन। यह Library of Babel का वास्तविक रूप जैसा लगता है: https://libraryofbabel.info/
    तमाम VR बकवास के बीच भी, अगर वास्तविक दुनिया की अनंत लाइब्रेरी या अनंत म्यूज़ियम हो तो शायद मैं पैसे देने को तैयार होऊँ

    • दुर्भाग्य से, इस खास implementation में लेखकों को उस पैसे में से कुछ भी नहीं मिलेगा
      अगर यह ऐसा project होता जो कानूनी रूप से उपलब्ध सभी downloadable texts तक पहुँच देता, तो यह कहीं ज़्यादा दिलचस्प होता। जैसे, ऐसी जगहों के interface की तरह:
      https://onlinebooks.library.upenn.edu/

  • मौजूदा format में presentation थोड़ा भारी-भरकम लगा
    यह समझने में थोड़ा समय लगा कि ऊपर-बाईं तरफ़ के presets असल में AA शामिल है या नहीं, rarity, Google Books शामिल है या नहीं जैसे अतिरिक्त data visualization axes तक ले जाते हैं। फिर भी visualization और data की depth भरपूर है
    regional clusters का रूप दिखाने वाला https://archive.anarchy.cool/blog/all-isbns.html#visualizing भी अच्छा लगा
    year preset अपने-आप में भी region-wise publishing activity देखने के लिए दिलचस्प था। Poland हाल में बहुत सक्रिय है, और Norway अपेक्षाकृत शांत दिखता है। China करीब 2005 से बढ़ता दिखता है और पिछले 10 वर्षों में तो बहुत बड़ा हो गया लगता है
    United States में भी कुछ अजीब है। मैंने इनके बारे में नहीं सुना, लेकिन Blackstone Audio, Blurb Inc., Draft2Digital ने बहुत बड़ी संख्या में ISBN जारी किए हैं

    • यह सच है कि यह काफ़ी noise वाला है, और high data density पर focus होने की वजह से कुछ हद तक यह इरादतन भी है
      थोड़ा ज़्यादा minimal view (कम रंग, और एक समय में सिर्फ़ एक text level दिखाना) यहाँ है:
      https://phiresky.github.io/isbn-visualization/?dataset=all&g...
      कुछ text, जैसे N publishers वाला हिस्सा छिपाकर या mouseover info घटाकर इसे और tune किया जा सकता है

  • flight path को hyperbolic upper half-plane पर movement की तरह model करना काफ़ी reasonable लगता है। x को endpoints के बीच linear path पर position, और y को viewport की एक side की length मान लें
    मैंने दो metrics के बारे में सोचा जो एक जैसी निकलती हैं। पहली, hierarchical tile map मानकर loaded tiles की संख्या minimize करने का तरीका है। y को viewport की side length मानें तो x जितना horizontal move करने की cost x/y tiles है, और y_0 से y_1 तक zoom in/out करने पर abs(log_2(y_1/y_0)) tiles load होते हैं, इसलिए यह ds = dy/y से match करता है। मिलाकर ds^2 = (dx^2 + dy^2)/y^2 होता है, और यह बिल्कुल upper half-plane metric है
    दूसरे तरीके में viewport के “optical flow” को किसी अर्थ में minimize करना माना जा सकता है। इसमें भी सिर्फ़ scale अलग है, वही metric निकलती है। बिना zoom किए x जितना pan करने पर सब कुछ x/y, यानी viewport के अनुपात में, move करता है। k गुना zoom करने पर (u,v) का pixel (ku,kv) पर जाता है, इसलिए displacement (u,v)(k-1) है। side length y से y+dy होने पर यह (u,v)dy/y बनता है, इसलिए displacement को कैसे average करते हैं, उसके हिसाब से dy/y का कोई constant multiple मिलता है
    तब desired geodesic y=0 पर center वाले circle यानी horocycle होंगे, लेकिन curve के along movement calculate करने में थोड़ा काम लगता है। θ_0 से θ_1 तक arc लें तो total time dtheta/y = dθ/sin(θ) को integrate करके मिलता है, इसलिए बिल्कुल सही करने के लिए t = ln(csc(θ)-cot(θ)) को invert करना होगा। लगा कि approximation बेहतर होगी, लेकिन Mathematica ने बताया कि θ = atan2(1-2    e^(2t), 2    e^t) होता है, इसलिए इतना बुरा भी नहीं
    “blub space” logic से तुलना करें तो वहाँ की effective metric शायद ds^2 = dz^2 + (z+1)^2 dx^2 है। z=1/y को zoom level मानने वाला polar coordinate है, और dz=dy/y^2 इस्तेमाल करें तो ds^2 = dy^2/y^4 + dx^2*(1/y^2 + ...) बनता है। यानी मौजूदा implementation hyperbolic model के मुकाबले high zoom levels पर panning में कहीं ज़्यादा समय लगाती लगती है। 4x से 2x तक घटाने की cost 2x से 1x तक घटाने की cost की दोगुनी है, जबकि visually यह समान है

    • असल में छूकर देखा तो यह उम्मीद से बहुत अलग था, और कहीं ज़्यादा zoom out हुआ। वजह यह कि zoom code का एक हिस्सा मुझसे छूट गया था
      उनका zoom scale factor नहीं, बल्कि मेरे “y” के बराबर है, इसलिए metric ds^2 = dy^2 + (C-y)^2 dx^2 बनती है। यहाँ C maximum zoom level से थोड़ा बड़ा है। जब वह curve और दूर zoom out करना चाहती है, उसके लिए special handling भी है
      अगर इसे ऐसे normalize करें कि पूरी तरह zoom out state (zoom=1) में आख़िर तक pan करने की cost same हो, तो बहुत deep zoom state में panning cost लगभग flat होती है, और अपेक्षाकृत कम zoomed state में hyperbolic model से ज़्यादा होती है। इसलिए short distances में viewport बहुत तेज़ी से move करता हुआ लगता है, और long distances में लगभग अंत तक zoom out करता हुआ दिखता है—शायद इसमें यही योगदान देता है। middle zoom level disadvantageous है, इसलिए लगभग अंत तक जाना बेहतर हो जाता है