Advertisement
Guest User

Untitled

a guest
Feb 5th, 2016
57
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.41 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <body>
  4. <style>
  5. body {
  6. margin: 20px;
  7. }
  8. .buttons {
  9. margin-bottom: 20px;
  10. }
  11. </style>
  12. <div class="buttons">
  13. <button id="reset">Reset</button>
  14. <button id="next">Next</button>
  15. </div>
  16. <script src="//d3js.org/d3.v3.min.js"></script>
  17. <script>
  18. var radius = 5;
  19. var size = 32;
  20. var color = d3.scale.ordinal().range(['white', 'black']).domain([0, 1]);
  21.  
  22. var svg = d3.select('body').append('svg')
  23. .attr('width', size * radius * 2)
  24. .attr('height', size * radius * 2);
  25.  
  26. function randomBinaryData() {
  27. var data = [];
  28. for (var i = 0; i < size; i ++) {
  29. data[i] = [];
  30. for (var j = 0; j < size; j ++) {
  31. data[i][j] = Math.floor(Math.random() * 2);
  32. }
  33. }
  34. return data;
  35. }
  36.  
  37. function compareNumbers(a, b) {
  38. return a - b;
  39. }
  40.  
  41. function sortRows(data) {
  42. for (var i = 0; i < data.length; i ++) {
  43. if (i % 2 === 0) {
  44. data[i].sort(compareNumbers);
  45. } else {
  46. data[i].sort(compareNumbers).reverse();
  47. }
  48. }
  49. }
  50.  
  51. function sortCols(data) {
  52. for (var j = 0; j < data.length; j ++) {
  53. var col = [];
  54. for (var i = 0; i < data.length; i ++) {
  55. col[i] = data[i][j];
  56. }
  57. col.sort(compareNumbers);
  58. for (var i = 0; i < data.length; i ++) {
  59. data[i][j] = col[i];
  60. }
  61. }
  62. }
  63.  
  64. function renderMatrix(data) {
  65. var rows = svg.selectAll('.row').data(data);
  66.  
  67. rows.enter().append('g');
  68. rows
  69. .attr('class', 'row')
  70. .attr('transform', function(d, i) { return 'translate(0,' + (i * radius * 2) + ')'; });
  71.  
  72. var dots = rows.selectAll('.dot').data(function(d, i) { return d; });
  73.  
  74. dots.enter().append('circle');
  75. dots
  76. .attr('class', 'dot')
  77. .attr('r', radius)
  78. .attr('cx', function(d, i) { return (i * radius * 2) + radius; })
  79. .attr('cy', radius)
  80. .attr('fill', function(d) { return color(d); });
  81. }
  82.  
  83. var intervalDuration = 2000;
  84. var matrix = randomBinaryData();
  85.  
  86. renderMatrix(matrix);
  87.  
  88. var step = 0;
  89.  
  90. function next() {
  91. if (step % 2 === 0) {
  92. sortRows(matrix);
  93. renderMatrix(matrix);
  94. } else {
  95. sortCols(matrix);
  96. renderMatrix(matrix);
  97. }
  98. step += 1;
  99. }
  100.  
  101. function reset() {
  102. matrix = randomBinaryData();
  103. step = 0;
  104. renderMatrix(matrix);
  105. }
  106.  
  107. document.getElementById("next").onclick = next;
  108. document.getElementById("reset").onclick = reset;
  109.  
  110. // setInterval(function() {
  111. // sortRows(matrix);
  112. // render(matrix);
  113. // setTimeout(function() {
  114. // sortCols(matrix);
  115. // render(matrix);
  116. // }, intervalDuration / 2);
  117. // }, intervalDuration);
  118.  
  119. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement