Jako vývojář opravdu miluji data, a to také uspořádaným způsobem.
Někdy mohou být data takový nepořádek, že se stávají spíše bolestí hlavy než zdrojem, s daty můžeme vyřešit tolik problémů v našem každodenním životě.
Zde nám může pomoci D3.js
D3.js je JavaScriptová knihovna pro manipulaci s dokumenty na základě dat. D3 vám pomůže oživit data pomocí HTML, SVG a CSS. Důraz D3 na webové standardy vám dává plné možnosti moderních prohlížečů, aniž byste se museli vázat na proprietární rámec, který kombinuje výkonné vizualizační komponenty a přístup k manipulaci s DOM založený na datech.
D3 je zkratka pro Data-Driven Documents
Úplná forma vysvětluje sama sebe, je to knihovna, která nám pomáhá při vytváření grafů, tabulek, projekcí z pouhé sady dat.
Instalace
<script src="https://d3js.org/d3.v7.min.js"></script>
Nyní se pustíme do několika příkladů kódování:
d3.selectAll(); //this is used to select all the elements given inside the parenthesis
d3.select(); // this is used to select just a particular element
//inside the parenthesis
d3.select('h1')
.style('color', 'red') // this takes the h1 tag from the html and converts it into red color;
.text('hi there'); // this changes the text in the html to the given string
d3.select('body').append('p').text('YOLO'); // this appends the text to the p tag in the body
d3.select('body').append('p').text('YOLO');
d3.select('body').append('p').text('YOLO');
d3.select('body').append('p').text('YOLO');
d3.selectAll('p').style('color', 'blue'); // this snippet is used to select all the p tags and change their color to blue
Toto jsou základní způsoby, jak můžeme manipulovat s daty uvnitř JS pomocí knihovny D3.js
Chcete-li získat hlubší znalosti o tomto tématu, podívejte se na toto video z FreeCodeCamp.org na jejich kanálu YouTube
Sekce meme:
