交互式气泡图js

交互式气泡图（Interactive Bubble Chart）是一种数据可视化图表，它通过气泡的大小、位置和颜色来表示三个或更多的数据维度。气泡的位置通常表示两个数值变量之间的关系，而气泡的大小和颜色则可以用来表示第三个和第四个变量。交互式气泡图允许用户通过鼠标悬停、点击或其他交互方式来获取更多信息。

基础概念

X轴和Y轴：表示两个数值变量。
气泡大小：通常表示第三个数值变量。
气泡颜色：可以表示第四个数值变量，如类别或趋势。
交互性：用户可以通过交互来获取每个气泡的详细信息。

优势

多维数据展示：能够在有限的空间内展示多个维度的数据。
直观易懂：气泡的大小和颜色使得数据的比较和趋势分析更加直观。
交互性强：用户可以直接与图表互动，获取更多信息。

类型

静态气泡图：数据固定，用户无法与之交互。
交互式气泡图：用户可以通过鼠标悬停、点击等方式与图表互动。

应用场景

市场分析：展示不同产品的销售额、市场份额等信息。
财务分析：展示不同部门的收入、支出、利润等信息。
社会科学：展示不同群体的人口统计特征、经济状况等信息。

示例代码

以下是一个使用D3.js库创建交互式气泡图的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive Bubble Chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bubble {
            fill: steelblue;
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script>
        const data = [
            {name: "A", x: 100, y: 200, size: 30, category: "X"},
            {name: "B", x: 200, y: 300, size: 50, category: "Y"},
            {name: "C", x: 300, y: 100, size: 80, category: "Z"}
        ];

        const svg = d3.select("svg");
        const color = d3.scaleOrdinal(["red", "green", "blue"]);

        svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("class", "bubble")
            .attr("cx", d => d.x)
            .attr("cy", d => d.y)
            .attr("r", d => d.size)
            .attr("fill", d => color(d.category))
            .on("mouseover", function(event, d) {
                d3.select(this).attr("opacity", 1);
                console.log(`Name: ${d.name}, X: ${d.x}, Y: ${d.y}, Size: ${d.size}`);
            })
            .on("mouseout", function() {
                d3.select(this).attr("opacity", 0.7);
            });
    </script>
</body>
</html>