plotly.js/devtools/demos/backward_compatibility_test.html at c74c81d766c4e6516727f0aea8f2c006b6cfe91c · gatopeich/plotly.js · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Custom Markers - Static SVG Paths (New API)</title>
    <script src="../../dist/plotly.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        h2 { color: #333; }
        .info { background: #e7f3ff; padding: 10px; border-left: 4px solid #3b82f6; margin: 10px 0; }
        code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; }
    </style>
</head>
<body>
    <h2>Custom Markers - Static SVG Paths at r=20</h2>
    <div class="info">
        <strong>New API:</strong> <code>marker.symbol</code> accepts SVG path strings precomputed
        at r=20. Plotly scales them by <code>size/20</code>. Use an array for per-point shapes.<br>
        Rotation is applied as <code>transform="rotate()"</code> via <code>marker.angle</code>.
    </div>
    <div id="plot" style="width: 700px; height: 400px;"></div>

    <script>
    // Static SVG paths at r=20 — Plotly scales by size/20
    var DIAMOND = 'M20,0L0,20L-20,0L0,-20Z';
    var STAR = 'M0.00,-20.00L4.70,-6.47L19.02,-6.18L7.61,2.47L11.76,16.18' +
               'L0.00,8.00L-11.76,16.18L-7.61,2.47L-19.02,-6.18L-4.70,-6.47Z';
    var BIG_DIAMOND = 'M28,0L0,28L-28,0L0,-28Z';  // 1.4× diamond (effectively r=28)

    Plotly.newPlot('plot', [{
        name: 'Diamond',
        type: 'scatter',
        x: [1, 2, 3, 4],
        y: [1, 1, 1, 1],
        mode: 'markers',
        marker: { symbol: DIAMOND, size: 25, color: '#3b82f6' }
    }, {
        name: 'Star',
        type: 'scatter',
        x: [1, 2, 3, 4],
        y: [2, 2, 2, 2],
        mode: 'markers',
        marker: { symbol: STAR, size: 25, color: '#f59e0b' }
    }, {
        name: 'Per-point: normal / big / star',
        type: 'scatter',
        x: [1, 2, 3, 4],
        y: [3, 3, 3, 3],
        mode: 'markers',
        // Each point gets its own symbol path (was: function(r, customdata) { ... })
        marker: {
            symbol: [DIAMOND, BIG_DIAMOND, STAR, DIAMOND],
            size: 25,
            color: '#10b981'
        }
    }], {
        title: 'Custom Markers — SVG path strings at r=20',
        xaxis: { range: [0, 5] },
        yaxis: { range: [0, 4], tickvals: [1, 2, 3], ticktext: ['Diamond', 'Star', 'Per-point'] },
        showlegend: true
    });
    </script>
</body>
</html>