DC.js - Kavramlar

DC.js, çoğu ön uç geliştirici için basit ve kolaydır. Herhangi bir D3.js bilgisi olmadan bile hızlı bir şekilde temel çizelgeleri oluşturmayı sağlar. Daha önce görselleştirme oluşturmak için DC.js kullanmaya başladık; web standartlarına aşina olmamız gerekiyor. Aşağıdaki web standartları, grafikleri oluşturmak için DC.js'nin temeli olan D3.js'de yoğun bir şekilde kullanılmaktadır.

Köprü Metni Biçimlendirme Dili (HTML)
Belge Nesne Modeli (DOM)
Basamaklı Stil Sayfaları (CSS)

Bu web standartlarının her birini ayrıntılı olarak anlayalım.

Köprü Metni Biçimlendirme Dili (HTML)

Bildiğimiz gibi, web sayfasının içeriğini yapılandırmak için HTML kullanılıyor. ".Html" uzantılı bir metin dosyasında saklanır.

Tipik bir temel HTML örneği aşağıda gösterildiği gibidir -

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

   </body>
</html>

Belge Nesne Modeli (DOM)

Bir HTML sayfası bir tarayıcı tarafından yüklendiğinde, hiyerarşik bir yapıya dönüştürülür. HTML'deki her etiket, bir üst-alt hiyerarşiyle DOM'da bir öğeye / nesneye dönüştürülür. HTML'mizi daha mantıksal olarak yapılandırılmış hale getirir. DOM oluşturulduktan sonra, sayfadaki öğeleri işlemek (eklemek / değiştirmek / kaldırmak) daha kolay hale gelir.

Aşağıdaki HTML belgesini kullanarak DOM'u anlayalım -

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

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

Yukarıdaki HTML belgesinin belge nesne modeli aşağıdaki gibidir -

Basamaklı Stil Sayfaları (CSS)

HTML web sayfasına bir yapı kazandırırken, CSS stilleri web sayfasına bakmayı daha keyifli hale getirir. CSS, HTML veya XML'de (SVG veya XHTML gibi XML lehçeleri dahil) yazılmış bir belgenin sunumunu açıklamak için kullanılan bir stil sayfası dilidir. CSS, bir web sayfasında öğelerin nasıl oluşturulması gerektiğini açıklar.

JavaScript

JavaScript, kullanıcının tarayıcısında çalıştırılan, gevşek bir şekilde yazılmış bir istemci tarafı kodlama dilidir. JavaScript, web kullanıcı arayüzünü etkileşimli hale getirmek için html öğeleriyle (DOM öğeleri) etkileşime girer. JavaScript, ECMA-262 spesifikasyonuna dayalı temel özellikleri ve ECMAScript standartlarına dayanmayan diğer özellikleri içeren ECMAScript standartlarını uygular. JavaScript bilgisi DC.js için bir ön koşuldur.

Bileşenler

DC.js, iki mükemmel JavaScript kitaplığına dayanmaktadır:

Crossfilter
D3.js

Çapraz filtre

Crossfilter, tarayıcıda çok değişkenli büyük veri kümelerini keşfetmek için bir JavaScript kitaplığıdır. Onlarca veya yüzbinlerce satırlık ham veriyi çok hızlı bir şekilde Gruplamak, Filtrelemek ve Birleştirmek için kullanılır.

D3.js

D3.js, Veriye Dayalı Belgeler anlamına gelir. D3.js, belgeleri verilere dayalı olarak değiştirmek için bir JavaScript kitaplığıdır. D3, Dinamik, Etkileşimli, Çevrimiçi Veri Görselleştirme Çerçevesidir ve çok sayıda web sitesinde kullanılır. D3.js tarafından yazılmıştırMike Bostock, adlı önceki bir görselleştirme araç setinin halefi olarak oluşturuldu Protovis. D3.js yüz binlerce web sitesinde kullanılmaktadır.