DC.js - Peta Panas
Heat Map adalah representasi grafis dari data dalam bentuk peta, di mana nilai data direpresentasikan sebagai warna. Bab ini menjelaskan tentang peta panas secara detail.
Sebelum melanjutkan menggambar peta panas, kita harus memahami dc.heatMapkelas dan metodenya. Dc.heatMap menggunakan mixin untuk mendapatkan fungsionalitas dasar menggambar bagan, yang tercantum di bawah ini -
- dc.colorMixin
- dc.marginMixin
- dc.baseMixin
Diagram kelas lengkap dari dc.heatMap adalah sebagai berikut -
Dc.heatMap mendapatkan semua metode dari mixin yang ditentukan di atas. Ini memiliki metode sendiri untuk menggambar peta panas, yang dijelaskan di bawah ini -
boxOnClick ([handler])
Metode ini digunakan untuk mendapatkan atau menyetel penangan, saat satu sel diklik di peta panas.
cols ([cols])
Metode ini digunakan untuk mendapatkan atau mengatur kunci untuk membuat kolom peta panas.
colsLabel ([label])
Metode ini digunakan untuk mendapatkan atau mengatur label kolom, yang direpresentasikan sebagai nama kolom. Demikian pula, kita bisa melakukan label baris juga.
baris ([baris])
Metode ini digunakan untuk mendapatkan atau menyetel nilai yang digunakan untuk membuat baris peta panas.
xAxisOnClick ([handler])
Metode ini digunakan untuk mendapatkan atau menyetel penangan, ketika tanda centang kolom diklik di sumbu x.
xBorderRadius ([perbatasan])
Metode ini digunakan untuk mengatur radius perbatasan X. Jika nilainya diatur ke 0, maka Anda akan mendapatkan persegi panjang penuh.
Gambarlah Peta Panas
Mari kita menggambar peta panas di DC. Untuk melakukan ini, kita perlu mengikuti langkah-langkah yang diberikan di bawah ini -
Langkah 1: Tentukan variabel
Mari kita definisikan variabel seperti yang ditunjukkan di bawah ini -
var chart = dc.heatMap('#heatmap');Di sini, fungsi heatMap dipetakan dengan peta panas id.
Langkah 2: Baca datanya
Baca data dari howell1.csv file seperti yang ditunjukkan di bawah ini -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Di sini, kami telah menggunakan file howell1.csv yang sama dan terlihat seperti yang ditunjukkan di bawah ini -
"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
......................
......................Langkah 3: Ambil catatan
Mari kita ambil catatan menggunakan pengkodean yang diberikan di bawah ini -
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;
}
});Di sini, kami telah memeriksa jenis kelamin dan telah mengatur kisaran tinggi dan lebar sumbu x dengan menggunakan rumus di atas.
Langkah 4: Atur dimensi
Anda dapat mengatur dimensi menggunakan pengkodean yang diberikan di bawah ini -
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});Setelah dimensi ditetapkan, kelompokkan jenis kelamin menggunakan kode yang diberikan di bawah ini -
var genderGroup = genderDimension.group().reduceCount();Langkah 5: Buat grafik
Sekarang, buat peta panas menggunakan pengkodean yang diberikan di bawah ini -
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();
});Sini,
- Kami telah menetapkan lebar bagan sebagai 20 × 45 + 80 dan tinggi sebagai 2 × 45 + 40.
- Kemudian kami telah menetapkan dimensi dan kelompok gender.
- Pengakses kunci dan nilai mengembalikan kunci dan nilai dari peta panas.
- Kita harus menggunakan fungsi colorAccessor () untuk mengembalikan warna.
- Terakhir, atur judul dan render bagan.
Langkah 6: Contoh kerja
Pengkodean lengkapnya adalah sebagai berikut. Buat halaman webheatmap.html dan tambahkan perubahan berikut ke dalamnya.
<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>Sekarang, minta browser dan kita akan melihat respons berikut.