二维数据通常使用散点图进行可视化。其中两个尺寸表示在两个不同的轴上，水平x轴和垂直y轴。

数据

数组：每个主数组包含一个点。

<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view12"></div>
<script>
    data = [
        [10, 20], [20, 100], [200, 50],
        [25, 80], [10, 200], [150, 75],
        [10, 70], [30, 150], [100, 15]
    ]

    svg = d3.select("#view12")
        .append("svg")
        .attr("width", 250)
        .attr("height", 250)
        .attr("style", "border:1px solid red;")
    svg.selectAll("circle")
        .data(data).enter()
        .append("circle")
        .attr("cx", function(d) {return d[0]})
        .attr("cy", function(d) {return d[1]})
        .attr("r", 4)
</script>

改变大小

<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view13"></div>
<script>
    data = [
        [10, 20], [20, 100], [200, 50],
        [25, 80], [10, 200], [150, 75],
        [10, 70], [30, 150], [100, 15]
    ]

    svg = d3.select("#view13")
        .append("svg")
        .attr("width", 250)
        .attr("height", 250)
        .attr("style", "border:1px solid red;")        
    svg.selectAll("circle")
        .data(data).enter()
        .append("circle")
        .attr("cx", function(d) {return d[0]})
        .attr("cy", function(d) {return d[1]})
        .attr("r", function(d) {
            return Math.sqrt(d[0]*d[0]+d[1]*d[1])/20
        })        
</script>

修改颜色

<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view14"></div>
<script>
    data = [
        [10, 20], [20, 100], [200, 50],
        [25, 80], [10, 200], [150, 75],
        [10, 70], [30, 150], [100, 15]
    ]

    svg = d3.select("#view14")
        .append("svg")
        .attr("width", 250)
        .attr("height", 250)
        .attr("style", "border:1px solid red;")        
    svg.selectAll("circle")
        .data(data).enter()
        .append("circle")
        .attr("cx", function(d) {return d[0]})
        .attr("cy", function(d) {return d[1]})
        .attr("r", function(d) {
            return Math.sqrt(d[0]*d[0]+d[1]*d[1])/20
        })
        .attr("fill", function(d) {
            return "rgb("+d[0]+","+d[1]+",0)"
        })    
</script>

增加标注文字

<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view15"></div>
<script>
    data = [
        [10, 20], [20, 100], [200, 50],
        [25, 80], [10, 200], [150, 75],
        [10, 70], [30, 150], [100, 15]
    ]

    svg = d3.select("#view15")
        .append("svg")
        .attr("width", 250)
        .attr("height", 250)
        .attr("style", "border:1px solid red;")        
    svg.selectAll("circle")
        .data(data).enter()
        .append("circle")
        .attr("cx", function(d) {return d[0]})
        .attr("cy", function(d) {return d[1]})
        .attr("r", function(d) {
            return Math.sqrt(d[0]*d[0]+d[1]*d[1])/20
        })
        .attr("fill", function(d) {
            return "rgb("+d[0]+","+d[1]+",0)"
        })

    // In addition to circles construction
    svg.selectAll("text")
        .data(data).enter()
        .append("text")
        .attr("x", function(d) {return d[0]+4})
        .attr("y", function(d) {return d[1]+4})
        .text(function(d) {return d[0] + ", " + d[1]})
        .attr("font-size", "10px")
</script>

关于代码运行效果

由于在简书上不能展示代码的运行结果，我在网上搭建了一个 jupyter notebook http://jupyter.cyber-life.cn/lab，我将本套教程的笔记和源代码写在了上面，可以在线查看代码运行效果，还可以调试代码，有需要的同学私信我。