<!-- plotly.min.js is included by codepen -->
<!-- our div for the plot -->
<div id="DivId"></div>
<div class="controls">
<span>Paths: </span>
<input id="pathnum" value="1, 100, 1000, 10000">
<button id="pathButton">show paths</button>
<button id="delete">clear paths</button>
</div>
#DivId{
max-height: 500px;
margin: 0 auto;
}
.controls{
font-family: arial;
font-size: 12px;
color: #447ADC;
padding: 10px;
width: 400px;
margin: 0 auto;
span{
font-size: 16px;
}
input{
color: inherit;
padding: 6px 8px;
border: 1px solid #447ADC;
}
button{
padding: 6px 8px;
background-color: transparent;
color: inherit;
margin-left: 10px;
border: 1px solid #447ADC;
&:hover{
background-color: #447ADC;
color: #ffffff;
}
}
}
View Compiled
(function(){
// d3 is bundled with plotly.js!
Plotly.d3.csv("https://raw.githubusercontent.com/cldougl/csv/master/alldata2.csv", function(data){
processData(data);
});
})();
function processData(allRows) {
var x = [],
yFill = [],
yPath = [];
for (var i = 0; i <= 8; i++){
yFill[i] = [];
}
for (var i=0; i<allRows.length; i++) {
row = allRows[i];
x.push( row['date'] );
yFill[0].push( row['0.20%'] );
yFill[1].push( row['1%'] );
yFill[2].push( row['5%'] );
yFill[3].push( row['25%'] );
yFill[4].push( row['50%'] );
yFill[5].push( row['75%'] );
yFill[6].push( row['95%'] );
yFill[7].push( row['99%'] );
yFill[8].push( row['99.80%']) ;
}
for (var a = 1; a <= 10000; a++){
yPath[a] = [];
}
for (var i=0; i<allRows.length; i++) {
row = allRows[i];
for (var j=1; j <= 10000; j++){
yPath[j].push(row['Path '+j]);
}
}
makePlotly(x, yFill, yPath);
}
function makePlotly(x, yFill, yPath){
var plotDiv = document.getElementById("plot");
var traces = [
{x: x, y: yFill[0],
showlegend: false, hoverinfo:'none',
marker: {color: 'rgba(0, 0, 0, 0)'}},
{x: x, y: yFill[1],
fill: 'tonexty', name: '.2% to 1%',
marker: {color: 'rgba(235, 199, 192, .75)'}},
{x: x, y: yFill[1],
showlegend: false, hoverinfo:'none',
marker: {color: 'rgba(0, 0, 0, 0)'}},
{x: x, y: yFill[2],
fill: 'tonexty', name: '1% to 5%',
marker: {color: 'rgba(197, 147, 135, .75)'}},
{x: x, y: yFill[2],
showlegend: false, hoverinfo:'none',
marker: {color: 'rgba(0, 0, 0, 0)'}},
{x: x, y: yFill[3],
fill: 'tonexty', name: '5% to 25%',
marker: {color: 'rgba(157, 78, 59, .75)'}},
{x: x, y: yFill[3],
showlegend: false, hoverinfo:'none',
marker: {color: 'rgba(0, 0, 0, 0)'}},
{x: x, y: yFill[4],
fill: 'tonexty', name: '25% to 50%',
marker: {color: 'rgba(119, 19, 0, .75)'}},
{x: x, y: yFill[4],
showlegend: false, hoverinfo:'none',
marker: {color: 'rgba(0, 0, 0, 0)'}},
{x: x, y: yFill[5],
fill: 'tonexty', name: '50% to 75%',
marker: {color: 'rgba(2, 82, 25, .75)'}},
{x: x, y: yFill[5],
showlegend: false, hoverinfo:'none',
marker: {color: 'rgba(0, 0, 0, 0)'}},
{x: x, y: yFill[6],
fill: 'tonexty', name: '75% to 95%',
marker: {color: 'rgba(60, 129, 82, .75)'}},
{x: x, y: yFill[6],
showlegend: false, hoverinfo:'none',
marker: {color: 'rgba(0, 0, 0, 0)'}},
{x: x, y: yFill[7],
fill: 'tonexty', name: '95% to 99%',
marker: {color: 'rgba(135, 181, 150, .75)'}},
{x: x, y: yFill[7],
showlegend: false, hoverinfo:'none',
marker: {color: 'rgba(0, 0, 0, 0)'}},
{x: x, y: yFill[8],
fill: 'tonexty', name: '99% to 99.8%',
marker: {color: 'rgba(193, 217, 201, .75)'}}
],
layout = {
title: "Cone Plot with Hover Traces",
xaxis: {
title: "Time",
showgrid: false,
dtick: 2,
},
yaxis: {
title: "Data",
showline: false
}
};
Plotly.newPlot('DivId', traces, layout, {showSendToCloud: true});
var rmHover,
nTraces = 16,
plot = document.getElementById('DivId');
// Show the nearest trace when hovering
plot.on('plotly_hover', function(data) {
var pointNum = data.points[0].pointNumber,
hoverY = (data.yvals[0]).toPrecision(4);
if (rmHover){
Plotly.deleteTraces('DivId', nTraces);
}
// loop through yPaths and if the value matches the hover y val plot hover trace
for (var yp=1; yp<=10000; yp++) {
if((Number(yPath[yp][pointNum])).toPrecision(4) === hoverY){
var traceh = {x: x,
y: yPath[yp],
name:'Path '+yp,
mode: 'lines+markers',
hoverinfo: 'none',
marker: {size:6},
line: {width:1,
color:'rgba(0, 0, 0, .4)'}
};
Plotly.addTraces('DivId', traceh);
rmHover=true;
break;
} else{
rmHover=false;
}
}
})
// Draw the trace (and leave it in place) when clicked
plot.on('plotly_click', function(data){
// plot the 'hover' trace as a permanent/colored trace on click
var update = {
'line': {width: 2}
};
Plotly.restyle('DivId', update, [nTraces]);
nTraces+=1;
rmHover=false;
});
var pathBtn = document.getElementById('pathButton');
pathBtn.addEventListener('click', function(){
if (rmHover) {Plotly.deleteTraces('DivId', -1);
}
var pathnum = document.getElementById('pathnum').value,
pathnums = pathnum.split(",").map(Number),
inputTraces = [];
for (var p=0; p<pathnums.length; p++) {
nTraces+=1;
inputTraces.push(
{
x: x, y: yPath[pathnums[p]],
name:'Path '+pathnums[p],
mode: 'lines+markers',
hoverinfo: 'none',
marker: {size:6},
line: {width:2}
});
}
Plotly.addTraces('DivId', inputTraces);
rmHover=false;
});
var deleteBtn = document.getElementById('delete');
deleteBtn.addEventListener('click', function(){
for (var ll=nTraces; ll>16; ll--) {
Plotly.deleteTraces('DivId', 16);
}
nTraces = 16;
});
}
This Pen doesn't use any external CSS resources.