DC.js - แผนภูมิฟอง
แผนภูมิฟองใช้เพื่อแสดงข้อมูลสามมิติ เป็นรูปแบบของแผนภูมิกระจายซึ่งจุดข้อมูลจะถูกแทนที่ด้วยฟองอากาศ ขนาดฟองจะแสดงตามมิติข้อมูล ใช้แกนแนวนอนและแนวตั้งเป็นแกนค่า บทนี้จะอธิบายเกี่ยวกับแผนภูมิฟองโดยละเอียด
วิธีการแผนภูมิฟอง
ก่อนที่จะวาดแผนภูมิฟองเราควรทำความเข้าใจกับไฟล์ dc.bubbleChartคลาสและวิธีการ dc.bubbleChart ใช้ mixins เพื่อรับฟังก์ชั่นพื้นฐานของการวาดแผนภูมิซึ่งแสดงไว้ด้านล่าง -
- dc.bubbleMixin
- dc.coordinateGridMixin
แผนภาพคลาสที่สมบูรณ์ของ dc.bubbleChart มีดังนี้ -
dc.bubbleChart รับวิธีการทั้งหมดของ mixins ที่ระบุข้างต้น นอกจากนี้ยังมีวิธีการวาดแผนภูมิฟองซึ่งอธิบายไว้ด้านล่าง -
elasticRadius ([รัศมี])
วิธีนี้ใช้เพื่อเปิดใช้รัศมีฟอง หากเราปิดการใช้งานนี้รัศมีฟองจะถูกปรับขนาดโดยอัตโนมัติ
sortBubbleSize ([sortBubbleSize])
วิธีนี้ใช้เพื่อเปิดใช้งานคุณลักษณะการเรียงลำดับในฟองอากาศ ฟองอากาศขนาดเล็กจะมาก่อนแล้วจึงค่อยๆเพิ่มขึ้น
วาดแผนภูมิฟอง
ให้เราวาดแผนภูมิฟองใน DC ในการดำเนินการนี้เราต้องทำตามขั้นตอนด้านล่าง -
ขั้นตอนที่ 1: กำหนดตัวแปร
ให้เรากำหนดตัวแปรตามที่แสดงด้านล่าง -
var chart = dc.bubbleChart('#bubble');
ที่นี่ฟังก์ชัน bubbleChart ถูกจับคู่กับฟองรหัส
ขั้นตอนที่ 2: อ่านข้อมูล
อ่านข้อมูลจากไฟล์ howell1.csv ไฟล์.
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
หากไม่มีข้อมูลแสดงว่ามีข้อผิดพลาด ตอนนี้กำหนดข้อมูลให้กับ crossfilter ที่นี่เราได้ดาวน์โหลดไฟล์ howell1.csv แล้ว ไฟล์เดียวกันจะถูกใช้ที่นี่และจะมีลักษณะคล้ายกับบล็อกโค้ดต่อไปนี้
"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: ดึงข้อมูลบันทึก
ให้เราดึงข้อมูลโดยใช้การเข้ารหัสที่ระบุด้านล่าง -
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});
ที่นี่เราได้ตรวจสอบเพศและตั้งค่าความสูงและช่วงความกว้างของแกน x โดยใช้สูตรด้านบน
ขั้นตอนที่ 4: ตั้งค่ามิติข้อมูล
เราสามารถกำหนดขนาดโดยใช้การเข้ารหัสที่ระบุด้านล่าง -
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
หลังจากกำหนดมิติข้อมูลแล้วให้จัดกลุ่มเพศโดยใช้การเข้ารหัสที่ระบุด้านล่าง -
var genderGroup = genderDimension.group().reduceCount();
ขั้นตอนที่ 5: สร้างแผนภูมิ
ตอนนี้สร้างแผนภูมิฟองโดยใช้การเข้ารหัสที่ระบุด้านล่าง -
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})
ที่นี่
เราได้กำหนดความกว้างของแผนภูมิเป็น 1200 และความสูงเป็น 400
ต่อไปเราได้ระบุจุดขอบ
จากนั้นเราได้กำหนดมิติข้อมูลเพศและกลุ่ม
ตัวเข้าถึงคีย์และค่าจะส่งคืนคีย์และค่าจากฟองอากาศ
คำนวณฟังก์ชันตัวเข้าถึงค่ารัศมีโดยใช้สูตร - Math.floor((p.value / 10)) + 1.
ขั้นตอนที่ 6: วาดฟองอากาศ
ตอนนี้วาดฟองอากาศโดยใช้การเข้ารหัสที่ระบุด้านล่าง -
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});
ที่นี่
ฟังก์ชัน d3.scale.linear ใช้เพื่อสร้างมาตราส่วนเชิงเส้นใหม่โดยมีช่วงโดเมนที่ระบุ [0,240] สำหรับแกน x
ในทำนองเดียวกันเรากำหนดค่าสเกลเชิงเส้น y และรัศมี
เราระบุค่าป้ายกำกับรัศมีขั้นต่ำเป็น 1,000 ค่าแกน x และแกน y เป็น 200 และ 100 ตามลำดับ
ต่อไปเราได้ระบุค่าขนาดสัมพัทธ์ฟองสูงสุดเป็น 0.7
แสดงเส้นตารางแนวนอนและแนวตั้งจากนั้นจับคู่กับชื่อเรื่องสำหรับคีย์ฟองและค่า
ขั้นตอนที่ 7: ตั้งค่า TickFormat
ตั้งค่ารูปแบบตั๋วสำหรับแกน x และแกน y โดยใช้การเข้ารหัสที่ระบุด้านล่าง -
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
สุดท้ายแสดงแผนภูมิโดยใช้ chart.render() วิธี.
ขั้นตอนที่ 8: ตัวอย่างการทำงาน
รายการรหัสที่สมบูรณ์จะแสดงในบล็อกรหัสต่อไปนี้ สร้างเว็บเพจbubble.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้
<html>
<head>
<title>Bubble chart 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 = "bubble"></div>
</div>
<script language = "javascript">
var chart = dc.bubbleChart('#bubble');
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";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
var genderGroup = genderDimension.group().reduceCount();
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
chart.render();
});
</script>
</body>
</html>
ตอนนี้ขอเบราว์เซอร์แล้วเราจะเห็นคำตอบต่อไปนี้