初始化数据可视化项目

2025-04-27 08:48:28 +08:00
commit 1984d69e6d
41 changed files with 325354 additions and 0 deletions
--- a/experiment_2/task5.html
+++ b/experiment_2/task5.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>d3</title>
+    <script src="http://d3js.org/d3.v5.min.js"></script>
+</head>
+
+<body>
+    <script>
+        // 定义SVG画布的宽度和高度
+        var width = 600;
+        var height = 600;
+    
+        // 创建SVG画布并将其添加到body中，设置画布的宽度和高度
+        var svg = d3.select("body").append("svg")
+        .attr("width",width)
+        .attr("height",height);
+    
+        // 定义数据集，每个数值表示一个矩形条的长度比例
+        var dataset = [30,20,35,32,21];
+    
+        // 定义颜色比例尺，将数据值映射到颜色
+        var colorScale = d3.scaleLinear()
+            .domain([d3.min(dataset), d3.max(dataset)]) // 数据值范围
+            .range(["blue", "red"]); // 颜色范围
+    
+        // 绑定数据到SVG中的rect元素，并根据数据生成矩形条
+        svg.selectAll("rect")
+        .data(dataset) // 绑定数据集到rect元素
+        .enter() // 为数据集中每个元素创建一个新的rect元素
+        .append("rect") // 添加rect元素到SVG中
+        .attr("x",10) // 设置矩形条的起始x坐标
+        .attr("y",function(d,i){
+            // 根据索引计算每个矩形条的y坐标，确保它们垂直排列
+            return i * 30;
+        })
+        .attr("width",function(d,i){
+            // 根据数据值动态设置矩形条的宽度
+            return d * 10;
+        })
+        .attr("height",28) // 设置矩形条的高度
+        .attr("fill", function(d) {
+            // 根据数据值动态设置填充颜色
+            return colorScale(d);
+        });
+    </script>
+</body>
+</html>