<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>var graphDiv = document.getElementById('graph');
var url = 'https://cdn.rawgit.com/plotly/datasets/aba35d71/mpg.csv';
Plotly.d3.csv(url, function(err, csv) {
// console.log(csv);
var i = -1
var mpg = csv.map(function(r) { return +r.mpg; });
var hp = csv.map(function(r) { return +r.horsepower; });
var text = csv.map(function(r) {
return r.weight + ' lbs, year 19' + r['model-year'];
});
var idArray = csv.map(function(r){ return i += 1})
var colors = csv.map(function(r) {return 'red'})
// console.log(idArray)
// other fields: acceleration, cylinders, displacement
Plotly.newPlot(graphDiv, [{
x: hp,
y: mpg,
mode: 'markers',
text: text,
type: 'scatter',
ids: idArray,
marker: {
color: colors,
size: 30,
opacity: 0.7,
line: {
width: 2,
color: 'white',
opacity: 0.5
}
}
}], {
xaxis: {title: 'horsepower'},
yaxis: {title: 'mpg'},
width: window.innerWidth,
height: window.innerHeight,
hovermode: 'closest',
annotations: []
});
graphDiv.on('plotly_click', function(eventData) {
// console.log(eventData);
// console.log(graphDiv._fullLayout);
var point = eventData.points[0]
console.log('test data ' , csv[point.pointNumber])
console.log('point ' , point)
console.log('id ' , idArray[point.pointNumber])
var newColors = colors
newColors[point.pointNumber] = 'blue'
// move point clicked to end of array
var idx = idArray[point.pointNumber]
idArray.splice(idx, 1);
var newIds = idArray.concat(idx)
idArray = newIds
console.log(newIds)
Plotly.animate(graphDiv, [{data: [{'marker.color': newColors, ids: newIds}]}]);
});
});
External CSS
This Pen doesn't use any external CSS resources.