I'm trying to create a box plot using html and plotly (javascript). However, I'm having a weird issue where only half of my box plot is appearing when I run my code, and there are zoomed in icons over it.Any help debugging would be welcome! Thanks
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
var y = ['US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US',
'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US',
'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US',
'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US',
'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US',
'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US',
'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US', 'US'
]
var trace1 = {
x: [1.7377, 1.8417, 1.9909, 1.9395, 1.8651, 1.8919, 1.7707,
1.5565, 1.8166, 1.3449, 1.3156, 1.3081, 1.6179, 1.574,
1.7276, 1.9215, 1.904, 2.0057, 2.0598, 2.2585, 2.209,
2.1056, 2.1448, 1.8363, 2.067, 2.2431, 2.0881, 2.1856,
2.4389, 2.2612, 2.2647, 2.3306, 2.369, 2.7129, 2.6152,
2.6228, 2.7727, 2.766, 2.8742, 2.9543, 2.9113, 2.9618,
2.8921, 2.7691, 2.7775, 2.7536, 2.6884, 2.9045, 3.0042,
2.9149, 2.8295, 2.6813, 2.6212, 2.5895, 2.6575, 2.8279,
2.8184, 2.9544, 2.9467, 2.8441, 2.8355, 2.6224, 2.5876,
2.5422, 2.5885, 2.6453, 2.431, 2.488
],
y: y,
name: 'US',
marker: {
color: 'black'
},
type: 'box',
boxmean: false,
orientation: 'h'
};
var data = [trace1];
var layout = {
title: 'US ideal points spread',
xaxis: {
title: 'US',
zeroline: false
},
boxmode: 'group'
};
Plotly.newPlot('myDiv', data, layout);
</script>
</head>
