visualized-blockchain/scatter-plotly.html at master · kngako/visualized-blockchain · 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
75
76
77
78
79
80
81
82

<!-- Based this example from this https://plot.ly/javascript/line-and-scatter/ -->
<html>
    <head>
        <title>Scatter Plot...</title>
        <style>
            .svg-container {
                width: 100%;
                height: 100%;
            }
            .graph {
                width: 100%;
                height: 100%;
            }
            .svg-content-responsive {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="graph"></div>

        <script src="sample-blocks.js"></script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <script>
            var maxBlockHeight = blocks.reduce((accumulator, block) => {
                return accumulator < block.height ? block.height : accumulator;
            }, 0); // TODO: Might wanna use Number.MIN_SAFE_VALUE...
            var minBlockHeight = blocks.reduce((accumulator, block) => {
                return accumulator > block.height ? block.height : accumulator;
            }, maxBlockHeight);

            blockHeightRange = maxBlockHeight - minBlockHeight;

            var maxBlockNonce = blocks.reduce((accumulator, block) => {
                return accumulator < block.nonce ? block.nonce : accumulator;
            }, 0); // TODO: Might wanna use Number.MIN_SAFE_VALUE...
            var minBlockNonce = blocks.reduce((accumulator, block) => {
                return accumulator > block.nonce ? block.nonce : accumulator;
            }, maxBlockNonce); // TODO: Might wanna use Number.MAX_SAFE_VALUE...

            blockNonceRange = maxBlockNonce - minBlockNonce;


            var trace1 = {
                x: [1, 2, 3, 4, 5],
                y: [1, 6, 3, 6, 1],
                mode: 'markers',
                type: 'scatter',
                name: 'Team A',
                text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
                marker: { size: 12 }
            };

            var data = [{
                x: blocks.map(block => block.height),
                y: blocks.map(block => block.nonce),
                mode: 'markers',
                type: 'scatter',
                name: 'Nonce to Block height distribution',
                text: blocks.map(block => block.height),
                marker: {
                    size: 10
                }
            }];

            var layout = {
                xaxis: {
                    range: [ minBlockHeight, maxBlockHeight ]
                },
                yaxis: {
                    range: [minBlockNonce, maxBlockNonce]
                },
                title:'Nonce Visualization...'
            };

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

        </script>
    </body>
</html>