最近有一項(xiàng)非常流行的技術(shù)是使用 HTML 來可視化數(shù)據(jù)。其中一個(gè)很好的示例就是基于 GDP 數(shù)據(jù)的可視化。你可以使用 HTML 和 JavaScript 在網(wǎng)頁上創(chuàng)建柱狀圖，以比較不同年份和國家的 GDP。
<!DOCTYPE html>
<html>
<head>
<title>GDP 可視化</title>
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var dataUrl = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json";
d3.json(dataUrl, function(error, data) {
var dataset = data["data"];
var svgWidth = 800, svgHeight = 400, barPadding = 5;
var barWidth = svgWidth / dataset.length;
var svg = d3.select("body")
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * barWidth;
})
.attr("y", function(d) {
return svgHeight - d[1] / 40;
})
.attr("width", barWidth - barPadding)
.attr("height", function(d) {
return d[1] / 40;
})
.attr("fill", "steelblue");
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0];
})
.attr("x", function(d, i) {
return i * barWidth + 10;
})
.attr("y", function(d) {
return svgHeight - d[1] / 40 - 5;
})
.attr("fill", "white")
.attr("font-size", "11px");
});
</script>
</body>
</html>這段代碼使用 D3.js 庫來讀取和處理數(shù)據(jù)，然后在 SVG 元素中繪制柱狀圖和標(biāo)簽。除此之外，還有一些 CSS 樣式可以應(yīng)用于柱狀圖和網(wǎng)頁的其他元素，以使它們更加美觀和易于閱讀。