correlogram/script.js at main · aishiiousness/correlogram · 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/iris-data.csv', function(err, rows){

    function unpack(rows, key) {
        return rows.map(function(row) { return row[key.replace('.',' ')]; });
    }

    colors = []
    for (i=0; i < unpack(rows, 'class').length; i++) {
      if (unpack(rows, 'class')[i] == "Iris-setosa") {
        colors.push(0)
      } else if (unpack(rows, 'class')[i] == "Iris-versicolor") {
        colors.push(0.5)
      } else if (unpack(rows, 'class')[i] == "Iris-virginica") {
        colors.push(1)
      }
    }

    var pl_colorscale=[
               [0.0, '#19d3f3'],
               [0.333, '#19d3f3'],
               [0.333, '#e763fa'],
               [0.666, '#e763fa'],
               [0.666, '#636efa'],
               [1, '#636efa']
    ]

    var axis = () => ({
      showline:false,
      zeroline:false,
      gridcolor:'#ffff',
      ticklen:4
    })

    var data = [{
      type: 'splom',
      dimensions: [
        {label:'sepal length', values:unpack(rows,'sepal length')},
        {label:'sepal width', values:unpack(rows,'sepal width')},
        {label:'petal length', values:unpack(rows,'petal length')},
        {label:'petal width', values:unpack(rows,'petal width')}
      ],
      text: unpack(rows, 'class'),
      marker: {
        color: colors,
        colorscale:pl_colorscale,
        size: 7,
        line: {
          color: 'white',
          width: 0.5
        }
      }
    }]

    var layout = {
      title:'Iris Data set',
      height: 800,
      width: 800,
      autosize: false,
      hovermode:'closest',
      dragmode:'select',
      plot_bgcolor:'rgba(240,240,240, 0.95)',
      xaxis:axis(),
      yaxis:axis(),
      xaxis2:axis(),
      xaxis3:axis(),
      xaxis4:axis(),
      yaxis2:axis(),
      yaxis3:axis(),
      yaxis4:axis()
    }

    Plotly.react('graph', data, layout, {showSendToCloud: true});

});