DC.js - Isı Haritası
Bir Isı Haritası, veri değerlerinin renkler olarak temsil edildiği bir harita biçimindeki verilerin grafiksel bir temsilidir. Bu bölüm bir ısı haritasını ayrıntılı olarak açıklamaktadır.
Bir ısı haritası çizmeye geçmeden önce şunu anlamalıyız: dc.heatMapsınıf ve yöntemleri. Dc.heatMap, aşağıda listelenen bir grafik çizmenin temel işlevlerini elde etmek için karışımları kullanır -
- dc.colorMixin
- dc.marginMixin
- dc.baseMixin
Dc.heatMap'in tam sınıf diyagramı aşağıdaki gibidir -
Dc.heatMap, yukarıda belirtilen karışımların tüm yöntemlerini alır. Aşağıda açıklanan ısı haritasını çizmek için kendi yöntemleri vardır -
boxOnClick ([işleyici])
Bu yöntem, ısı haritasında tek bir hücreye tıklandığında işleyiciyi almak veya ayarlamak için kullanılır.
cols ([cols])
Bu yöntem, ısı haritasının sütunlarını oluşturmak için anahtarları almak veya ayarlamak için kullanılır.
colsLabel ([etiket])
Bu yöntem, sütun adı olarak temsil edilen sütun etiketini almak veya ayarlamak için kullanılır. Benzer şekilde, bir satır etiketi de yapabiliriz.
satırlar ([satırlar])
Bu yöntem, ısı haritasının satırlarını oluşturmak için kullanılan değerleri almak veya ayarlamak için kullanılır.
xAxisOnClick ([işleyici])
Bu yöntem, x ekseninde bir sütun onayına tıklandığında işleyiciyi almak veya ayarlamak için kullanılır.
xBorderRadius ([kenarlık])
Bu yöntem, X kenarlık yarıçapını ayarlamak için kullanılır. Değer 0 olarak ayarlanırsa, tam dikdörtgenler elde edersiniz.
Isı Haritası çizin
DC'de bir ısı haritası çizelim. Bunu yapmak için aşağıda verilen adımları izlememiz gerekiyor -
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.heatMap('#heatmap');Burada, heatMap işlevi id heatmap ile eşlenir.
2. Adım: Verileri okuyun
Verileri şuradan okuyun: howell1.csv dosya aşağıda gösterildiği gibi -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Burada, aynı howell1.csv dosyasını kullandık ve aşağıda gösterildiği gibi görünüyor -
"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
......................
......................3. Adım: Kayıtları alın
Aşağıda verilen kodlamayı kullanarak kayıtları getirelim -
people.forEach(function(x) {
x.age = Math.floor(x.age) + 1;
x.heightRange = Math.floor(x.height / 10) + 1;
x.weightRange = Math.floor(x.weight / 10) + 1;
if(x.male == 1) {
x.gender = 1;
} else {
x.gender = 2;
}
});Burada cinsiyeti kontrol ettik ve yukarıdaki formülü kullanarak x ekseninin yükseklik ve genişlik aralığını ayarladık.
4. Adım: Boyutu ayarlayın
Aşağıda verilen kodlamayı kullanarak boyutu ayarlayabilirsiniz -
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});Boyut atandıktan sonra, aşağıda verilen kodlamayı kullanarak cinsiyeti gruplandırın -
var genderGroup = genderDimension.group().reduceCount();5. Adım: Bir grafik oluşturun
Şimdi, aşağıda verilen kodlamayı kullanarak bir ısı haritası oluşturun -
chart
.width(20 * 45 + 80)
.height(2 * 45 + 40)
.dimension(ageDimension)
.group(ageGroup)
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.key[0]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
return "Height Range: " + ((d.key[1] - 1) * 10) + " - " + (d.key[1] * 10) + "cm\n" +
"Gender: " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
"Count: " + (d.value) + " count";
})
.calculateColorDomain()
chart.render();
});Buraya,
- Grafik genişliğini 20 × 45 + 80 ve yüksekliği 2 × 45 + 40 olarak belirledik.
- Sonra cinsiyet boyutunu ve grubunu belirledik.
- Anahtar ve değer erişimcisi, ısı haritalarından anahtarı ve değeri döndürür.
- Rengi döndürmek için colorAccessor () işlevini kullanmalıyız.
- Son olarak, başlığı ayarlayın ve grafiği oluşturun.
Adım 6: Çalışma örneği
Tam kodlama aşağıdaki gibidir. Bir web sayfası oluşturunheatmap.html ve aşağıdaki değişiklikleri ekleyin.
<html>
<head>
<title>DC heat map 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 = "heatmap"></div>
</div>
<script language = "javascript">
var chart = dc.heatMap('#heatmap');
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
x.age = Math.floor(x.age) + 1;
x.heightRange = Math.floor(x.height / 10) + 1;
x.weightRange = Math.floor(x.weight / 10) + 1;
if(x.male == 1) {
x.gender = 1;
} else {
x.gender = 2;
}
});
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});
var ageGroup = ageDimension.group().reduceCount();
chart
.width(20 * 45 + 80)
.height(2 * 45 + 40)
.dimension(ageDimension)
.group(ageGroup)
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.key[0]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
return "Height Range: " + ((d.key[1] - 1) * 10) + " - " +
(d.key[1] * 10) + "cm\n" +
"Gender: " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
"Count: " + (d.value) + " count";})
.calculateColorDomain()
chart.render();
});
</script>
</body>
</html>Şimdi tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.