This is something that has recently broken. Previously, I was getting normal plots when running the exact same code however now the plot is just a black screen. (Pictured Below)
I am not sure what changed. I tried reverting to an older version of plotly but that did not fix it. I do not even know where to begin debugging this. I saw another question with similar problem but their solution of clearing the cache did not fix my issue. As you can see in the photo the only problem is the actual plot canvas as the colorbar still functions.
Here are the relevant sections of my code:
JavaScript
x
67
67
1
<head>2
3
<title>3D Plot - AutoPlotter</title>4
<script src="https://cdn.plot.ly/plotly-1.54.6.min.js"></script>5
<link rel="stylesheet" href="../static/styles.css">6
<link rel="apple-touch-icon" sizes="180x180" href="../static/apple-touch-icon.png">7
<link rel="icon" type="image/png" sizes="32x32" href="../static/favicon-32x32.png">8
<link rel="icon" type="image/png" sizes="16x16" href="../static/favicon-16x16.png">9
<link rel="manifest" href="../static/site.webmanifest">10
11
12
</head>13
<div id = "plot" style="background-color:white;"></div>14
15
<script>16
var plotDiv = document.getElementById("plot");17
trace = {18
x:[0.0, 0.841471, 0.656987, 0.420167, 0.990607, 0.149877, 0.912945, 0.762558, 0.551427, 0.296369, 0.963795, 0.0177019, 0.850904, 0.670229, 0.436165, 0.992873, 0.167356, 0.920026, 0.773891, 0.566108, 0.313229, 0.968364, 0.0353983, 0.860069, 0.683262, 0.452026, 0.994827, 0.184782, 0.926818, 0.78498, 0.580611, 0.329991, 0.97263, 0.0530836, 0.868966, 0.69608, 0.467745, 0.996469, 0.20215, 0.933321, 0.795824, 0.594933, 0.346649, 0.976591, 0.0707522, 0.87759, 0.70868, 0.483318, 0.997799, 0.219455, 0.93953, 0.806418, 0.609068, 0.363199, 0.980246, 0.0883987, 0.885939, 0.721059, 0.498739, 0.998817, 0.236691, 0.945445, 0.81676, 0.623012, 0.379636, 0.983593, 0.106017, 0.89401, 0.733211, 0.514004, 0.999521, 0.253853, 0.951064, 0.826846, 0.636761, 0.395953, 0.986633, 0.123603, 0.901801, 0.745133, 0.529108, 0.999912, 0.270935, 0.956385, 0.836672, 0.650311, 0.412146, 0.989363, 0.14115, 0.90931, 0.756822, 0.544046, 0.287932, 0.961406, 0.00888145, 0.846236, 0.663656, 0.42821, 0.991783, 0.158652, 0.916534, 0.768274, 0.558814, 0.304839, 0.966126, 0.0265813, 0.855536, 0.676794, 0.44414, 0.993892, 0.176105, 0.92347, 0.779485, 0.573407, 0.321651, 0.970543, 0.0442728, 0.864567, 0.68972, 0.45993, 0.99569, 0.193503, 0.930117, 0.790452, 0.587819],19
y:[1.0, 0.540302, 0.753902, 0.907447, 0.136737, 0.988705, 0.408082, 0.646919, 0.834223, 0.955074, 0.266643, 0.999843, 0.525322, 0.742154, 0.899867, 0.11918, 0.985897, 0.391857, 0.633319, 0.824331, 0.949678, 0.24954, 0.999373, 0.510177, 0.730174, 0.892005, 0.101586, 0.98278, 0.37551, 0.619521, 0.814181, 0.943984, 0.232359, 0.99859, 0.494872, 0.717964, 0.883863, 0.0839594, 0.979355, 0.359044, 0.605528, 0.803775, 0.937995, 0.215105, 0.997494, 0.479412, 0.70553, 0.875445, 0.0663069, 0.975623, 0.342466, 0.591345, 0.793118, 0.931711, 0.197784, 0.996085, 0.463802, 0.692874, 0.866752, 0.0486335, 0.971585, 0.325781, 0.576978, 0.782212, 0.925136, 0.180401, 0.994364, 0.448047, 0.680001, 0.857788, 0.0309449, 0.967243, 0.308994, 0.562429, 0.771061, 0.918271, 0.162961, 0.992332, 0.432151, 0.666916, 0.848554, 0.0132466, 0.962598, 0.29211, 0.547704, 0.759668, 0.911118, 0.14547, 0.989988, 0.416119, 0.653621, 0.839055, 0.957651, 0.275134, 0.999961, 0.532808, 0.748038, 0.903679, 0.127934, 0.987334, 0.399958, 0.640121, 0.829293, 0.952404, 0.258073, 0.999647, 0.517744, 0.736172, 0.895958, 0.110357, 0.984371, 0.383671, 0.626421, 0.819271, 0.946858, 0.24093, 0.99902, 0.502518, 0.724076, 0.887955, 0.0927462, 0.9811, 0.367263, 0.612524, 0.808992],20
z:[0.0, 0.01, 0.07, 0.13, 0.14, 0.19, 0.2, 0.26, 0.32, 0.38, 0.39, 0.44, 0.45, 0.51, 0.57, 0.58, 0.63, 0.64, 0.7, 0.76, 0.82, 0.83, 0.88, 0.89, 0.95, 1.01, 1.02, 1.07, 1.08, 1.14, 1.2, 1.26, 1.27, 1.32, 1.33, 1.39, 1.45, 1.46, 1.51, 1.52, 1.58, 1.64, 1.7, 1.71, 1.76, 1.77, 1.83, 1.89, 1.9, 1.95, 1.96, 2.02, 2.08, 2.14, 2.15, 2.2, 2.21, 2.27, 2.33, 2.34, 2.39, 2.4, 2.46, 2.52, 2.58, 2.59, 2.64, 2.65, 2.71, 2.77, 2.78, 2.83, 2.84, 2.9, 2.96, 3.02, 3.03, 3.08, 3.09, 3.15, 3.21, 3.22, 3.27, 3.28, 3.34, 3.4, 3.46, 3.47, 3.52, 3.53, 3.59, 3.65, 3.71, 3.72, 3.77, 3.78, 3.84, 3.9, 3.91, 3.96, 3.97, 4.03, 4.09, 4.15, 4.16, 4.21, 4.22, 4.28, 4.34, 4.35, 4.4, 4.41, 4.47, 4.53, 4.59, 4.6, 4.65, 4.66, 4.72, 4.78, 4.79, 4.84, 4.85, 4.91, 4.97],21
type: "scatter3d",22
mode: 'markers',23
marker: {24
color: [0.0, 0.04008064516129032, 0.08016129032258064, 0.12024193548387097, 0.16032258064516128, 0.2004032258064516, 0.24048387096774193, 0.2805645161290322, 0.32064516129032256, 0.3607258064516129, 0.4008064516129032, 0.4408870967741935, 0.48096774193548386, 0.5210483870967741, 0.5611290322580644, 0.6012096774193548, 0.6412903225806451, 0.6813709677419354, 0.7214516129032258, 0.7615322580645161, 0.8016129032258064, 0.8416935483870968, 0.881774193548387, 0.9218548387096773, 0.9619354838709677, 1.002016129032258, 1.0420967741935483, 1.0821774193548386, 1.1222580645161289, 1.1623387096774194, 1.2024193548387097, 1.2425, 1.2825806451612902, 1.3226612903225805, 1.3627419354838708, 1.402822580645161, 1.4429032258064516, 1.4829838709677419, 1.5230645161290322, 1.5631451612903224, 1.6032258064516127, 1.643306451612903, 1.6833870967741935, 1.7234677419354838, 1.763548387096774, 1.8036290322580644, 1.8437096774193547, 1.883790322580645, 1.9238709677419354, 1.9639516129032257, 2.004032258064516, 2.0441129032258063, 2.0841935483870966, 2.124274193548387, 2.164354838709677, 2.2044354838709674, 2.2445161290322577, 2.284596774193548, 2.3246774193548387, 2.364758064516129, 2.4048387096774193, 2.4449193548387096, 2.485, 2.52508064516129, 2.5651612903225804, 2.6052419354838707, 2.645322580645161, 2.6854032258064513, 2.7254838709677416, 2.765564516129032, 2.805645161290322, 2.845725806451613, 2.885806451612903, 2.9258870967741935, 2.9659677419354837, 3.006048387096774, 3.0461290322580643, 3.0862096774193546, 3.126290322580645, 3.166370967741935, 3.2064516129032254, 3.2465322580645157, 3.286612903225806, 3.3266935483870963, 3.366774193548387, 3.4068548387096773, 3.4469354838709676, 3.487016129032258, 3.527096774193548, 3.5671774193548385, 3.6072580645161287, 3.647338709677419, 3.6874193548387093, 3.7274999999999996, 3.76758064516129, 3.80766129032258, 3.847741935483871, 3.887822580645161, 3.9279032258064515, 3.9679838709677417, 4.008064516129032, 4.048145161290322, 4.088225806451613, 4.128306451612903, 4.168387096774193, 4.2084677419354835, 4.248548387096774, 4.288629032258064, 4.328709677419354, 4.368790322580645, 4.408870967741935, 4.448951612903225, 4.4890322580645154, 4.529112903225806, 4.569193548387096, 4.609274193548386, 4.6493548387096775, 4.689435483870968, 4.729516129032258, 4.769596774193548, 4.809677419354839, 4.849758064516129, 4.889838709677419, 4.9299193548387095, 4.97],25
colorscale: 'Viridis',26
showscale:true,27
cmin: 0,28
cmax: 100,29
30
},31
showscale: true,32
colorbar: {33
z: 034
},35
};36
37
var layout = {38
title: 'Temperature vs Voltage vs Frequency',39
autosize: true,40
scene: {41
xaxis:{ title: 'x: Voltage',42
range: [0,100],43
autorange: false,},44
45
yaxis:{ title: 'y: Frequency',46
range: [0,100],47
autorange: false,},48
49
zaxis:{ title: 'z: Temperature',50
range: [0,100],51
autorange: false,},52
},53
margin: {54
l: 6.5,55
r: 5.0,56
b: 6.5,57
t: 30,58
},59
colorscale: 'Viridis',60
showscale: true,61
};62
var config = {responsive: true}63
Plotly.newPlot(plotDiv,[trace],layout,config);64
65
66
</script>67
Advertisement
Answer
You sure your CSS styles do not break anything? I’m not sure how it’s supposed to look, but definitely it’s not all black:
JavaScript
1
48
48
1
var plotDiv = document.getElementById("plot");2
trace = {3
x:[0.0, 0.841471, 0.656987, 0.420167, 0.990607, 0.149877, 0.912945, 0.762558, 0.551427, 0.296369, 0.963795, 0.0177019, 0.850904, 0.670229, 0.436165, 0.992873, 0.167356, 0.920026, 0.773891, 0.566108, 0.313229, 0.968364, 0.0353983, 0.860069, 0.683262, 0.452026, 0.994827, 0.184782, 0.926818, 0.78498, 0.580611, 0.329991, 0.97263, 0.0530836, 0.868966, 0.69608, 0.467745, 0.996469, 0.20215, 0.933321, 0.795824, 0.594933, 0.346649, 0.976591, 0.0707522, 0.87759, 0.70868, 0.483318, 0.997799, 0.219455, 0.93953, 0.806418, 0.609068, 0.363199, 0.980246, 0.0883987, 0.885939, 0.721059, 0.498739, 0.998817, 0.236691, 0.945445, 0.81676, 0.623012, 0.379636, 0.983593, 0.106017, 0.89401, 0.733211, 0.514004, 0.999521, 0.253853, 0.951064, 0.826846, 0.636761, 0.395953, 0.986633, 0.123603, 0.901801, 0.745133, 0.529108, 0.999912, 0.270935, 0.956385, 0.836672, 0.650311, 0.412146, 0.989363, 0.14115, 0.90931, 0.756822, 0.544046, 0.287932, 0.961406, 0.00888145, 0.846236, 0.663656, 0.42821, 0.991783, 0.158652, 0.916534, 0.768274, 0.558814, 0.304839, 0.966126, 0.0265813, 0.855536, 0.676794, 0.44414, 0.993892, 0.176105, 0.92347, 0.779485, 0.573407, 0.321651, 0.970543, 0.0442728, 0.864567, 0.68972, 0.45993, 0.99569, 0.193503, 0.930117, 0.790452, 0.587819],4
y:[1.0, 0.540302, 0.753902, 0.907447, 0.136737, 0.988705, 0.408082, 0.646919, 0.834223, 0.955074, 0.266643, 0.999843, 0.525322, 0.742154, 0.899867, 0.11918, 0.985897, 0.391857, 0.633319, 0.824331, 0.949678, 0.24954, 0.999373, 0.510177, 0.730174, 0.892005, 0.101586, 0.98278, 0.37551, 0.619521, 0.814181, 0.943984, 0.232359, 0.99859, 0.494872, 0.717964, 0.883863, 0.0839594, 0.979355, 0.359044, 0.605528, 0.803775, 0.937995, 0.215105, 0.997494, 0.479412, 0.70553, 0.875445, 0.0663069, 0.975623, 0.342466, 0.591345, 0.793118, 0.931711, 0.197784, 0.996085, 0.463802, 0.692874, 0.866752, 0.0486335, 0.971585, 0.325781, 0.576978, 0.782212, 0.925136, 0.180401, 0.994364, 0.448047, 0.680001, 0.857788, 0.0309449, 0.967243, 0.308994, 0.562429, 0.771061, 0.918271, 0.162961, 0.992332, 0.432151, 0.666916, 0.848554, 0.0132466, 0.962598, 0.29211, 0.547704, 0.759668, 0.911118, 0.14547, 0.989988, 0.416119, 0.653621, 0.839055, 0.957651, 0.275134, 0.999961, 0.532808, 0.748038, 0.903679, 0.127934, 0.987334, 0.399958, 0.640121, 0.829293, 0.952404, 0.258073, 0.999647, 0.517744, 0.736172, 0.895958, 0.110357, 0.984371, 0.383671, 0.626421, 0.819271, 0.946858, 0.24093, 0.99902, 0.502518, 0.724076, 0.887955, 0.0927462, 0.9811, 0.367263, 0.612524, 0.808992],5
z:[0.0, 0.01, 0.07, 0.13, 0.14, 0.19, 0.2, 0.26, 0.32, 0.38, 0.39, 0.44, 0.45, 0.51, 0.57, 0.58, 0.63, 0.64, 0.7, 0.76, 0.82, 0.83, 0.88, 0.89, 0.95, 1.01, 1.02, 1.07, 1.08, 1.14, 1.2, 1.26, 1.27, 1.32, 1.33, 1.39, 1.45, 1.46, 1.51, 1.52, 1.58, 1.64, 1.7, 1.71, 1.76, 1.77, 1.83, 1.89, 1.9, 1.95, 1.96, 2.02, 2.08, 2.14, 2.15, 2.2, 2.21, 2.27, 2.33, 2.34, 2.39, 2.4, 2.46, 2.52, 2.58, 2.59, 2.64, 2.65, 2.71, 2.77, 2.78, 2.83, 2.84, 2.9, 2.96, 3.02, 3.03, 3.08, 3.09, 3.15, 3.21, 3.22, 3.27, 3.28, 3.34, 3.4, 3.46, 3.47, 3.52, 3.53, 3.59, 3.65, 3.71, 3.72, 3.77, 3.78, 3.84, 3.9, 3.91, 3.96, 3.97, 4.03, 4.09, 4.15, 4.16, 4.21, 4.22, 4.28, 4.34, 4.35, 4.4, 4.41, 4.47, 4.53, 4.59, 4.6, 4.65, 4.66, 4.72, 4.78, 4.79, 4.84, 4.85, 4.91, 4.97],6
type: "scatter3d",7
mode: 'markers',8
marker: {9
color: [0.0, 0.04008064516129032, 0.08016129032258064, 0.12024193548387097, 0.16032258064516128, 0.2004032258064516, 0.24048387096774193, 0.2805645161290322, 0.32064516129032256, 0.3607258064516129, 0.4008064516129032, 0.4408870967741935, 0.48096774193548386, 0.5210483870967741, 0.5611290322580644, 0.6012096774193548, 0.6412903225806451, 0.6813709677419354, 0.7214516129032258, 0.7615322580645161, 0.8016129032258064, 0.8416935483870968, 0.881774193548387, 0.9218548387096773, 0.9619354838709677, 1.002016129032258, 1.0420967741935483, 1.0821774193548386, 1.1222580645161289, 1.1623387096774194, 1.2024193548387097, 1.2425, 1.2825806451612902, 1.3226612903225805, 1.3627419354838708, 1.402822580645161, 1.4429032258064516, 1.4829838709677419, 1.5230645161290322, 1.5631451612903224, 1.6032258064516127, 1.643306451612903, 1.6833870967741935, 1.7234677419354838, 1.763548387096774, 1.8036290322580644, 1.8437096774193547, 1.883790322580645, 1.9238709677419354, 1.9639516129032257, 2.004032258064516, 2.0441129032258063, 2.0841935483870966, 2.124274193548387, 2.164354838709677, 2.2044354838709674, 2.2445161290322577, 2.284596774193548, 2.3246774193548387, 2.364758064516129, 2.4048387096774193, 2.4449193548387096, 2.485, 2.52508064516129, 2.5651612903225804, 2.6052419354838707, 2.645322580645161, 2.6854032258064513, 2.7254838709677416, 2.765564516129032, 2.805645161290322, 2.845725806451613, 2.885806451612903, 2.9258870967741935, 2.9659677419354837, 3.006048387096774, 3.0461290322580643, 3.0862096774193546, 3.126290322580645, 3.166370967741935, 3.2064516129032254, 3.2465322580645157, 3.286612903225806, 3.3266935483870963, 3.366774193548387, 3.4068548387096773, 3.4469354838709676, 3.487016129032258, 3.527096774193548, 3.5671774193548385, 3.6072580645161287, 3.647338709677419, 3.6874193548387093, 3.7274999999999996, 3.76758064516129, 3.80766129032258, 3.847741935483871, 3.887822580645161, 3.9279032258064515, 3.9679838709677417, 4.008064516129032, 4.048145161290322, 4.088225806451613, 4.128306451612903, 4.168387096774193, 4.2084677419354835, 4.248548387096774, 4.288629032258064, 4.328709677419354, 4.368790322580645, 4.408870967741935, 4.448951612903225, 4.4890322580645154, 4.529112903225806, 4.569193548387096, 4.609274193548386, 4.6493548387096775, 4.689435483870968, 4.729516129032258, 4.769596774193548, 4.809677419354839, 4.849758064516129, 4.889838709677419, 4.9299193548387095, 4.97],10
colorscale: 'Viridis',11
showscale:true,12
cmin: 0,13
cmax: 100,14
15
},16
showscale: true,17
colorbar: {18
z: 019
},20
};21
22
var layout = {23
title: 'Temperature vs Voltage vs Frequency',24
autosize: true,25
scene: {26
xaxis:{ title: 'x: Voltage',27
range: [0,100],28
autorange: false,},29
30
yaxis:{ title: 'y: Frequency',31
range: [0,100],32
autorange: false,},33
34
zaxis:{ title: 'z: Temperature',35
range: [0,100],36
autorange: false,},37
},38
margin: {39
l: 6.5,40
r: 5.0,41
b: 6.5,42
t: 30,43
},44
colorscale: 'Viridis',45
showscale: true,46
};47
var config = {responsive: true}48
Plotly.newPlot(plotDiv,[trace],layout,config);JavaScript
1
3
1
<script src="https://cdn.plot.ly/plotly-1.54.6.min.js"></script>2
3
<div id = "plot" style="background-color:white;"></div>