Hướng dẫn thực hành - Vi tích phân 1 | Trường Đại học Khoa học Tự nhiên, Đại học Quốc gia Thành phố Hồ Chí Minh

SVG (Scalable Vector Graphics) là định dạng ảnh vector dùng để thể hiện các đối tượng đồ họa hai chiều và có hỗ trợ tương tác từ phía người dùng cũng như ảnh động. Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh. Tài liệu được sưu tầm giúp bạn tham khảo, ôn tập và đạt kết quả cao trong kì thi sắp tới. Mời bạn đọc đón xem !

18 9 lượt tải Tải xuống
Chia sẻ Báo cáo tài liệu

Môn: Vi tích phân 1 (MTH00005)

Trường: Trường Đại học Khoa học tự nhiên, Đại học Quốc gia Thành phố Hồ Chí Minh

Thông tin:

6 trang 1 tháng trước

Tác giả:

Profile Phạm Thị Huyền
lOMoARcPSD|46342985
lOMoARcPSD|46342985
KHOA CÔNG NGHỆ THÔNG TIN
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
227 Nguyễn Văn Cừ, Phường 4, Quận 5, TP.HCM
Điện thoại: (08) 38.354.266 – Fax: (08) 38.350.096
TRỰC QUAN HÓA DỮ LIỆU
HƯỚNG DẪN THỰC HÀNH
HD02 – Biểu đồ cột với d3.js
I.Thông tin chung
Mã số bài tập: HD02
Thời lượng dự kiến: 3 tiếng
Deadline nộp bài: -
Hình thức: Bài tập cá nhân
Hình thức nộp bài:
Nộp qua Moodle môn học
GV phụ trách: Phạm Minh Tú
Thông tin liên lạc với GV: pmtu@fit.hcmus.edu.vn
II. Chuẩn đầu ra cần đạt
Bài tập này nhằm mục tiêu đạt được các chuẩn đầu ra sau:
▪ Sinh viên có thể áp dụng công cụ d3.js để trình bày dữ liệu trực quan thông
qua ứng dụng.
III. Hướng dẫn
Phần này hướng dẫn sinh viên hiện thực hóa biểu đồ cột dùng d3.js
Bước 1: Chuẩn bị HTML
Để vẽ biểu đồ hình cột, ta chuẩn bị một phần tử HMTL để vẽ, dùng phần tử SVG là
một lựa chọn.
SVG (Scalable Vector Graphics) là định dạng ảnh vector dùng để thể hiện các đối
tượng đồ họa hai chiều và có hỗ trợ tương tác từ phía người dùng cũng như ảnh
động. Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn (scale) thoải mái
mà không làm giảm chất lượng hình ảnh.
Khai báo thẻ SVG, thiết lặp chiều rộng chiều cao cho nó, khai báo scale cho biểu đồ
cột, trục tung và trục hoành. Biểu đồ sẽ được thể hiện trên thẻ SVG.
<body>
<svg width="600" height="500"></svg> <script>
var svg = d3.select("svg"),
margin = 200,
width = svg.ar("width") - margin, height =
svg.ar("height") - margin;
lOMoARcPSD|46342985
KHOA CÔNG NGHỆ THÔNG TIN
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
227 Nguyễn Văn Cừ, Phường 4, Quận 5, TP.HCM
Điện thoại: (08) 38.354.266 – Fax: (08) 38.350.096
var xScale = d3.scaleBand().range ([0, width]).padding(0.4), yScale =
d3.scaleLinear().range ([height, 0]);
</script>
Bước 2: Tải dữ liệu từ server bằng cách gọi API.
Ta có API load danh sách các sản phẩm kèm giá của nó như sau:
public class SanPhamController : ControllerBase
{
public class SanPham
{
public string name { get; set; }
public decimal price { get; set; }
}
/ GET: api/SanPham
[HpGet(Name ="sanpham")]
public IEnumerable<SanPham> sanpham()
{
SanPham[] sp = new SanPham[] { new SanPham() { name="Iphone
11",price=11000000} ,
new SanPham() { name="Iphone 11 Lock",price=9000000} , new
SanPham() { name="Iphone 12",price=17000000} ,
new SanPham() { name="Iphone 11 Pro",price=13000000} , new SanPham()
{ name="Iphone 12 pro MAX",price=19000000} ,
new SanPham() { name="Iphone 13",price=22000000} , new SanPham()
{ name="Iphone 14",price=45000000} , new SanPham() { name="Iphone
15",price=60000000}
};
return sp;
}
}
Kết quả việc gọi API:
[{"name":"Iphone 11","price":11000000.0},{"name":"Iphone 11
Lock","price":9000000.0},{"name":"Iphone 12","price":17000000.0},
{"name":"Iphone 11 Pro","price":13000000.0},{"name":"Iphone 12 pro
MAX","price":19000000.0},{"name":"Iphone 13","price":22000000.0},
{"name":"Iphone 14","price":45000000.0},{"name":"Iphone
15","price":60000000.0}]
Dữ liệu này làm đầu vào cho biểu đồ.
lOMoARcPSD|46342985
KHOA CÔNG NGHỆ THÔNG TIN
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
227 Nguyễn Văn Cừ, Phường 4, Quận 5, TP.HCM
Điện thoại: (08) 38.354.266 – Fax: (08) 38.350.096
d3.json("http://localhost:51293/api/sanpham", function(error, data) {
var svg = d3.select("svg"),
margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin
var xScale = d3.scaleBand().range([0, width]).padding(0.4)
var yScale = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
console.log(data);
xScale.domain(data.map(function(d) { return d.name; }));
yScale.domain([0, d3.max(data, function(d) { return d.price;})]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d)
{ return "VND " + d;
}).ticks(10));
Dùng d3 gọi API để tải dữ liệu:
d3.json("http://localhost:51293/api/sanpham", function(error, data)
Sau đó load tên sản phẩm như trục hoành, giá sản phảm như trục tung
xScale.domain(data.map(function(d) { return d.name; }));
yScale.domain([0, d3.max(data, function(d) { return d.price;})]);
Các lệnh còn lại chủ yếu thiết lặp khoảng cách giá trị (tick), label.
Bước 3: Định dạng biểu đồ
Việc còn lại là định dạng biểu đồ dùng CSS
<style>
.bar {
ll: steelblue;
}
</style>
Định dang biểu đồ hình chữ nhật, màu xanh
Thêm phần tử text vào thẻ SVG để trực quan trục tung và trục hoành, áp dụng CSS
vừa tạo để tạo bar column
g.append("g")
lOMoARcPSD|46342985
KHOA CÔNG NGHỆ THÔNG TIN
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
227 Nguyễn Văn Cừ, Phường 4, Quận 5, TP.HCM
Điện thoại: (08) 38.354.266 – Fax: (08) 38.350.096
.ar("transform", "translate(0," + height + ")")
.call(d3.axisBoom(xScale))
.append("text")
.ar("y", height - 250)
.ar("x", width - 100)
.ar("text-anchor", "end")
.ar("stroke", "black")
.text("Product");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.ar("class", "bar")
.ar("x", function(d) { return xScale(d.name); })
.ar("y", function(d) { return yScale(d.price); })
.ar("width", xScale.bandwidth())
.ar("height", function(d) { return height - yScale(d.price);
});
Toàn bộ source code như bên dưới.
<!doctype html>
<html>
<head>
<style>
.bar {
ll: steelblue;
}
</style>
<script src="hps://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="1000" height="500"></svg>
<script>
d3.json("hp://localhost:51293/api/sanpham", function(error,
data) {
var svg = d3.select("svg"),
margin = 200,
width = svg.ar("width") - margin,
height = svg.ar("height") - margin
var xScale = d3.scaleBand().range([0, width]).padding(0.4)
lOMoARcPSD|46342985
KHOA CÔNG NGHỆ THÔNG TIN
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
227 Nguyễn Văn Cừ, Phường 4, Quận 5, TP.HCM
Điện thoại: (08) 38.354.266 – Fax: (08) 38.350.096
var yScale = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.ar("transform", "translate(" + 100 + "," + 100 + ")");
console.log(data);
xScale.domain(data.map(function(d) { return d.name; }));
yScale.domain([0, d3.max(data, function(d) { return
d.price;})]);
g.append("g")
.ar("transform", "translate(0," + height + ")")
.call(d3.axisBoom(xScale));
g.append("g")
.call(d3.axisLe(yScale).tickFormat(function(d){ return "VND " + d;
}).ticks(10));
g.append("g")
.ar("transform", "translate(0," + height + ")")
.call(d3.axisBoom(xScale))
.append("text")
.ar("y", height - 250)
.ar("x", width - 100)
.ar("text-anchor", "end")
.ar("stroke", "black")
.text("Product");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.ar("class", "bar")
.ar("x", function(d) { return xScale(d.name); })
.ar("y", function(d) { return yScale(d.price); })
.ar("width", xScale.bandwidth())
.ar("height", function(d) { return height - yScale(d.price);
});
});
</script>
</body>
</html>
Kết quả chương trình:
lOMoARcPSD|46342985
KHOA CÔNG NGHỆ THÔNG TIN
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
227 Nguyễn Văn Cừ, Phường 4, Quận 5, TP.HCM
Điện thoại: (08) 38.354.266 – Fax: (08) 38.350.096
L ưu ý: C ầ n ch ạ y backend server tr ướ c.
d3-bar.mp4
IV. Các yêu cầu & quy định chi tiết cho bài nộp
Yêu cầu:
Sinh viên thực hiện lại bài tập nhưng tạo biểu đồ dạng cột để thể hiện tình hình dân
số việt nam qua các năm từ năm 2000 đến hiện tại.
Quy định nộp bài:
Bài tập cá nhân, nộp các source code có liên quan và nén file theo mẫu: mssv.zip
V. Cách đánh giá
Thực hiện đúng theo các bước hướng dẫn, chạy không lỗi.
VI. Tài liệu tham khảo
VII. Các quy định khác
| 1/6
| | Tải xuống

Có thể bạn quan tâm:

Preview text:


Bước 2: Tải dữ liệu từ server bằng cách gọi API.
Ta có API load danh sách các sản phẩm kèm giá của nó như sau:
public class SanPhamController : ControllerBase { public class SanPham {
public string name { get; set; }
public decimal price { get; set; } } / GET: api/SanPham [HttpGet(Name ="sanpham")] public IEnumerable sanpham() {
SanPham[] sp = new SanPham[] { new SanPham() { name="Iphone 11",price=11000000} ,
new SanPham() { name="Iphone 11 Lock",price=9000000} , new
SanPham() { name="Iphone 12",price=17000000} ,
new SanPham() { name="Iphone 11 Pro",price=13000000} , new SanPham()
{ name="Iphone 12 pro MAX",price=19000000} ,
new SanPham() { name="Iphone 13",price=22000000} , new SanPham()
{ name="Iphone 14",price=45000000} , new SanPham() { name="Iphone 15",price=60000000} }; return sp; } }
Kết quả việc gọi API:
[{"name":"Iphone 11","price":11000000.0},{"name":"Iphone 11
Lock","price":9000000.0},{"name":"Iphone 12","price":17000000.0},
{"name":"Iphone 11 Pro","price":13000000.0},{"name":"Iphone 12 pro
MAX","price":19000000.0},{"name":"Iphone 13","price":22000000.0},
{"name":"Iphone 14","price":45000000.0},{"name":"Iphone 15","price":60000000.0}]
Dữ liệu này làm đầu vào cho biểu đồ. lOMoARcPSD|46342985
KHOA CÔNG NGHỆ THÔNG TIN
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
227 Nguyễn Văn Cừ, Phường 4, Quận 5, TP.HCM
Điện thoại: (08) 38.354.266 – Fax: (08) 38.350.096
d3.json("http://localhost:51293/api/sanpham", function(error, data) { var svg = d3.select("svg"), margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin
var xScale = d3.scaleBand().range([0, width]).padding(0.4)
var yScale = d3.scaleLinear().range([height, 0]); var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")"); console.log(data);
xScale.domain(data.map(function(d) { return d.name; }));
yScale.domain([0, d3.max(data, function(d) { return d.price;})]); g.append("g")
.attr("transform", "translate(0," + height + ")") .cal (d3.axisBottom(xScale)); g.append("g")
.cal (d3.axisLeft(yScale).tickFormat(function(d) { return "VND " + d; }).ticks(10));
Dùng d3 gọi API để tải dữ liệu:
d3.json("http://localhost:51293/api/sanpham", function(error, data)
Sau đó load tên sản phẩm như trục hoành, giá sản phảm như trục tung
xScale.domain(data.map(function(d) { return d.name; }));
yScale.domain([0, d3.max(data, function(d) { return d.price;})]);
Các lệnh còn lại chủ yếu thiết lặp khoảng cách giá trị (tick), label.
Bước 3: Định dạng biểu đồ
Việc còn lại là định dạng biểu đồ dùng CSS
Định dang biểu đồ hình chữ nhật, màu xanh
Thêm phần tử text vào thẻ SVG để trực quan trục tung và trục hoành, áp dụng CSS
vừa tạo để tạo bar column g.append("g") lOMoARcPSD|46342985
KHOA CÔNG NGHỆ THÔNG TIN
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
227 Nguyễn Văn Cừ, Phường 4, Quận 5, TP.HCM
Điện thoại: (08) 38.354.266 – Fax: (08) 38.350.096
.attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)) .append("text") .attr("y", height - 250) .attr("x", width - 100) .attr("text-anchor", "end") .attr("stroke", "black") .text("Product"); g.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar")
.attr("x", function(d) { return xScale(d.name); })
.attr("y", function(d) { return yScale(d.price); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.price); });
Toàn bộ source code như bên dưới.