DC.js - Концепции

DC.js прост и удобен для большинства интерфейсных разработчиков. Он позволяет быстро строить базовые диаграммы, даже не зная D3.js. Раньше мы начинали использовать DC.js для создания визуализации; нам нужно познакомиться с веб-стандартами. Следующие ниже веб-стандарты широко используются в D3.js, который является основой DC.js для визуализации диаграмм.

Язык разметки гипертекста (HTML)
Объектная модель документа (DOM)
Каскадные таблицы стилей (CSS)

Давайте подробно разберемся с каждым из этих веб-стандартов.

Язык разметки гипертекста (HTML)

Как мы знаем, HTML используется для структурирования содержимого веб-страницы. Он хранится в текстовом файле с расширением «.html».

Типичный базовый пример HTML выглядит так, как показано ниже -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>
   
   <body>

   </body>
</html>

Объектная модель документа (DOM)

Когда HTML-страница загружается браузером, она преобразуется в иерархическую структуру. Каждый тег в HTML преобразуется в элемент / объект в DOM с иерархией родитель-потомок. Это делает наш HTML более логичным. После того, как DOM сформирован, становится проще манипулировать (добавлять / изменять / удалять) элементами на странице.

Давайте разберемся с DOM, используя следующий HTML-документ -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

Объектная модель документа вышеуказанного HTML-документа выглядит следующим образом:

Каскадные таблицы стилей (CSS)

В то время как HTML дает структуру веб-странице, стили CSS делают веб-страницу более приятной для просмотра. CSS - это язык таблиц стилей, используемый для описания представления документа, написанного в HTML или XML (включая диалекты XML, такие как SVG или XHTML). CSS описывает, как элементы должны отображаться на веб-странице.

JavaScript

JavaScript - это свободно типизированный язык сценариев на стороне клиента, который выполняется в браузере пользователя. JavaScript взаимодействует с элементами html (элементами DOM), чтобы сделать пользовательский веб-интерфейс интерактивным. JavaScript реализует стандарты ECMAScript, которые включают основные функции, основанные на спецификации ECMA-262, а также другие функции, которые не основаны на стандартах ECMAScript. Знание JavaScript является необходимым условием для DC.js.

Составные части

DC.js основан на двух отличных библиотеках JavaScript, которые:

Crossfilter
D3.js

Кроссфильтр

Crossfilter - это библиотека JavaScript для изучения больших многомерных наборов данных в браузере. Он используется для очень быстрой группировки, фильтрации и агрегирования десятков или сотен тысяч строк необработанных данных.

D3.js

D3.js - это сокращение от Data-Driven Documents. D3.js - это библиотека JavaScript для управления документами на основе данных. D3 - это динамическая интерактивная среда визуализации данных в Интернете, которая используется на большом количестве веб-сайтов. D3.js написанMike Bostock, созданный как преемник более раннего набора инструментов визуализации под названием Protovis. D3.js используется на сотнях тысяч веб-сайтов.