ഡി3.ജെഎസ്
വെബ് ബ്രൗസറുകളിൽ ചലനാത്മകവും സംവേദനാത്മകവുമായ ഡാറ്റ വിഷ്വലൈസേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയാണ് ഡി3.ജെഎസ്(D3 എന്നും അറിയപ്പെടുന്നു). ഇത് വ്യാപകമായി നടപ്പിലാക്കിയ സ്കേലബിൾ വെക്റ്റർ ഗ്രാഫിക്സ് (എസ്വിജി), എച്ച്.ടി.എം.എൽ. 5(HTML5), കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ (സിഎസ്എസ്) മാനദണ്ഡങ്ങൾ ഉപയോഗപ്പെടുത്തുന്നു. മുമ്പത്തെ പ്രോട്ടോവിസ് ചട്ടക്കൂടിന്റെ പിൻഗാമിയാണിത്.[2]മറ്റ് പല ലൈബ്രറികളിൽ നിന്നും വ്യത്യസ്തമായി, അന്തിമ ദൃശ്യ ഫലത്തിൽ ഡി3.ജെഎസ് മികച്ച നിയന്ത്രണം അനുവദിക്കുന്നു.[3]ഇതിന്റെ വികസനം 2011 ൽ ശ്രദ്ധിക്കപ്പെട്ടു,[4] പതിപ്പ് 2.0.0 2011 ഓഗസ്റ്റിൽ പുറത്തിറങ്ങി.[5]
| വികസിപ്പിച്ചത് | Mike Bostock, Jason Davies, Jeffrey Heer, Vadim Ogievetsky, and community |
|---|---|
| ആദ്യപതിപ്പ് | 18 ഫെബ്രുവരി 2011 |
| Stable release | 5.9.7
/ 28 ജൂൺ 2019[1] |
| റെപോസിറ്ററി | |
| ഭാഷ | JavaScript |
| തരം | Data visualization, JavaScript library |
| അനുമതിപത്രം | BSD |
| വെബ്‌സൈറ്റ് | d3js |
ലക്ഷക്കണക്കിന് വെബ്‌സൈറ്റുകളിൽ ഡി3.ജെഎസ് ഉപയോഗിക്കുന്നു. [6]ഓൺലൈൻ വാർത്താ വെബ്‌സൈറ്റുകൾക്കായി സംവേദനാത്മക ഗ്രാഫിക്സ് സൃഷ്ടിക്കൽ, ഡാറ്റ കാണുന്നതിനുള്ള വിവര ഡാഷ്‌ബോർഡുകൾ, ജി‌ഐ‌എസ് മാപ്പ് നിർമ്മാണ ഡാറ്റയിൽ നിന്ന് മാപ്പുകൾ നിർമ്മിക്കൽ എന്നിവ ചില ജനപ്രിയ ഉപയോഗങ്ങളിൽ ഉൾപ്പെടുന്നു. കൂടാതെ, എസ്‌വിജിയുടെ എക്‌സ്‌പോർട്ടുചെയ്യാവുന്ന സ്വഭാവം ഡി3യിൽ സൃഷ്ടിച്ച ഗ്രാഫിക്സ് അച്ചടി പ്രസിദ്ധീകരണങ്ങളിൽ ഉപയോഗിക്കാൻ പ്രാപ്‌തമാക്കുന്നു.
സന്ദർഭം തിരുത്തുക
വെബ് ബ്രൗസറുകളിലേക്ക് ഡാറ്റ വിഷ്വലൈസേഷൻ കൊണ്ടുവരുന്നതിന് മുമ്പുള്ള വിവിധ ശ്രമങ്ങൾ നടന്നിട്ടുണ്ട്. ഏറ്റവും ശ്രദ്ധേയമായ ഉദാഹരണങ്ങൾ പ്രിഫ്യൂസ്, ഫ്ലെയർ, പ്രോട്ടോവിസ് ടൂൾകിറ്റുകൾ എന്നിവയായിരുന്നു, അവയെല്ലാം ഡി3.ജെഎസിന്റെ നേരിട്ടുള്ള മുൻഗാമികളായി കണക്കാക്കാം.
ജാവയുടെ ഉപയോഗം ആവശ്യമുള്ള 2005 ൽ സൃഷ്ടിച്ച ഒരു വിഷ്വലൈസേഷൻ ടൂൾകിറ്റാണ് പ്രിഫ്യൂസ്, കൂടാതെ ജാവ പ്ലഗ്-ഇൻ ഉപയോഗിച്ച് ബ്രൗസറുകളിൽ ദൃശ്യവൽക്കരണങ്ങൾ റെൻഡർ ചെയ്‌തു. ആക്ഷൻ സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച 2007 മുതൽ സമാനമായ ടൂൾകിറ്റായിരുന്നു ഫ്ലെയർ, റെൻഡറിംഗിനായി ഒരു ഫ്ലാഷ് പ്ലഗ്-ഇൻ ആവശ്യമാണ്.
2009 ൽ, പ്രിഫ്യൂസും ഫ്ലെയറും വികസിപ്പിക്കുകയും ഉപയോഗിക്കുകയും ചെയ്തതിന്റെ അനുഭവത്തെ അടിസ്ഥാനമാക്കി, സ്റ്റാൻഫോർഡ് സർവകലാശാലയുടെ സ്റ്റാൻഫോർഡ് വിഷ്വലൈസേഷൻ ഗ്രൂപ്പിലെ ജെഫ് ഹീർ, മൈക്ക് ബോസ്റ്റോക്ക്, വാഡിം ഒഗിവെറ്റ്‌സ്‌കി എന്നിവർ ഡാറ്റയിൽ നിന്ന് എസ്വിജി ഗ്രാഫിക്സ് സൃഷ്ടിക്കുന്നതിനായി ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറി പ്രോട്ടോവിസ് സൃഷ്ടിച്ചു. ഡാറ്റാ വിഷ്വലൈസേഷൻ പ്രാക്ടീഷണർമാർക്കും അക്കാദമിക് വിദഗ്ദ്ധർക്കും ലൈബ്രറി അറിയാമായിരുന്നു.[7]
2011 ൽ, ഡി3.ജെഎസ് എന്ന പുതിയ പ്രോജക്റ്റിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നതിനായി പ്രോട്ടോവിസിന്റെ വികസനം നിർത്തി. പ്രോട്ടോവിസുമായുള്ള അനുഭവങ്ങളെ അറിയിച്ച ബോസ്റ്റോക്ക്, ഹീർ, ഓഗിവെറ്റ്‌സ്‌കി എന്നിവരോടൊപ്പം ഡി3.ജെഎസ് വികസിപ്പിച്ചെടുത്തു, അതേ സമയം തന്നെ വെബ് സ്റ്റാൻഡേർഡുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുകയും മെച്ചപ്പെട്ട പ്രകടനം നൽകുകയും ചെയ്യുന്നു.[8]
സാങ്കേതിക തത്വങ്ങൾ തിരുത്തുക
ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിനും എസ്വിജി ഒബ്‌ജക്റ്റുകൾ സൃഷ്ടിക്കുന്നതിനും സ്റ്റൈൽ ചെയ്യുന്നതിനും അല്ലെങ്കിൽ ട്രാൻസിഷൻസ് ചെയ്യുന്നതിനും, ഡൈനാമിക് ഇഫക്റ്റുകൾ അല്ലെങ്കിൽ ടൂൾ‌ടിപ്പുകൾ ചേർ‌ക്കുന്നതിനും ഡി3.ജെഎസ് ലൈബ്രറി മുൻ‌കൂട്ടി നിർമ്മിച്ച ഫംഗ്ഷനുകൾ ഉപയോഗിക്കുന്നു. സിഎസ്എസ് ഉപയോഗിച്ചും ഈ ഒബ്‌ജക്റ്റുകൾ സ്റ്റൈൽ ചെയ്യാം. ടെക്സ്റ്റ് / ഗ്രാഫിക് ചാർട്ടുകളും ഡയഗ്രാമുകളും സൃഷ്ടിക്കുന്നതിന് ഡി3.ജെഎസ് ഫംഗ്ഷനുകൾ ഉപയോഗിച്ച് വലിയ ഡാറ്റാസെറ്റുകൾ എസ്വിജി ഒബ്‌ജക്റ്റുകളുമായി ബന്ധിപ്പിക്കാൻ കഴിയും. ജെസൺ പോലുള്ള ഡാറ്റ വിവിധ ഫോർമാറ്റുകളിൽ ആകാം, കോമയാൽ വേർതിരിച്ച മൂല്യങ്ങൾ (CSV) അല്ലെങ്കിൽ ജിയോജെസൺ(geoJSON) പോലുള്ള വിവിധ ഫോർമാറ്റുകളിൽ ആകാം, പക്ഷേ ആവശ്യമെങ്കിൽ മറ്റ് ഡാറ്റാ ഫോർമാറ്റുകൾ വായിക്കാൻ ജാവസ്ക്രിപ്റ്റ് ഫംഗ്ഷനുകൾ എഴുതാം.
തിരഞ്ഞെടുക്കലുകൾ തിരുത്തുക
തന്നിരിക്കുന്ന ഒരു ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡൽ (DOM) നോഡുകൾ തിരഞ്ഞെടുക്കുന്നതിന് പ്രോഗ്രാമറെ ആദ്യം ഒരു സിഎസ്എസ് സ്റ്റൈൽ സെലക്ടർ ഉപയോഗിക്കാൻ പ്രാപ്തമാക്കുക എന്നതാണ് ഡി3.ജെഎസ് രൂപകൽപ്പനയുടെ കേന്ദ്ര തത്വം, തുടർന്ന് ജെക്വറിക്ക് സമാനമായ രീതിയിൽ അവ കൈകാര്യം ചെയ്യാൻ ഓപ്പറേറ്റഴ്സ് ഉപയോഗിക്കുന്നു.[9] ഉദാഹരണത്തിന്, ഒരാൾക്ക് എല്ലാ എച്ച്ടിഎംഎൽ(HTML)<p>...</p>ഘടകങ്ങളും തിരഞ്ഞെടുത്ത് അവയുടെ വാചക നിറം മാറ്റാം, ഉദാ. ലാവെൻഡറിലേക്ക്:
d3.selectAll("p") // select all <p> elements
.style("color", "lavender") // set style "color" to value "lavender"
.attr("class", "squares") // set attribute "class" to value "squares"
.attr("x", 50); // set attribute "x" (horizontal position) to value 50px
തിരഞ്ഞെടുക്കൽ ഒരു എച്ച്ടിഎംഎൽ ടാഗ്, ക്ലാസ്, ഐഡന്റിഫയർ, ആട്രിബ്യൂട്ട് അല്ലെങ്കിൽ ഹയറാഹിയിലെ(hierarchy)സ്ഥാനം എന്നിവയെ അടിസ്ഥാനമാക്കിയുള്ളതാകാം. എലമെന്റ്സ് തിരഞ്ഞെടുത്തുകഴിഞ്ഞാൽ, ഒരാൾക്ക് അവയിൽ ഓപ്പറേഷൻസ് നടത്താൻ കഴിയും. ആട്രിബ്യൂട്ടുകൾ, ഡിസ്പ്ലേ ടെക്സ്റ്റുകൾ, ശൈലികൾ (മുകളിൽ പറഞ്ഞിരിക്കുന്നതുപോലെ) നേടുന്നതും സജ്ജീകരിക്കുന്നതും ഇതിൽ ഉൾപ്പെടുന്നു. ഘടകങ്ങൾ കൂട്ടിച്ചേർക്കുകയും നീക്കം ചെയ്യുകയും ചെയ്യാം. എച്ച്ടിഎംഎൽ എലമെന്റ്സ് പരിഷ്കരിക്കുന്നതിനും സൃഷ്ടിക്കുന്നതിനും നീക്കം ചെയ്യുന്നതിനുമുള്ള ഈ പ്രക്രിയ, ഡി3.ജെഎസിന്റെ അടിസ്ഥാന ആശയമായ ഡാറ്റയെ ആശ്രയിച്ചിരിക്കും.
അവലംബം തിരുത്തുക
- ↑ "d3 Releases". Github.com.
- ↑ "For Protovis Users", Mbostock.github.com, archived from the original on 2012-08-06, retrieved August 18, 2012
- ↑ Viau, Christophe (June 26, 2012), "What's behind our Business Infographics Designer? D3.js of course", Datameer's blog, retrieved August 18, 2012
- ↑ Myatt, Glenn J.; Johnson, Wayne P. (September 2011), "5.10 Further reading", Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations, Hoboken, New Jersey: John Wiley & Sons, p. A–2, ISBN 978-0-470-53649-0, retrieved January 23, 2013
- ↑ "Release Notes", D3.js, retrieved August 22, 2012
- ↑ "ആർക്കൈവ് പകർപ്പ്". Archived from the original on 2018-09-11. Retrieved 2019-10-19.
- ↑ Academic example: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), "ReVision: Automated Classification, Analysisand Redesign of Chart Images", ACM User Interface Software & Technology, retrieved January 23, 2013
- ↑ Bostock, Ogievetsky & Heer 2011
- ↑ Bostock, Ogievetsky & Heer 2011, chap. 3