Old school D3 from simpler times

All examples By author By category About

plmrry

Full window Github gist

List Order Transitions

To transition an HTML list when it is re-ordered:

Create a second "hidden" list where each <li> contains an empty   character.
Calculate each hidden <li>'s new position (using jQuery).
Transition the absolute-ly positioned list elements.

🆒

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    var data = ['apple', 'orange', 'banana', 'mango', 'peach'];
    
    var div = d3.select('body').append('div')
    	.style('height', '100px')
    	.style('width', '200px')
    	.style('border', '1px solid green')
    
   	div.selectAll('.sorted')
      .data(data)
			.enter()
      .append('div')
      .classed('sorted', true)
    	.html('&nbsp;');
    
    div.selectAll('.moving')
      .data(data)
    	.enter()
      .append('div')
      .classed('moving', true)
      .style('position', 'absolute')
      .style('top', 0)
      .text(function(d) { return d; });
    
    setInterval(function() {
      d3.shuffle(data);
      div.selectAll('.sorted')
        .data(data)
        .each(function(d) {
          var target = $(this).position();
          div.selectAll('.moving')
            .filter(function(e) { return d === e; })
            .transition()
            .style('top', target.top + 'px');
        })
    }, 1000)

</script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <script>
    var data = ['apple', 'orange', 'banana', 'mango', 'peach'];
    
    var div = d3.select('body').append('div')
        .style('height', '100px')
        .style('width', '200px')
        .style('border', '1px solid green')
    
    div.selectAll('.sorted')
      .data(data)
            .enter()
      .append('div')
      .classed('sorted', true)
        .html('&nbsp;');
    
    div.selectAll('.moving')
      .data(data)
        .enter()
      .append('div')
      .classed('moving', true)
      .style('position', 'absolute')
      .style('top', 0)
      .text(function(d) { return d; });
    
    setInterval(function() {
      d3.shuffle(data);
      div.selectAll('.sorted')
        .data(data)
        .each(function(d) {
          var target = $(this).position();
          div.selectAll('.moving')
            .filter(function(e) { return d === e; })
            .transition()
            .style('top', target.top + 'px');
        })
    }, 1000)
​
  </script>
</body>
​
    

https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.min.js

https://code.jquery.com/jquery-3.0.0.min.js