DC.js - Lô phân tán
Biểu đồ phân tán là một loại biểu đồ toán học. Nó được biểu diễn bằng cách sử dụng tọa độ Descartes để hiển thị các giá trị cho hai biến thông thường cho một tập dữ liệu. Dữ liệu được hiển thị dưới dạng tập hợp các điểm và các điểm có thể được tô màu. Chương này giải thích chi tiết về biểu đồ phân tán.
Phương pháp biểu đồ phân tán
Trước khi chuyển sang vẽ biểu đồ phân tán, chúng ta nên hiểu dc.scatterPlotlớp và các phương thức của nó. Dc.scatterPlot sử dụng các mixin để có được chức năng cơ bản là vẽ biểu đồ. Mixin được sử dụng bởi dc.scatterPlot được đưa ra dưới đây:
- dc.coordinateGridMixin
Sơ đồ lớp hoàn chỉnh của dc.scatterPlot như sau:
Dc.scatterPlot 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ẽ biểu đồ phân tán, được giải thích như sau.
customSymbol ([biểu tượng])
Phương pháp này được sử dụng lấy hoặc thiết lập trình tạo biểu tượng.
voidSize ([size])
Phương thức này được sử dụng để đặt hoặc lấy bán kính cho các biểu tượng khi nhóm trống.
loại trừ Màu ([màu])
Phương pháp này được sử dụng để lấy hoặc đặt màu cho các ký hiệu bị loại trừ khỏi bộ lọc của biểu đồ.
loại trừOpacity ([độ mờ])
Phương pháp này được sử dụng để lấy hoặc đặt độ mờ cho các ký hiệu bị loại trừ khỏi bộ lọc của biểu đồ.
Loại trừSize ([size])
Nó được sử dụng để đặt hoặc lấy kích thước cho các ký hiệu bị loại trừ khỏi bộ lọc của biểu đồ.
highlightedSize ([size])
Nó được sử dụng để đặt hoặc lấy bán kính cho các biểu tượng được đánh dấu.
ký hiệu ([loại])
Nó được sử dụng để lấy hoặc đặt loại ký hiệu được sử dụng cho mỗi điểm.
Vẽ biểu đồ phân tán
Hãy để chúng tôi vẽ một biểu đồ phân tán trong DC. Trong ví dụ này, chúng ta hãy lấy một tập dữ liệu có tên làhowell1.csvtập tin. Tệp dữ liệu mẫu như sau:
"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
...............
...............Tệp mẫu trên gồm nhiều bản ghi. Chúng tôi có thể tải xuống tệp bằng cách nhấp vào liên kết sau và lưu tệp vào vị trí DC của chúng tôi.
howell1.csv
Bây giờ, chúng ta hãy làm theo các bước tiếp theo để vẽ biểu đồ Scatter trong DC.
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.scatterPlot('#scatter');Ở đây, hàm scatterplot () được ánh xạ với id scatter.
Bước 2: Đọc dữ liệu
Đọc dữ liệu từ tệp howell1.csv như hình dưới đây -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Nếu dữ liệu không có, thì nó sẽ trả về một lỗi. Sau đó, gán dữ liệu cho một bộ lọc chéo.
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) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
});Ở đây, chúng tôi đã kiểm tra giới tính.
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 hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});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 hwGroup = hwDimension.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(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);Đây,
- Chúng tôi đã chỉ định chiều rộng biểu đồ là 800 và chiều cao là 600.
- Đã áp dụng hàm d3.scale.linear () cho cả trục x và y.
- Đã bật brushOn giá trị là false.
- Sau đó, gán nhãn trục x làm chiều cao và nhãn trục y làm trọng lượng.
- Đặt kích thước biểu tượng là tám và giá trị đệm là 10.
- Cuối cùng, nhóm dữ liệu và hiển thị biểu đồ.
Bước 6: Ví dụ làm việc
Danh sách mã hoàn chỉnh như sau. Tạo một trang webscatter.html và thêm các thay đổi sau vào nó.
<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>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.