[TIẾNG VIỆT]:
** Tạo bản đồ tương tác với D3.js **
D3.js là một thư viện JavaScript để tạo trực quan hóa dữ liệu tương tác.Đây là một công cụ mạnh mẽ có thể được sử dụng để tạo ra nhiều biểu đồ, đồ thị và bản đồ.Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo bản đồ tương tác với D3.JS.
Chúng tôi sẽ sử dụng [dữ liệu của Ngân hàng Thế giới về GDP bình quân đầu người] (World Bank Open Data) để tạo bản đồ hiển thị phân phối GDP trên đầu người xung quanhthế giới.
## 1. Bắt đầu
Để bắt đầu, bạn sẽ cần cài đặt D3.JS.Bạn có thể làm điều này bằng cách làm theo các hướng dẫn trên trang web [D3.js] (D3).
Khi bạn đã cài đặt D3.js, bạn có thể tạo tệp HTML mới và bắt đầu mã hóa.
## 2. Tải dữ liệu
Điều đầu tiên chúng ta cần làm là tải dữ liệu vào mã JavaScript của chúng tôi.Chúng ta có thể làm điều này bằng cách sử dụng chức năng [d3.csv ()] (https://github.com/d3/d3-csv#d3csv).
`` `
data var = d3.csv ("data/gdp_per_capita.csv");
`` `
Điều này sẽ tải dữ liệu từ tệp `data/gdp_per_capita.csv` vào một mảng javaScript.
## 3. Tạo bản đồ
Bây giờ chúng tôi đã tải dữ liệu, chúng tôi có thể tạo bản đồ.Chúng tôi sẽ sử dụng [d3.geo.map ()] (GitHub - d3/d3-geo: Geographic projections, spherical shapes and spherical trigonometry.) để tạo bản đồ thế giới.
`` `
var dự đoán = d3.geo.mercator ()
.Scale (1000)
.translate ([chiều rộng / 2, chiều cao / 2]);
đường dẫn var = d3.geo.path ()
.projection (trình chiếu);
var svg = d3.select ("#map")
.Append ("SVG")
.ATTR ("chiều rộng", chiều rộng)
.attr ("chiều cao", chiều cao);
var g = svg.append ("g");
G.Selectall ("Đường dẫn")
.Data (dữ liệu)
.đi vào()
.Append ("Đường dẫn")
.ATTR ("D", Path)
.ATTR ("điền", function (d) {
trả về màu (d.gdppercapita);
});
`` `
Mã này sẽ tạo ra một bản đồ thế giới với mỗi quốc gia được tô màu theo GDP bình quân đầu người.
## 4. Thêm các tính năng tương tác
Chúng tôi có thể thêm các tính năng tương tác vào bản đồ của chúng tôi bằng [d3.mouse ()] (https://github.com/d3/d3-mouse#d3mouse) và [d3.select ()] (GitHub - d3/d3-selection: Transform the DOM by selecting elements and joining to data.) Chức năng.
`` `
svg.on ("mousemove", function (event) {
chuột var = d3.mouse (this);
VAR PATH = G.Select ("Đường dẫn")
.filter (function (d) {
trả về D._Path.Contains (chuột);
});
if (path.length> 0) {
var country = path.datum ();
G.Select (". Tên nước")
.Text (Country.CountryName);
G.Select (". GDP-Per-Capita")
.Text (quốc gia.gdppercapita);
} khác {
G.Select (". Tên nước")
.chữ("");
G.Select (". GDP-Per-Capita")
.chữ("");
}
});
`` `
Mã này sẽ cập nhật tên quốc gia và GDP bình quân đầu người khi chuột lơ lửng trên một quốc gia trên bản đồ.
## 5. Xem bản đồ
Để xem bản đồ, bạn có thể lưu tệp HTML của mình và mở nó trong trình duyệt web.Bạn sẽ thấy một bản đồ của thế giới
[ENGLISH]:
**Creating Interactive Maps with D3.js**
D3.js is a JavaScript library for creating interactive data visualizations. It's a powerful tool that can be used to create a wide variety of charts, graphs, and maps. In this tutorial, we'll show you how to create an interactive map with D3.js.
We'll be using the [World Bank's data on GDP per capita](https://data.worldbank.org/indicator/NY.GDP.PCAP.CD) to create a map that shows the distribution of GDP per capita around the world.
## 1. Getting Started
To get started, you'll need to install D3.js. You can do this by following the instructions on the [D3.js website](https://d3js.org/).
Once you have D3.js installed, you can create a new HTML file and start coding.
## 2. Loading the Data
The first thing we need to do is load the data into our JavaScript code. We can do this using the [d3.csv()](https://github.com/d3/d3-csv#d3csv) function.
```
var data = d3.csv("data/gdp_per_capita.csv");
```
This will load the data from the `data/gdp_per_capita.csv` file into a JavaScript array.
## 3. Creating the Map
Now that we have the data loaded, we can create the map. We'll use the [d3.geo.map()](https://github.com/d3/d3-geo#d3geomap) function to create a map of the world.
```
var projection = d3.geo.mercator()
.scale(1000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#map")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
g.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", path)
.attr("fill", function(d) {
return color(d.GDPPerCapita);
});
```
This code will create a map of the world with each country colored according to its GDP per capita.
## 4. Adding Interactive Features
We can add interactive features to our map using the [d3.mouse()](https://github.com/d3/d3-mouse#d3mouse) and [d3.select()](https://github.com/d3/d3-selection#d3select) functions.
```
svg.on("mousemove", function(event) {
var mouse = d3.mouse(this);
var path = g.select("path")
.filter(function(d) {
return d._path.contains(mouse);
});
if (path.length > 0) {
var country = path.datum();
g.select(".country-name")
.text(country.CountryName);
g.select(".gdp-per-capita")
.text(country.GDPPerCapita);
} else {
g.select(".country-name")
.text("");
g.select(".gdp-per-capita")
.text("");
}
});
```
This code will update the country name and GDP per capita when the mouse hovers over a country on the map.
## 5. Viewing the Map
To view the map, you can save your HTML file and open it in a web browser. You should see a map of the world
** Tạo bản đồ tương tác với D3.js **
D3.js là một thư viện JavaScript để tạo trực quan hóa dữ liệu tương tác.Đây là một công cụ mạnh mẽ có thể được sử dụng để tạo ra nhiều biểu đồ, đồ thị và bản đồ.Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo bản đồ tương tác với D3.JS.
Chúng tôi sẽ sử dụng [dữ liệu của Ngân hàng Thế giới về GDP bình quân đầu người] (World Bank Open Data) để tạo bản đồ hiển thị phân phối GDP trên đầu người xung quanhthế giới.
## 1. Bắt đầu
Để bắt đầu, bạn sẽ cần cài đặt D3.JS.Bạn có thể làm điều này bằng cách làm theo các hướng dẫn trên trang web [D3.js] (D3).
Khi bạn đã cài đặt D3.js, bạn có thể tạo tệp HTML mới và bắt đầu mã hóa.
## 2. Tải dữ liệu
Điều đầu tiên chúng ta cần làm là tải dữ liệu vào mã JavaScript của chúng tôi.Chúng ta có thể làm điều này bằng cách sử dụng chức năng [d3.csv ()] (https://github.com/d3/d3-csv#d3csv).
`` `
data var = d3.csv ("data/gdp_per_capita.csv");
`` `
Điều này sẽ tải dữ liệu từ tệp `data/gdp_per_capita.csv` vào một mảng javaScript.
## 3. Tạo bản đồ
Bây giờ chúng tôi đã tải dữ liệu, chúng tôi có thể tạo bản đồ.Chúng tôi sẽ sử dụng [d3.geo.map ()] (GitHub - d3/d3-geo: Geographic projections, spherical shapes and spherical trigonometry.) để tạo bản đồ thế giới.
`` `
var dự đoán = d3.geo.mercator ()
.Scale (1000)
.translate ([chiều rộng / 2, chiều cao / 2]);
đường dẫn var = d3.geo.path ()
.projection (trình chiếu);
var svg = d3.select ("#map")
.Append ("SVG")
.ATTR ("chiều rộng", chiều rộng)
.attr ("chiều cao", chiều cao);
var g = svg.append ("g");
G.Selectall ("Đường dẫn")
.Data (dữ liệu)
.đi vào()
.Append ("Đường dẫn")
.ATTR ("D", Path)
.ATTR ("điền", function (d) {
trả về màu (d.gdppercapita);
});
`` `
Mã này sẽ tạo ra một bản đồ thế giới với mỗi quốc gia được tô màu theo GDP bình quân đầu người.
## 4. Thêm các tính năng tương tác
Chúng tôi có thể thêm các tính năng tương tác vào bản đồ của chúng tôi bằng [d3.mouse ()] (https://github.com/d3/d3-mouse#d3mouse) và [d3.select ()] (GitHub - d3/d3-selection: Transform the DOM by selecting elements and joining to data.) Chức năng.
`` `
svg.on ("mousemove", function (event) {
chuột var = d3.mouse (this);
VAR PATH = G.Select ("Đường dẫn")
.filter (function (d) {
trả về D._Path.Contains (chuột);
});
if (path.length> 0) {
var country = path.datum ();
G.Select (". Tên nước")
.Text (Country.CountryName);
G.Select (". GDP-Per-Capita")
.Text (quốc gia.gdppercapita);
} khác {
G.Select (". Tên nước")
.chữ("");
G.Select (". GDP-Per-Capita")
.chữ("");
}
});
`` `
Mã này sẽ cập nhật tên quốc gia và GDP bình quân đầu người khi chuột lơ lửng trên một quốc gia trên bản đồ.
## 5. Xem bản đồ
Để xem bản đồ, bạn có thể lưu tệp HTML của mình và mở nó trong trình duyệt web.Bạn sẽ thấy một bản đồ của thế giới
[ENGLISH]:
**Creating Interactive Maps with D3.js**
D3.js is a JavaScript library for creating interactive data visualizations. It's a powerful tool that can be used to create a wide variety of charts, graphs, and maps. In this tutorial, we'll show you how to create an interactive map with D3.js.
We'll be using the [World Bank's data on GDP per capita](https://data.worldbank.org/indicator/NY.GDP.PCAP.CD) to create a map that shows the distribution of GDP per capita around the world.
## 1. Getting Started
To get started, you'll need to install D3.js. You can do this by following the instructions on the [D3.js website](https://d3js.org/).
Once you have D3.js installed, you can create a new HTML file and start coding.
## 2. Loading the Data
The first thing we need to do is load the data into our JavaScript code. We can do this using the [d3.csv()](https://github.com/d3/d3-csv#d3csv) function.
```
var data = d3.csv("data/gdp_per_capita.csv");
```
This will load the data from the `data/gdp_per_capita.csv` file into a JavaScript array.
## 3. Creating the Map
Now that we have the data loaded, we can create the map. We'll use the [d3.geo.map()](https://github.com/d3/d3-geo#d3geomap) function to create a map of the world.
```
var projection = d3.geo.mercator()
.scale(1000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#map")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
g.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", path)
.attr("fill", function(d) {
return color(d.GDPPerCapita);
});
```
This code will create a map of the world with each country colored according to its GDP per capita.
## 4. Adding Interactive Features
We can add interactive features to our map using the [d3.mouse()](https://github.com/d3/d3-mouse#d3mouse) and [d3.select()](https://github.com/d3/d3-selection#d3select) functions.
```
svg.on("mousemove", function(event) {
var mouse = d3.mouse(this);
var path = g.select("path")
.filter(function(d) {
return d._path.contains(mouse);
});
if (path.length > 0) {
var country = path.datum();
g.select(".country-name")
.text(country.CountryName);
g.select(".gdp-per-capita")
.text(country.GDPPerCapita);
} else {
g.select(".country-name")
.text("");
g.select(".gdp-per-capita")
.text("");
}
});
```
This code will update the country name and GDP per capita when the mouse hovers over a country on the map.
## 5. Viewing the Map
To view the map, you can save your HTML file and open it in a web browser. You should see a map of the world
