trace struct flattener

forked from mbostock's block: selection.order

forked from anonymous's block: selection.order().exit().remove()

forked from etpinard's block: trace struct flattener

<!DOCTYPE html>
<html>
  <body>
    <div id='graph'></div>
      
    <script type="text/javascript" src="https:/cdn.plot.ly/plotly-latest.min.js"></script>
    <script type="text/javascript">
      
var d3 = Plotly.d3;
 	     
var ORDER = ['heatmap', 'contour', 'bar', 'histogram', 'scatter'];
      
function plot(data) {
  var s = d3.select('#graph').selectAll('p')
    .data(data, function(d) { return d.uid; })

s.enter().append('p');
    
  s.sort(function(a, b) {
  	return (
      ORDER.indexOf(a.type) - ORDER.indexOf(b.type)
    );
  });
  
  s.exit().remove();
  
  s.text(function(d) { return d.type + ' ' + d.uid;} );
}
     
var data0 = [{
  type: 'scatter',
  uid: '0'
}, {
  type: 'bar',
  uid: '1'
}, { 
  type: 'heatmap',
  uid: '2'
}, {
  type: 'contour',
  uid: '2.5'
  
}];
plot(data0)
     
var data1 = [{
  type: 'scatter',
  uid: '1'
}, {
  type: 'bar',
	uid: '0'
}, { 
  type: 'heatmap',
  uid: '2'
}, {
  type: 'contour',
  uid: '3'
}];
plot(data1);

</script>
  </body>
</html>

https:/cdn.plot.ly/plotly-latest.min.js