DC.js - Bản đồ nhiệt
Bản đồ nhiệt là một biểu diễn đồ họa của dữ liệu dưới dạng bản đồ, trong đó các giá trị dữ liệu được biểu thị dưới dạng màu sắc. Chương này giải thích chi tiết về bản đồ nhiệt.
Trước khi chuyển sang vẽ bản đồ nhiệt, chúng ta nên hiểu dc.heatMaplớp và các phương thức của nó. Bản đồ dc.heatMap sử dụng các mixin để có được chức năng cơ bản là vẽ biểu đồ, được liệt kê bên dưới:
- dc.colorMixin
- dc.marginMixin
- dc.baseMixin
Sơ đồ lớp hoàn chỉnh của dc.heatMap như sau:
Dc.heatMap nhận tất cả các phương thức của các mixin được chỉ định ở trên. Nó có các phương pháp riêng để vẽ bản đồ nhiệt, được giải thích bên dưới:
boxOnClick ([trình xử lý])
Phương thức này được sử dụng để lấy hoặc thiết lập trình xử lý, khi một ô riêng lẻ được nhấp vào trong bản đồ nhiệt.
cols ([cols])
Phương pháp này được sử dụng lấy hoặc thiết lập các phím để tạo các cột của bản đồ nhiệt.
colsLabel ([nhãn])
Phương thức này được sử dụng để lấy hoặc đặt nhãn cột, được biểu diễn dưới dạng tên cột. Tương tự, chúng ta cũng có thể thực hiện một nhãn hàng.
hàng ([hàng])
Phương thức này được sử dụng để lấy hoặc đặt các giá trị được sử dụng để tạo các hàng của bản đồ nhiệt.
xAxisOnClick ([trình xử lý])
Phương pháp này được sử dụng để lấy hoặc thiết lập trình xử lý, khi một dấu chọn cột được nhấp vào trục x.
xBorderRadius ([border])
Phương pháp này được sử dụng để đặt bán kính đường viền X. Nếu giá trị được đặt thành 0, thì bạn sẽ nhận được các hình chữ nhật đầy đủ.
Vẽ bản đồ nhiệt
Hãy để chúng tôi vẽ một bản đồ nhiệt trong DC. Để thực hiện việc này, chúng ta cần làm theo các bước dưới đây:
Bước 1: Xác định một biến
Hãy để chúng tôi xác định một biến như hình dưới đây:
var chart = dc.heatMap('#heatmap');Tại đây, hàm HeatMap được ánh xạ với bản đồ nhiệt id.
Bước 2: Đọc dữ liệu
Đọc dữ liệu từ howell1.csv tệp như hình dưới đây -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Ở đây, chúng tôi đã sử dụng cùng một tệp howell1.csv và nó trông như hình dưới đây:
"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
......................
......................Bước 3: Tìm nạp hồ sơ
Hãy để chúng tôi tìm nạp các bản ghi bằng cách sử dụng mã được cung cấp bên dưới -
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;
}
});Ở đây, chúng tôi đã kiểm tra giới tính và đã thiết lập phạm vi chiều cao và chiều rộng của trục x bằng cách sử dụng công thức trên.
Bước 4: Đặt thứ nguyên
Bạn có thể đặt thứ nguyên bằng cách sử dụng mã dưới đây -
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});Sau khi thứ nguyên đã được chỉ định, hãy nhóm giới tính bằng cách sử dụng mã được cung cấp bên dưới -
var genderGroup = genderDimension.group().reduceCount();Bước 5: Tạo biểu đồ
Bây giờ, tạo một bản đồ nhiệt bằng cách sử dụng mã dưới đây:
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();
});Đây,
- Chúng tôi đã chỉ định chiều rộng biểu đồ là 20 × 45 + 80 và chiều cao là 2 × 45 + 40.
- Sau đó, chúng tôi đã chỉ định thứ nguyên và nhóm giới tính.
- Trình truy cập khóa và giá trị trả về khóa và giá trị từ bản đồ nhiệt.
- Chúng ta phải sử dụng hàm colorAccessor () để trả về màu sắc.
- Cuối cùng, đặt tiêu đề và hiển thị biểu đồ.
Bước 6: Ví dụ làm việc
Mã hóa hoàn chỉnh như sau. Tạo một trang webheatmap.html và thêm các thay đổi sau vào nó.
<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>Bây giờ, hãy yêu cầu trình duyệt và chúng tôi sẽ thấy phản hồi sau.