Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wrong layout when adjusting gap between positive-side violin plots. #7350

Open
orenbenkiki opened this issue Jan 30, 2025 · 1 comment
Open

Wrong layout when adjusting gap between positive-side violin plots. #7350

orenbenkiki opened this issue Jan 30, 2025 · 1 comment
Labels
bug something broken P3 backlog

Comments

@orenbenkiki
Copy link

orenbenkiki commented Jan 30, 2025 •
edited
Loading

When showing two violin plots in the same graph, it is possible to control the size of the gap between them. If changing the plots to show only the positive side, this breaks (the top graph is placed in the wrong location and is clipped).

This works:

<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id=id-1 class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG"></script>
<script src="https://cdn.plot.ly/plotly-2.3.0.min.js"></script>
<script type="text/javascript">
window.PlotlyConfig = {MathJaxConfig: 'local'};
window.PLOTLYENV = window.PLOTLYENV || {}
if (document.getElementById('id-1')) {
    Plotly.newPlot(
        'id-1',
        [{
                "boxpoints": false,
                "type": "violin",
                "name": "Trace 1",
                "points": false,
                "box": {
                    "visible": false
                },
                "legendgroup": "Trace 1",
                "x": [0.75, 5.25, 5.5, 6.0, 6.2, 6.6, 6.8, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10.0, 10.25, 11.5, 12.0, 16.0, 20.9, 22.3, 23.25]
            },
            {
                "boxpoints": false,
                "type": "violin",
                "name": "Trace 2",
                "points": false,
                "box": {
                    "visible": false
                },
                "legendgroup": "Trace 2",
                "x": [7.9, 5.4, 7.4, 6.2, 8.5, 5.5, 8.8, 8.5, 5.1, 8.5, 5.4, 8.4, 7.8, 4.7, 8.3, 5.2, 6.2, 8.4, 5.2, 7.9, 5.1, 4.7, 7.8, 6.9, 7.4, 8.3, 5.5, 7.6, 7.8, 7.9, 7.3, 7.7, 6.6, 8.0, 7.4, 5.2, 4.8, 8.0, 5.9, 9.0, 8.0, 5.8, 8.4, 5.8, 7.3, 8.3, 6.4, 5.3, 8.2, 5.9, 7.5, 9.0, 5.4, 8.0, 5.4, 8.3, 7.1, 6.4, 7.7, 8.1, 5.9, 8.4, 4.8, 8.2, 6.0, 9.2, 7.8, 7.8, 6.5, 7.3, 8.2, 5.6, 7.9, 7.1, 6.2, 7.6, 6.0, 7.8, 7.6, 8.3, 7.5, 8.2, 7.0, 6.5, 7.3, 8.8, 7.6, 8.0, 4.8, 8.6, 6.0, 9.0, 5.0, 7.8, 6.3, 7.2, 8.4, 7.5, 5.1, 8.2, 6.2, 8.8, 4.9, 8.3, 8.1, 4.7, 8.4, 5.2, 8.6, 8.1, 7.5, 5.9, 8.9, 7.9, 5.9, 8.1, 5.0, 8.5, 5.9, 8.7, 5.3, 6.9, 7.7, 5.6, 8.8, 8.1, 4.5, 8.2, 5.5, 9.0, 4.5, 8.3, 5.6, 8.9, 4.6, 8.2, 5.1, 8.6, 5.3, 7.9, 8.1, 6.0, 8.2, 7.7, 7.6, 5.9, 8.0, 4.9, 9.6, 5.3, 7.7, 7.7, 6.5, 8.1, 7.1, 7.0, 8.1, 9.3, 5.3, 8.9, 4.5, 8.6, 5.8, 7.8, 6.6, 7.6, 6.3, 8.8, 5.2, 9.3, 4.9, 5.7, 7.7, 6.8, 8.1, 8.1, 7.3, 5.0, 8.5, 7.4, 5.5, 7.7, 8.3, 8.3, 5.1, 7.8, 8.4, 4.6, 8.3, 5.5, 8.1, 5.7, 7.6, 8.4, 7.7, 8.1, 8.7, 7.7, 5.1, 7.8, 6.0, 8.2, 9.1, 5.3, 7.8, 4.6, 7.7, 8.4, 4.9, 8.3, 7.1, 8.0, 4.9, 7.5, 6.4, 7.6, 5.3, 9.4, 5.5, 7.6, 5.0, 8.2, 5.4, 7.5, 7.8, 7.9, 7.8, 7.8, 7.0, 7.9, 7.0, 5.4, 8.6, 5.0, 9.0, 5.4, 5.4, 7.7, 7.9, 6.4, 7.5, 4.7, 8.6, 6.3, 8.5, 8.2, 5.7, 8.2, 6.7, 7.4, 5.4, 8.3, 7.3, 7.3, 8.8, 8.0, 7.1, 8.3, 5.6, 7.9, 7.8, 8.4, 5.8, 8.3, 4.3, 6.0, 7.5, 8.1, 4.6, 9.0, 4.6, 7.4, 14.0, 15.0]
            }
        ], {
            "showlegend": false,
            "xaxis": {
                "showgrid": true,
                "gridcolor": "lightgrey",
                "showticklabels": true,
                "range": [0.75, 23.25]
            },
            "boxgroupgap": 0,
            "violingap": 0.1,
            "template": "simple_white",
            "boxgap": 0.1,
            "legend": {
                "tracegroupgap": 0,
                "itemdoubleclick": false
            },
            "yaxis": {
                "showgrid": false,
                "gridcolor": "lightgrey",
                "showticklabels": false,
                "range": [null, null]
            },
            "violingroupgap": 0,
            "margin": {
                "l": 50,
                "b": 50,
                "r": 50,
                "t": 50
            }
        }, {
            "editable": false,
            "responsive": true,
            "staticPlot": false,
            "scrollZoom": true
        },
    )
}
</script>
</body>
</html>

It shows:

Image

This fails (the only difference is adding "side":"positive", to the traces):

<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id=id-1 class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG"></script>
<script src="https://cdn.plot.ly/plotly-2.3.0.min.js"></script>
<script type="text/javascript">
window.PlotlyConfig = {MathJaxConfig: 'local'};
window.PLOTLYENV = window.PLOTLYENV || {}
if (document.getElementById('id-1')) {
    Plotly.newPlot(
        'id-1',
        [{
                "side":"positive",
                "boxpoints": false,
                "type": "violin",
                "name": "Trace 1",
                "points": false,
                "box": {
                    "visible": false
                },
                "legendgroup": "Trace 1",
                "x": [0.75, 5.25, 5.5, 6.0, 6.2, 6.6, 6.8, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10.0, 10.25, 11.5, 12.0, 16.0, 20.9, 22.3, 23.25]
            },
            {
                "side":"positive",
                "boxpoints": false,
                "type": "violin",
                "name": "Trace 2",
                "points": false,
                "box": {
                    "visible": false
                },
                "legendgroup": "Trace 2",
                "x": [7.9, 5.4, 7.4, 6.2, 8.5, 5.5, 8.8, 8.5, 5.1, 8.5, 5.4, 8.4, 7.8, 4.7, 8.3, 5.2, 6.2, 8.4, 5.2, 7.9, 5.1, 4.7, 7.8, 6.9, 7.4, 8.3, 5.5, 7.6, 7.8, 7.9, 7.3, 7.7, 6.6, 8.0, 7.4, 5.2, 4.8, 8.0, 5.9, 9.0, 8.0, 5.8, 8.4, 5.8, 7.3, 8.3, 6.4, 5.3, 8.2, 5.9, 7.5, 9.0, 5.4, 8.0, 5.4, 8.3, 7.1, 6.4, 7.7, 8.1, 5.9, 8.4, 4.8, 8.2, 6.0, 9.2, 7.8, 7.8, 6.5, 7.3, 8.2, 5.6, 7.9, 7.1, 6.2, 7.6, 6.0, 7.8, 7.6, 8.3, 7.5, 8.2, 7.0, 6.5, 7.3, 8.8, 7.6, 8.0, 4.8, 8.6, 6.0, 9.0, 5.0, 7.8, 6.3, 7.2, 8.4, 7.5, 5.1, 8.2, 6.2, 8.8, 4.9, 8.3, 8.1, 4.7, 8.4, 5.2, 8.6, 8.1, 7.5, 5.9, 8.9, 7.9, 5.9, 8.1, 5.0, 8.5, 5.9, 8.7, 5.3, 6.9, 7.7, 5.6, 8.8, 8.1, 4.5, 8.2, 5.5, 9.0, 4.5, 8.3, 5.6, 8.9, 4.6, 8.2, 5.1, 8.6, 5.3, 7.9, 8.1, 6.0, 8.2, 7.7, 7.6, 5.9, 8.0, 4.9, 9.6, 5.3, 7.7, 7.7, 6.5, 8.1, 7.1, 7.0, 8.1, 9.3, 5.3, 8.9, 4.5, 8.6, 5.8, 7.8, 6.6, 7.6, 6.3, 8.8, 5.2, 9.3, 4.9, 5.7, 7.7, 6.8, 8.1, 8.1, 7.3, 5.0, 8.5, 7.4, 5.5, 7.7, 8.3, 8.3, 5.1, 7.8, 8.4, 4.6, 8.3, 5.5, 8.1, 5.7, 7.6, 8.4, 7.7, 8.1, 8.7, 7.7, 5.1, 7.8, 6.0, 8.2, 9.1, 5.3, 7.8, 4.6, 7.7, 8.4, 4.9, 8.3, 7.1, 8.0, 4.9, 7.5, 6.4, 7.6, 5.3, 9.4, 5.5, 7.6, 5.0, 8.2, 5.4, 7.5, 7.8, 7.9, 7.8, 7.8, 7.0, 7.9, 7.0, 5.4, 8.6, 5.0, 9.0, 5.4, 5.4, 7.7, 7.9, 6.4, 7.5, 4.7, 8.6, 6.3, 8.5, 8.2, 5.7, 8.2, 6.7, 7.4, 5.4, 8.3, 7.3, 7.3, 8.8, 8.0, 7.1, 8.3, 5.6, 7.9, 7.8, 8.4, 5.8, 8.3, 4.3, 6.0, 7.5, 8.1, 4.6, 9.0, 4.6, 7.4, 14.0, 15.0]
            }
        ], {
            "showlegend": false,
            "xaxis": {
                "showgrid": true,
                "gridcolor": "lightgrey",
                "showticklabels": true,
                "range": [0.75, 23.25]
            },
            "boxgroupgap": 0,
            "violingap": 0.1,
            "template": "simple_white",
            "boxgap": 0.1,
            "legend": {
                "tracegroupgap": 0,
                "itemdoubleclick": false
            },
            "yaxis": {
                "showgrid": false,
                "gridcolor": "lightgrey",
                "showticklabels": false,
                "range": [null, null]
            },
            "violingroupgap": 0,
            "margin": {
                "l": 50,
                "b": 50,
                "r": 50,
                "t": 50
            }
        }, {
            "editable": false,
            "responsive": true,
            "staticPlot": false,
            "scrollZoom": true
        },
    )
}
</script>
</body>
</html>

It shows:

Image
@gvwilson gvwilson added bug something broken P3 backlog labels Feb 3, 2025
@gvwilson
Copy link
Contributor

gvwilson commented Feb 3, 2025

Thanks for spotting this @orenbenkiki - I've added it to our backlog. Realistically, we're unlikely to get to it any time soon, but if you or someone else would like to put together a pull request, I can try to prioritize review and merge. Cheers - @gvwilson

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug something broken P3 backlog
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@orenbenkiki @gvwilson