Svelte से बना UI घनत्व प्रयोग

• Grid एक ऐसा प्रयोग है जिसमें उपयोगकर्ता UI density को समायोजित करके देख सकते हैं, और इसका नया version अभी बन रहा है
• इसके बाद वाला Matrix और अधिक UI density के लक्ष्य के साथ S&P 500 और NASDAQ-100 correlation matrix दिखाता है
• S&P500 के constituent stocks चुनने पर यह 2.5 लाख से अधिक cells और 3 करोड़ से अधिक data points के correlations को संभालता है
• कुछ features नीचे दिए गए preview में शामिल नहीं हैं; उन्हें समझने के लिए Matrix full-screen UI खोलना होगा
• साइट की सामग्री केवल जानकारी देने के उद्देश्य से है, इसे investment advice या securities खरीदने-बेचने की recommendation नहीं माना जा सकता

---

Grid से Matrix तक का UI density experiment

• Grid user-configurable UI density का एक experimental project है, और इसका नया version बन रहा है
• Matrix UI density को और आगे बढ़ाने वाला एक प्रयोग है, जो बड़े पैमाने पर S&P 500 और NASDAQ-100 correlation matrix उपलब्ध कराता है
• नीचे दिए गए preview में Matrix का कुछ हिस्सा देखा जा सकता है, लेकिन कुछ features केवल Matrix के full-screen UI में ही उपलब्ध हैं

Matrix जिन data scale को संभालता है

• यदि S&P500 constituent stocks को dataset के रूप में चुना जाए, तो इसमें 250,000 से अधिक cells शामिल होते हैं
  • यह 30,000,000 से अधिक data points के correlations की गणना करता है
  • Matrix experiment के About page पर अतिरिक्त जानकारी देखी जा सकती है
• home page वर्तमान में उपलब्ध सभी data visualization experiments का overview देता है

Preview में उपलब्ध control elements

• Dataset selection options में S&P500 और NASDAQ100 हैं
• Horizon में 1M और 1Y चुने जा सकते हैं
• data preprocessing option के रूप में Detrend Data checkbox है
• sorting से जुड़े options इस प्रकार हैं
  • Sort By: Cluster, AvgCorr, MedCorr, Name
  • Cluster Method: Avg, Complete, Ward
  • Sort Direction: Asc, Desc
• preview UI में Minimap, Search, Rolling Correlation Chart, cell hover और click guidance शामिल हैं
• दिखाए गए state में Symbols 101, Correlations 5,050, Cells 10,201 दिखाई देते हैं

उपयोग करते समय ध्यान देने योग्य बात

• वेबसाइट की सामग्री केवल जानकारी देने के उद्देश्य से है; यह investment advice या securities खरीदने-बेचने की recommendation नहीं है

[GN⁺]

Hacker News की राय

• मैं tabular data के साथ बहुत काम करता हूं, इसलिए एक स्क्रीन पर जितना ज़्यादा दिख सके, उसे पसंद करता हूं। रिपोर्ट design पर सबसे बड़ा असर, हैरानी की बात है, iTunes का था: बस उतना ही whitespace जितना ज़रूरी हो, striped rows, तेज़ और आसान sorting, और हो सके तो column browser जैसी structure। मैं कई सालों से DataTables को संतुष्टि के साथ इस्तेमाल कर रहा हूं
  आजकल मैं sorting और display के बीच experiments कर रहा हूं। अगर Jira से लाया गया कोई issue blocked है, तो सोचता हूं कि sorting/filtering के लिए अलग boolean column चाहिए या किसी दूसरे column (जैसे elapsed time) पर सिर्फ style लगा देना काफी है। 100 से ज़्यादा rows वाली table में एक cell के orange, red, bold red values से ही यह पहचाना जा सकता है या नहीं कि अभी किस item पर action चाहिए, यह देख रहा हूं
  इस experiment के table view में जो चीज़ें पसंद आईं वे हैं real-time updates, कई columns पर stable sorting, mouse over पर row highlight, पीछे के zeros को fade करना, overdone न लगने वाले colors (मूल रूप से करीब तीन pairs), और 24H Low/High column में sparkline जैसे graphs। जो कमियां लगीं वे हैं लगभग न दिखने वाला horizontal scrollbar, graph लगा हुआ चौड़ा vertical scrollbar, 24H Low/High असल में कैसे sort होता है यह unclear होना, और filtering न होना। मेरी reports से तुलना करने पर यह भी दिखता है कि values की width में variation बहुत बड़ा नहीं है। सिर्फ numbers के बजाय text मिला हो तो column width manage करना ज़्यादा मुश्किल होता है
  • मुझे याद है कि Catalina पर upgrade करने में देरी की थी, क्योंकि डर था कि iTunes.app गायब हो जाएगा। वह app पूरी तरह underrated था, और Music.app लगभग वही app है और migration भी आसान था, इसलिए सचमुच खुशी हुई
  • DataTables शानदार है। एक product में 10 साल से ज़्यादा समय से इस्तेमाल कर रहा हूं। नए और बेहतर alternatives लगातार खोजता रहता हूं, लेकिन अभी तक नहीं मिला
  • Jira या asynchronously चलने वाले दूसरे कामों से integrate करने वाली Mac app development पर भी experiment कर रहा हूं। मुझे data view से ज़्यादा यह control दिलचस्प लग रहा था कि किस चीज़ की notification कब मिले, लेकिन इस comment और UI को देखकर मुख्य data screen में अटके हुए कुछ और ideas try करने का मन हुआ
  • क्या आप size को color से दिखाने वाली conditional formatting की बात कर रहे हैं?
• Table scrollbar को code editor के minimap की तरह expand करके उसमें extra information डालने का तरीका मुझे काफी पसंद आया। इससे एक नजर में समझने में मदद मिलती है कि screen का data बड़े dataset के अंदर roughly कहां है
  helix पढ़ने में मुश्किल और बहुत उपयोगी नहीं लगा। ऐसे graphs उस periodic data के लिए बेहतर हैं जिसकी period पूरे data range से बहुत छोटी हो
  cube ने curiosity जगाई, लेकिन उसके फायदे साफ नहीं दिखे। आम तौर पर 3D visualization, उसी चीज़ को तीन 2D graphs (यहां तीन scatter plots) में दिखाने की तुलना में कम effective होती है। 3D से 2D में project होने पर distortion पैदा होता है, और position comparison को लेकर इंसानों की basic sense भी उलझ जाती है। उत्सुकता है कि यहां intended effect क्या था
  • साफ कर दूं, मैं इस खूबसूरत project का creator नहीं हूं
  • सच कहूं तो helix tab इतना जबरदस्त था कि मैं उसी के बारे में बात करने आया था। उदाहरण के लिए, stocks और दूसरे products, खासकर derivatives की volatility plot करने में इसका इस्तेमाल हो सकता है
    past को जितना हो सके natural तरीके से देखने देते हुए recent data को बड़ा दिखाने का तरीका सचमुच genius है। यकीन करना मुश्किल है कि यह idea पहले क्यों नहीं आया
• उम्मीद है कि ऐसे projects अच्छी तरह designed होते हुए भी information density ज़्यादा रखने और जगह बचाने वाले interfaces की तरफ लौटने का signal हैं
  Google ने जिस "Material Design" को practically दफना दिया, उसके बाद bloatedness, white space, excessive spacing और “airiness” जैसी बर्बादी बहुत ज़्यादा हो गई थी
  सपना तो देख ही सकते हैं
  • Mobile में touch targets उंगली के size के होने चाहिए, इसलिए कुछ हद तक spacious UI की जरूरत होती है
    कंपनियां हर platform के लिए दो बहुत अलग UI design नहीं करना चाहतीं, और आम तौर पर users चाहते हैं कि एक platform पर सीखा हुआ usage दूसरे platform पर भी चले
    accessibility भी तब आसान होती है जब design में बड़े fonts के लिए room हो और precise motor control की जरूरत न हो। अपने पिता को साफ तौर पर उम्रदराज़ होते देखते हुए, मुझे समझ आ रहा है कि जो apps spacious लगते हैं वे भी इस नजरिए से काफी नहीं हैं
    जब तक वे forces नहीं बदलते जिन्होंने शुरुआत में हमें उस दिशा में धकेला, मुझे समझ नहीं आता कि information-dense design की तरफ कैसे लौट सकते हैं

  • starting with (now Google-dead) "Material Design"
    मुझे लगा था यह अभी भी actively develop हो रहा है। क्या मतलब है कि Google ने इसे खत्म कर दिया?
    https://m3.material.io/

  • लगता है यह OS 9 से OS X पर जाने के समय Apple से शुरू हुआ। तब इसे समझा नहीं सकता था, लेकिन आज भी लगता है कि महंगी screen space बहुत ज़्यादा waste होती है
• मुझे लगता है कि इस experiment में UI density design करते समय का एक key element, typography, missing है
  ये screens single-size fixed-width font इस्तेमाल कर रही हैं। 1980s के text mode UI जैसा retro feel है, और अगर वही intended constraint था तो ठीक है
  लेकिन अगर typeface और sizes में सही hierarchy रखी जा सके, तो screen में कहीं ज़्यादा information डाली जा सकती है
  basic example के तौर पर, “About” box अभी phone screen का लगभग 1/4 हिस्सा घेरता है। छोटे proportional-width font में बदलने पर phone पर readable रहते हुए भी यही information आधी जगह में आ सकती है
  Edward Tufte जैसे बेहतरीन information designers के काम देखें तो वे अक्सर typography को सही सेट करने पर बहुत ध्यान देते हैं। उनकी किताबें visualizations के बाहर के body text में भी कई typography elements और scales इस्तेमाल करती हैं
  • इस विषय पर Edward Tufte की कोई specific writing recommend कर सकते हैं?
• सही comparison के तौर पर Perspective जैसी चीज़ का नाम लिया जा सकता है? (https://perspective.finos.org/)
  उत्सुकता है कि focus performance, visualization, या किसी और चीज़ से जुड़ी density पर है
  • Original site की तुलना में loading बहुत धीमी थी। वैसे original का helix tab सचमुच कमाल है
  • पहली बार खोलते समय लगा था कि यह Perspective से बना है
    निश्चित रूप से उस से काफी प्रभावित महसूस होता है
• Windows Forms में data-heavy financial apps बनाते समय मुझे खास तौर पर DataGridView control पसंद है। इसमें filtering, sorting, drag-and-drop से column reordering/resizing है, और density व performance भी high हैं। Pagination की भी जरूरत नहीं। 10,000 rows डालनी हों तो बस डाल दीजिए। हम जो UI बनाते हैं उनमें से ज़्यादातर DataGridView panels से भरी screens हैं। बदसूरत है? हां। तेज़ है? वह भी हां

React से मिलती-जुलती UI बनाने की कोशिशें खराब performance की वजह से ज़्यादातर नाकाम रहीं। स्वीकार्य rendering performance पाने के लिए data table में React को पूरी तरह bypass किया गया। फिर भी browser rendering खुद असहनीय रूप से धीमी न हो जाए, इसके लिए हर row में DOM elements की संख्या न्यूनतम रखनी पड़ी

• WinForms अब भी शायद मेरा सबसे पसंदीदा UI framework है। यह निश्चित रूप से एक भोंडा tool है, लेकिन इसे मनचाहे तरीके से इस्तेमाल किया जा सकता है। बेहद flexible, इस्तेमाल में काफ़ी आसान, काफी तेज़, और बुरी तरह बदसूरत
  कोई भी arbitrary Object डाल दें, यह बस काम करने लगता है। PropertyGrid के अंदर PropertyGrid nest कर सकते हैं, object collections तक expand कर सकते हैं, controls को जितनी गहराई तक चाहें nest करके बना सकते हैं। UI जिस object से जुड़ता है, उसकी internal structure को छूने या उसकी चिंता करने की ज़रूरत नहीं होती (हालाँकि सीमाएँ हैं)
  मेरे लिए WinForms UI framework का Platonic ideal है। अगर मैं design करता, तो शायद बिल्कुल ऐसा ही बनाता

• information density मुझे सचमुच बहुत पसंद है
  मैं पुराने अखबार collect करता हूँ, और उस समय information density कहीं ज़्यादा थी। अगर आप कोई शानदार coffee table book ढूँढ रहे हैं, तो "nytimes complete front pages" search करके देखें। fold के ऊपर सचमुच बहुत सारी मुख्य जानकारी होती थी
  मेरे हिसाब से high information density, high intelligence जैसी है। sorting priority को सही ढंग से तय करना बहुत मूल्यवान और महत्वपूर्ण है
  पिछले कुछ सालों में web उल्टी दिशा में जाता दिखा, इसलिए अच्छा लगता है कि अब भी कुछ लोग दूसरी तरफ़ नाव चला रहे हैं
  एक और उदाहरण के तौर पर, मेरा blog zoom in/out के ज़रिए लगभग 20 साल की posts एक साथ दिखाने के लिए design किया गया है (https://breckyunits.com/)
  साथ ही, high information density वाली cheatsheets को promote करने और उन्हें बनाना आसान बनाने का काम भी जल्द publish करने वाला हूँ। नाम Leet Sheet रखने का मन बना रहा हूँ (https://pldb.io/blog/leetSheets.html)

  • I think high information density === high intelligence.
    छोटे fonts और कम margins वगैरह से screen पर बहुत सारी चीज़ें एक साथ ठूँसने पर, बुद्धिमान लोगों के लिए भी बहुत सारी accessibility issues पैदा होती हैं
    Google जैसी कंपनियाँ margins और padding इसलिए बढ़ाती हैं ताकि UI ज़्यादा लोगों के लिए accessible बन सके। बात सिर्फ़ eyesight की नहीं है; Parkinson’s जैसी शारीरिक समस्याएँ भी हैं, जिनमें छोटे targets को ठीक-ठीक click/tap करना मुश्किल होता है, और neurodiversity से जुड़ी समस्याएँ भी हैं, जहाँ screen पर एक साथ बहुत ज़्यादा text या elements होना ही disorienting हो सकता है (जैसे epilepsy)
    बहुत बुद्धिमान लोग भी well-designed और accessible UI से मदद पा सकते हैं। यह मान लेना सही नहीं कि जिन्हें ऐसी मदद चाहिए वे कम बुद्धिमान हैं

• यह मेरे vision और visual comprehension के बारे में कुछ साबित करता है, इसलिए दिलचस्प है
  "Grid" view पूरी तरह ठीक है। "Table" view इस्तेमाल करने लायक नहीं है
  इस तरह लंबी line के पार scan करते समय मैं अक्सर खो देता हूँ कि किस line पर हूँ। मुझे एहसास हुआ कि ऐसा शायद gaze move करते समय right eye dominance के हल्के shifting की वजह से होता है। मेरी दोनों आँखों की alignment subtly mismatch है, जिसके लिए prism correction ले रहा हूँ, और prism correction में हाल की change से यह स्थिति बेहतर हुई है
  इस presentation में low/high columns की marker positions accidental row shifts (जो हमेशा ऊपर की ओर होते हैं) को और बदतर बना देती हैं
  मेरे लिए बेहतर होगा कि line graph cell का background हो या cell के नीचे हो। rows में subtle striping भी चाहिए
  एक तेज़ और proficient reader के तौर पर, जिसे कोई visual या cognitive disability नहीं है, सबक यह है कि ऐसे tables में यह मानकर न चलें कि चौड़ी line के पार information रखना ठीक है। users को horizontal scan करते समय row को पकड़कर रखने के cues देने चाहिए। पतली separator lines काफी नहीं हैं, और mouse-over background change touch devices पर काम नहीं आता
  अभी की स्थिति में, जब मैं ऐसा कुछ देखता हूँ तो window को maximize से हटाकर उसकी height घटा देता हूँ और scroll करते हुए window के bottom या किसी दूसरी window की title bar को लगातार “edge” की तरह इस्तेमाल करके data देखता हूँ। iPad इस्तेमाल करते समय मैंने कभी-कभी कागज़ या card भी इस्तेमाल किया है

  • table में आने वाली मुश्किलें author के design, खासकर color choices से कहीं ज़्यादा जुड़ी लगती हैं
    पहला, जैसा बताया गया, mouse hover या highlighted row और बाकी rows के बीच contrast बहुत कम है। मेरी eyesight ठीक है, फिर भी देखना मुश्किल है
    दूसरा, readability के लिए table rows या columns में दो या अधिक high-contrast colors से striping होनी चाहिए। उदाहरण के लिए सफेद, काला, सफेद, काला। यह table शुरू से आखिर तक पूरा काला है
    तीसरा, table borders का contrast इतना कम है कि वे लगभग दिखते ही नहीं। single row/column color के साथ मिलकर यह readability को और खराब करता है
    संक्षेप में, table खुद ठीक है, colors बेकार हैं

• यहाँ UI elements बहुत शानदार दिखते हैं, लेकिन यह भी जानना चाहूँगा कि experiment क्या था और कौन-से conclusions निकले
  सिर्फ़ interactive elements की संख्या के हिसाब से देखें, तो मेरे अनुभव में (Svelte 4) interaction से पहले rendering अक्सर समस्या पैदा करती है। यानी element interactive है या नहीं, इससे फर्क नहीं पड़ता—उतनी ही संख्या के elements पर performance problem आती है। जैसे इस page के कुछ हिस्सों में implement किया गया है, solution canvas पर जाना है

  • Svelte को renderless components के साथ इस्तेमाल किया जा सकता है। https://imfeld.dev/writing/svelte_domless_components
    Svelte canvas पर भी draw कर सकता है। Threlte भी है: https://threlte.xyz/
    Svelte की internal performance के संबंध में, मुझे नहीं लगता कि unnecessary re-rendering रोकने के लिए React जितनी ज़रूरत Jotai जैसी चीज़ की पड़ती है

  • you run into performance problems at the same number of elements regardless of whether they're interactive. As you implemented for the some of these pages, the solution is to go to a canvas.
    हैरानी की बात है। मुझे लगा था Svelte की खूबी यह है कि compile stage और virtual DOM न होने की वजह से यह बहुत precise और efficient DOM updates करता है। उस paradigm में भी साधारण बड़े tables अब भी समस्या हैं? यहाँ के elements में से, उदाहरण के लिए, कौन-सा DOM में render किया जा सकता था लेकिन purely performance की वजह से canvas की ज़रूरत पड़ी?

• Svelte को Phaser जैसे शानदार WebGL framework के साथ मिलाने पर बहुत तेज़ graphics rendering संभव है: https://phaser.io/news/2024/03/official-phaser-3-and-svelte-...

• वह helix chart सचमुच आकर्षक है। असल में इस्तेमाल किया जा सकेगा या नहीं, यह पक्का नहीं, लेकिन देखने में बेहद शानदार है
  अगर यह एक प्रयोग था, तो निष्कर्ष क्या था?

  • Firefox में यह काम करता हुआ नहीं लग रहा—क्या सिर्फ़ मुझे ऐसा लग रहा है?