Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <meta charset="utf-8">
- <body>
- <style>
- body {
- margin: 20px;
- }
- .buttons {
- margin-bottom: 20px;
- }
- </style>
- <div class="buttons">
- <button id="reset">Reset</button>
- <button id="next">Next</button>
- </div>
- <script src="//d3js.org/d3.v3.min.js"></script>
- <script>
- var radius = 5;
- var size = 32;
- var color = d3.scale.ordinal().range(['white', 'black']).domain([0, 1]);
- var svg = d3.select('body').append('svg')
- .attr('width', size * radius * 2)
- .attr('height', size * radius * 2);
- function randomBinaryData() {
- var data = [];
- for (var i = 0; i < size; i ++) {
- data[i] = [];
- for (var j = 0; j < size; j ++) {
- data[i][j] = Math.floor(Math.random() * 2);
- }
- }
- return data;
- }
- function compareNumbers(a, b) {
- return a - b;
- }
- function sortRows(data) {
- for (var i = 0; i < data.length; i ++) {
- if (i % 2 === 0) {
- data[i].sort(compareNumbers);
- } else {
- data[i].sort(compareNumbers).reverse();
- }
- }
- }
- function sortCols(data) {
- for (var j = 0; j < data.length; j ++) {
- var col = [];
- for (var i = 0; i < data.length; i ++) {
- col[i] = data[i][j];
- }
- col.sort(compareNumbers);
- for (var i = 0; i < data.length; i ++) {
- data[i][j] = col[i];
- }
- }
- }
- function renderMatrix(data) {
- var rows = svg.selectAll('.row').data(data);
- rows.enter().append('g');
- rows
- .attr('class', 'row')
- .attr('transform', function(d, i) { return 'translate(0,' + (i * radius * 2) + ')'; });
- var dots = rows.selectAll('.dot').data(function(d, i) { return d; });
- dots.enter().append('circle');
- dots
- .attr('class', 'dot')
- .attr('r', radius)
- .attr('cx', function(d, i) { return (i * radius * 2) + radius; })
- .attr('cy', radius)
- .attr('fill', function(d) { return color(d); });
- }
- var intervalDuration = 2000;
- var matrix = randomBinaryData();
- renderMatrix(matrix);
- var step = 0;
- function next() {
- if (step % 2 === 0) {
- sortRows(matrix);
- renderMatrix(matrix);
- } else {
- sortCols(matrix);
- renderMatrix(matrix);
- }
- step += 1;
- }
- function reset() {
- matrix = randomBinaryData();
- step = 0;
- renderMatrix(matrix);
- }
- document.getElementById("next").onclick = next;
- document.getElementById("reset").onclick = reset;
- // setInterval(function() {
- // sortRows(matrix);
- // render(matrix);
- // setTimeout(function() {
- // sortCols(matrix);
- // render(matrix);
- // }, intervalDuration / 2);
- // }, intervalDuration);
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement