D3 का गहन विश्लेषण

• D3 in Depth D3 6·7 पर आधारित एक सीखने का संसाधन है, जो D3.js से कस्टम डेटा विज़ुअलाइज़ेशन बनाने की प्रक्रिया को कवर करता है
• यह साधारण chart उपयोग से अधिक कस्टम विज़ुअलाइज़ेशन बनाने पर फ़ोकस करता है, और वेब विज़ुअलाइज़ेशन के घटकों को भी साथ में सिखाता है
• HTML, SVG, CSS, JavaScript की बुनियाद D3 के काम से जुड़ी हुई है, इसलिए यह वेब-आधारित डेटा प्रस्तुति को समझने में मदद करता है
• React, Chart.js, Leaflet का उपयोग करने वाले dashboard और data story संसाधनों से भी यह जुड़ता है, जिससे JavaScript visualization learning flow बनाया जा सकता है
• जो पाठक D3 को गहराई से सीखना चाहते हैं, उनके लिए यह अवधारणा की समझ और प्रैक्टिस दोनों साथ लेकर चलने वाला शुरुआती और उन्नत संसाधन हो सकता है

---

D3 in Depth किन विषयों को कवर करता है

• D3 in Depth D3 version 6 और 7 को लक्षित करता है
• D3.js का उपयोग करके कस्टम डेटा विज़ुअलाइज़ेशन बनाने का तरीका सीखा जा सकता है
• वेब-आधारित विज़ुअलाइज़ेशन बनाने के लिए ज़रूरी बुनियादी तत्वों के रूप में HTML, SVG, CSS, JavaScript को साथ में कवर किया गया है

साथ में देखने लायक JavaScript visualization संसाधन

• Data Dashboards with JavaScript React, Chart.js, Leaflet का उपयोग करके data dashboard बनाने का तरीका बताता है
• Visualising Data with JavaScript Chart.js, Leaflet, D3, React का उपयोग करके chart और data story बनाने का तरीका बताता है
• एक पाठक समीक्षा में इसे D3 किताबों में काफ़ी ऊँचा आंका गया है, और सामग्री को स्पष्ट, आसानी से follow करने योग्य, और अवधारणात्मक रूप से मज़बूत बताया गया है

[GN⁺]

Hacker News की टिप्पणियाँ

• D3 से data visualization करने का विचार अच्छा है, लेकिन अगर आप थोड़ा और higher-level tool चाहते हैं, तो D3 टीम का बनाया Observable Plot[1] देखने लायक है
  यह D3 के ऊपर graph, chart और plot बनाने के लिए बहुत-सी conventions और convenience features जोड़ने वाली library है
  इससे भी आगे Observable Framework[2] है, जो Plot, D3 और कई दूसरी libraries को support करने वाला visualization dashboard के लिए static site generator है
  1: https://observablehq.com/plot/
  2: https://observablehq.com/framework/
  • इन दिनों मुझे उल्टा approach ज़्यादा आकर्षित करता है। अधिकतर लोगों को पहले से पता होता है कि result ठीक कैसा दिखना चाहिए, लेकिन framework स्वभाव से बहुत-सी पहले से तय settings देता है, और उन settings से थोड़ा भी हटने की कोशिश करें तो तकलीफ़देह हो जाता है
    कई तरह के plots में सीधे SVG data को manipulate करना वास्तव में अक्सर आसान होता है, और इतना कठिन भी नहीं है
    काश कोई library या framework हो जो SVG या canvas output को और आसानी से manipulate करने दे। छोटे बदलाव बेहद आसान होने चाहिए, लेकिन framework जितना higher-level होता जाता है, तय रास्ते से हटना उतना मुश्किल हो जाता है
  • Observable Plot शानदार है। यह बहुत flexible और intuitive है, इसलिए अब मैं पहले इस्तेमाल किए जाने वाले Plotly.js की तुलना में इसे ज़्यादा पसंद करता हूँ
    documentation भी काफ़ी ठीक है, लेकिन usable API reference section नहीं है, इसलिए features ढूँढना आसान नहीं है
  • सोच रहा हूँ कि web visualization के लिए Matlab जैसा drag-and-drop interface मौजूद है या नहीं
    HTML5 canvas से graph बनाना मैं जितना हो सके टालना चाहता हूँ, इसलिए कोई नए तरीके से design किया गया approach हो तो अच्छा होगा
  • Plot और Framework Observable ecosystem से बंधे हैं, और उनका अपना learning curve है। flexibility और control के मामले में D3 सीखना सबसे अच्छा है
  • सोच रहा हूँ कि क्या यह website दूसरों को भी sluggish लगती है। बहुत content वाले webpages में अक्सर stuttering महसूस हुआ
    edit: hardware acceleration on करने पर यह smoother हो गया, लेकिन Ryzen 9 पर भी उम्मीद से अभी भी ज़्यादा sluggish है
• मुझे D3 पसंद है और मैंने इससे बहुत कुछ बनाया है, लेकिन कुछ साल इस्तेमाल न करने के बाद जब भी वापस लौटता हूँ, लगभग कुछ याद नहीं रहता, documentation और भी confuse कर देता है, और लगता है जैसे फिर से शुरुआत पर आ गया हूँ
  अगर 10 साल से न देखी हुई partial differential equation हल करने को कहा जाए, तो शायद उसकी समझ इससे जल्दी वापस आ जाएगी
  मुझे D3 reference documentation सच में भयानक लगती है
  • मैंने D3 को version 2 से 7 तक काफी इस्तेमाल किया है, और बीच की refactoring के कारण online examples पहले से ही समझने में मुश्किल थे और update करना और भी कठिन हो गया
    फिर भी अब यह ज़्यादा stable लगता है। सिर्फ D3 इस्तेमाल करने के बजाय Svelte+D3 के साथ अधिक imperative style में लिखना शुरू किया, तब चीज़ें समझ आने लगीं
    generated elements को बाद में developer tools में देखने के बजाय, generated elements को समझना इससे आसान था
    D3 और Svelte को साथ इस्तेमाल करने में यह site मदद करती है: https://svelte.recipes/
  • मुझे लगता है कि दूसरी plotting libraries की तुलना में इसमें यह समस्या काफ़ी कम है
    मेरे काम का 80% application, 10% system, और 10% data analysis जैसा है, और कभी-कभी मैं 2 हफ्ते तक Jupyter notebook बनाता हूँ और फिर दो महीने उसे नहीं देखता
    अधिकांश plotting libraries में याद रखने के लिए बहुत-से arbitrary rules होते हैं, और आम तौर पर कई छोटे domain-specific languages होते हैं। जैसे एक साधारण string को atoi से कहीं ज़्यादा complex तरीके से interpret किया जाता है
    इसके अलावा axis range तय करना, बहुत सारे points handle करना आदि कई क्षेत्रों में मेरे नज़रिए से कुछ न कुछ गलत होता है
    D3 बहुत कुछ खुद करने को कहता है, लेकिन उसके लिए interfaces conceptually intuitive हैं। किसी और के bloated और bug-heavy general-purpose code को bottle में ship बनाने जैसे API के साथ इस्तेमाल करने के बजाय, D3.js से ठीक से बनाना बेहतर लगता है
  • मैंने D3 इतना इस्तेमाल किया कि AngularJS और Angular के लिए integration तक बनाया था। यह powerful है, लेकिन हमेशा बहुत non-intuitive लगा
    इसे गलत इस्तेमाल करना आसान है, debug करना कठिन है, और समझना भी मुश्किल है
    इसका मतलब यह नहीं कि यह समस्या आसानी से हल हो सकती है। अगर बहुत specific data-driven graphics बनाने हों, तो फिर भी संभवतः D3 ही चुनूँगा
  • calculus के लिए human computation interface कई पीढ़ियों में सावधानी से refined किया गया है। Newton के original text को थोड़ा पढ़ें तो तुरंत पता चल जाता है कि यह हमेशा से ऐसा नहीं था
    API की तुलना उस standard से करना वास्तव में fair नहीं लगता
  • मेरा भी यही अनुभव रहा। आजकल tech lead के रूप में मैं strongly कहता हूँ कि ऐसी libraries न इस्तेमाल करें जिनके लिए high level का domain knowledge चाहिए
    ऐसा code जिसे लिखने वाला भी मुश्किल से समझे, उससे जितना हो सके बचना चाहिए, और D3 ऐसी libraries का प्रतिनिधि उदाहरण है
• मुझे लगता है कि भले ही आप D3 को काम में इस्तेमाल न करें, इसे सीखना worthwhile है। इस library का core यह है कि data के projection target और data की अपनी dimensions हमेशा अलग होती हैं
  उदाहरण के लिए, अगर 0–100 points range का data 1920x1080 वाले 1080p screen पर draw करना हो, तो किसी point पर यह तय करना होगा कि data को screen projection के हिसाब से कैसे scale किया जाए
  आप math खुद calculate कर सकते हैं, या D3 जैसी library को calculation सौंप सकते हैं
  web पर data draw न भी करें, तो भी कभी न कभी कहीं data draw करना पड़ेगा, और उस ecosystem में इसी भूमिका वाला tool ढूँढना उपयोगी होगा
  • मेरे शुरुआती खुद बनाए PHP programs में से एक binomial distribution graph PNG generator था
    याद है कि जिस PNG size को बना रहा था, उसके हिसाब से graph में draw होने वाले rectangles को scale करना पड़ता था
    बेशक यह बहुत trivial था और D3 जो अद्भुत चीज़ें कर सकता है उनसे बिल्कुल अलग था, लेकिन computer पर images बनाना पहली बार खुद करके देखना एक शानदार अनुभव था
  • core concept समझाने वाली अच्छी व्याख्या है
    D3 मुझे व्यक्तिगत रूप से कभी intuitive नहीं लगा। शायद समस्या यह है कि यह बहुत सारे abstraction levels पर बहुत कुछ करने की कोशिश करता है
    अगर बात सिर्फ data को project करने की हो तो समझना आसान है, लेकिन लगता है projection axes और दूसरी चीज़ों से भी गहराई से जुड़ा है
• D3 की असली समस्या यह है कि library के रूप में यह वास्तव में visualization नहीं करती। यह केवल functions और examples देती है जिनसे आप खुद visualization compose कर सकें, और उसकी core requirement JavaScript, खासकर closures और functional programming की expert-level समझ है

मेरे हिसाब से mbostock जिसे D3 का मुख्य abstraction कहते हैं—select और select के बीच फर्क की गणना—वह re-entrant paint() लिखने की सुविधा के ज़्यादा करीब है
बस इतना है कि paint statements builder statements के रूप में व्यक्त होते हैं, वे खुद select scope के अंदर बंधे रहते हैं, और कई effects के लिए उन्हें तोड़ा जा सकता है—इतनी सजावट जुड़ी हुई है
खासकर animation examples में D3 जो काम करता है वह हैरान करने लायक कम है; outer loop चलाना और समय के साथ state track करना आपको खुद करना पड़ता है
D3 visualization को function या किसी और रूप में encapsulate करने वाला abstraction भी नहीं देता, और यह हिस्सा पाठक के homework के लिए छोड़ दिया जाता है
नए D3 users के लिए यह सब बड़ा surprise या shock बनकर आता है। यह कुछ ऐसा है जैसे आपने नया database अपनाया और पाया कि उसमें सिर्फ file I/O, B-tree index और query optimizer libraries हैं, और सब कुछ आपको खुद जोड़ना है

• visx देखने लायक है। असल में इसे D4, यानी Declarative Data Driven Documents कहा जाना चाहिए
  यह D3 के DOM manipulation module d3-select को React से बदलने जैसा है। यह संभव है और अच्छी तरह काम करता है—यह बात D3 design की मजबूती का सबूत है
• D3 matplotlib या ggplot जैसा chart toolkit नहीं, बल्कि data visualization को scratch से बनाने के लिए low-level library है
  आपके लक्ष्य के हिसाब से यह जरूरी tool हो भी सकता है और नहीं भी
• मुझे D3.js पसंद था, और commercial व personal दोनों तरह के दर्जनों data visualization projects में इसे core technology के तौर पर इस्तेमाल किया है। लेकिन अब इसका rendering syntax jQuery era की याद दिलाने जितना पुराना लगता है
  easing या scaling जैसी कई helper functions अब भी इस्तेमाल करता हूँ, लेकिन actual components आजकल के frameworks में बनाता हूँ। मेरे मामले में Vue 3 और TypeScript हैं
  फिर भी D3.js ने जो खूबसूरत समय दिया और data visualization की कई अच्छी practices सिखाईं, उसके लिए आभारी हूँ
  Mike Bostock के defaults और demos प्रेरणा थे और अच्छे standards के उदाहरण भी, और वे Tufte के minimalism से भी अच्छी तरह मेल खाते थे
  • Vue 3 और TypeScript के साथ D3 helper functions इस्तेमाल करने का कोई example हो तो देखना चाहूँगा
• D3 सीखने के बाद, अगर धारणा यह है कि chart जैसी चीजें बनानी हैं, तो VisX या React नहीं बल्कि बराबर के किसी tool पर चले जाना और पीछे मुड़कर न देखना बेहतर लगता है
  D3 और jQuery कुछ हद तक मिलते-जुलते हैं और दोनों में spaghetti code बनने की संभावना रहती है। VisX जैसे tools इस्तेमाल किए जा रहे D3 के ऊपर काफी structure जोड़ते हैं और उसे sane बनाए रखते हैं
  • मैं काफी समय से बीच-बीच में D3 इस्तेमाल करता रहा हूँ, और अभी-अभी React और visx शुरू कर रहा हूँ; यह दोनों के बीच का gap अच्छी तरह भरता है, इसलिए promising लगता है
    हालांकि सोच रहा हूँ कि क्या pure D3 की तुलना में ज़्यादा custom चीज़ बनानी हो तो tools से लड़ना पड़ता है—क्या यह इतना restrictive महसूस होता है?
• D3, Wilkinson की Grammar of Graphics से प्रेरित था
  GG से प्रेरित एक और tool है जिसका नाम भी ठीक-ठाक ggplot2 है, और वह R language के लिए है
  यह कहीं ज्यादा concise और functional-जैसा interface देता है, और Rush नाम के एक uncommon tool—यानी shell के लिए R one-liner—के साथ भी अच्छी तरह चलता है, जिससे CSV को pipe करके जल्दी graphics बनाए जा सकते हैं
• मैं लगातार ऐसे diagram/chart solutions खोज रहा हूँ जो पूरी तरह web-based न हों। उन्हें CLI या library से चलाया जा सके और SVG या PNG output दे सकें
  ऐसे tools आमतौर पर browser features पर निर्भर होते हैं, या server-side generation के लिए headless browser इस्तेमाल करने वाले ढीले-ढाले server-side rendering solutions का उपयोग करते हैं
  खासकर programmatic तरीके से Venn diagrams बना पाना अच्छा होगा। अजीब है कि इस क्षेत्र में लगभग कुछ भी नहीं है
  कुछ JavaScript chart libraries इसका support देती हैं, लेकिन कुल मिलाकर support बहुत कम दिखता है
  gnuplot अच्छा लगता है, लेकिन उसमें Venn diagram support नहीं है
• सिर्फ इसी material ने मुझे D3 समझाया। लेखक भी responsive और मददगार है
• Vega[1] के बारे में बहुत अच्छी बातें सुनी हैं, और यह D3 के ऊपर बना tool है
  यह OpenSearch Dashboards की dependency भी है, जिससे users logs और observability data के ऊपर custom dashboards बना सकते हैं[2]
  लगता है Vega library D3 की learning curve वाली दिक्कत, जिसके बारे में दूसरे लोग बात कर रहे हैं, कुछ हद तक कम कर सकती है
  [1] https://vega.github.io/vega/docs/
  [2] https://opensearch.org/docs/latest/dashboards/visualize/vega...