d3graph/index.html at main · pmi/d3graph · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 graph</title>
</head>
<body>

<h1>D3 graph</h1>

</body>

<script type="module">
    import {D3Graph} from './script.js';
    import * as d3 from 'https://cdn.skypack.dev/d3@7';

    const graph = new D3Graph({
        yLabel: "G values",
        xStart: 'start_date',
        xEnd: 'end_date',
        xStep: 'step_minutes',
        ys: [
         {
                yField: 'g',
                color: "coral",
                curve: d3.curveBasisOpen,
            }, {
                yField: 'chh',
                color: "lightblue",
                type: 'area',
                curve: d3.curveCatmull,
                yLabel: 'Another Y',
                yPosition: d3.axisRight,
            }
        ]
    });

    document.addEventListener('DOMContentLoaded', function () {
        document.body.appendChild(graph.getSVG());
    });

    fetch("data.json")
        .then(response => response.json())
        .then(data => graph.load(data));

</script>
</html>