d3-scatterplot-matrix/index.html at master · zhangyu94/d3-scatterplot-matrix · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<meta charset="utf-8">

<body>
  <script src="d3.v5.min.js"></script>
  <script src="d3.scatterplotMatrix.js"></script>
  <script>
    (async function () {

      /*
      const data = [{x: 10, y: 10, z: 4}, {x: 20, y: 15, z: 6}, {x: 30, y: 0, z: 1}]
      let chart = d3.scatterplotMatrix()
        .width(960)
        .height(600)
        .traits(['x', 'y', 'z'])
      */

      const data = await d3.csv("flowers.csv")
      let chart = d3.scatterplotMatrix()
        .width(960)
        .height(600)
        .traits(['sepal length', 'sepal width', 'petal length', 'petal width'])
        .colorValueMapper(d => d.species)

      let svg = d3.select('body').append('svg')
        .datum(data)
        .call(chart)
    })()
  </script>
</body>