DC.js - Dağılım Grafiği

Dağılım grafiği, bir tür matematiksel diyagramdır. Bir veri kümesi için tipik olarak iki değişken için değerleri görüntülemek üzere Kartezyen koordinatlar kullanılarak temsil edilir. Veriler, bir nokta koleksiyonu olarak görüntülenir ve noktalar renkli olabilir. Bu bölüm bir dağılım grafiğini ayrıntılı olarak açıklamaktadır.

Dağılım Grafiği Yöntemleri

Dağılım grafiği çizmeye geçmeden önce şunu anlamalıyız: dc.scatterPlotsınıf ve yöntemleri. Dc.scatterPlot, bir grafik çizmenin temel işlevlerini elde etmek için mixins kullanır. Dc.scatterPlot tarafından kullanılan karışım aşağıda verilmiştir -

dc.coordinateGridMixin

Dc.scatterPlot'un tam sınıf diyagramı aşağıdaki gibidir -

Dc.scatterPlot, yukarıda belirtilen karışımların tüm yöntemlerini alır. Aşağıda açıklanan dağılım grafiğini çizmek için kendi yöntemleri vardır.

customSymbol ([sembol])

Bu yöntem, sembol üreticisini almak veya ayarlamak için kullanılır.

emptySize ([boyut])

Bu yöntem, grup boş olduğunda sembollerin yarıçapını ayarlamak veya almak için kullanılır.

excludedColor ([renk])

Bu yöntem, grafiğin filtresinden hariç tutulan sembollerin rengini almak veya ayarlamak için kullanılır.

excludedOpacity ([opacity])

Bu yöntem, grafiğin filtresinden hariç tutulan sembollerin opaklığını almak veya ayarlamak için kullanılır.

excludedSize ([size])

Grafik filtresinden hariç tutulan sembollerin boyutunu ayarlamak veya almak için kullanılır.

vurgulanmışSize ([size])

Vurgulanan sembollerin yarıçapını ayarlamak veya almak için kullanılır.

sembol ([tür])

Her nokta için kullanılan sembol türünü almak veya ayarlamak için kullanılır.

Dağılım Grafiği Çizin

DC'de bir dağılım grafiği çizelim. Bu örnekte, olarak adlandırılmış bir veri kümesini alalım.howell1.csvdosya. Örnek veri dosyası aşağıdaki gibidir -

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

...............
...............

Yukarıdaki örnek dosya birçok kayıt içermektedir. Dosyayı aşağıdaki bağlantıya tıklayarak ve DC lokasyonumuza kaydederek indirebiliriz.

howell1.csv

Şimdi, DC'de bir Dağılım grafiği çizmek için sonraki adımları takip edelim.

Adım 1: Bir değişken tanımlayın

Aşağıda gösterildiği gibi bir değişken tanımlayalım -

var chart = dc.scatterPlot('#scatter');

Burada scatterplot () işlevi, id scatter ile eşlenir.

2. Adım: Verileri okuyun

Howell1.csv dosyasındaki verileri aşağıda gösterildiği gibi okuyun -

d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

Veriler mevcut değilse, bir hata verir. Daha sonra verileri bir çapraz filtreye atayın.

3. Adım: Kayıtları alın

Aşağıda verilen kodlamayı kullanarak kayıtları getirelim -

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
});

Burada cinsiyeti kontrol ettik.

4. Adım: Boyutu ayarlayın

Aşağıda verilen kodlamayı kullanarak boyutu ayarlayabilirsiniz -

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [Math.floor(data.height), Math.floor(data.weight)];
});

Boyut atandıktan sonra, aşağıda verilen kodlamayı kullanarak cinsiyeti gruplandırın -

var hwGroup = hwDimension.group().reduceCount();

5. Adım: Bir grafik oluşturun

Şimdi, aşağıda verilen kodlamayı kullanarak bir ısı haritası oluşturun -

chart
   .width(800)
   .height(600)
   .x(d3.scale.linear().domain([0,180]))
   .y(d3.scale.linear().domain([0,100]))
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Weight")
   .symbolSize(8)
   .clipPadding(10)
   .dimension(hwDimension)
   .group(hwGroup);

Buraya,

Grafik genişliğini 800 ve yüksekliği 600 olarak belirledik.
Hem x hem de y ekseni için d3.scale.linear () işlevi uygulandı.
BrushOn değeri false olarak etkinleştirildi.
Ardından, x ekseni etiketi yükseklik olarak ve y ekseni etiketi ağırlık olarak atandı.
Sembol boyutunu sekiz ve dolgu değerini 10 olarak ayarlayın.
Son olarak, verileri gruplayın ve grafiği oluşturun.

Adım 6: Çalışma örneği

Tam kod listesi aşağıdaki gibidir. Bir web sayfası oluşturunscatter.html ve aşağıdaki değişiklikleri ekleyin.

<html>
   <head>
   <title>Scatter plot Sample</title>
   <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
   <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

   <script src = "js/d3.js"></script>
   <script src = "js/crossfilter.js"></script>
   <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "scatter"></div>
      </div>

      <script language = "javascript">
         var chart = dc.scatterPlot('#scatter');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               if(x.male == 1) {
                  x.gender = "Male";
               } else {
                  x.gender = "Female";
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [Math.floor(data.height), Math.floor(data.weight)];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .x(d3.scale.linear().domain([0,180]))
               .y(d3.scale.linear().domain([0,100]))
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Weight")
               .symbolSize(8)
               .clipPadding(10)
               .dimension(hwDimension)
               .group(hwGroup);

            chart.render();
         });
      </script>
   </body>
</html>

Şimdi tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.