alexmacy/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is an offshoot of a project where I was playing around with animating a merge sort. I started messing with transitions and timeouts and it kinda turned into its own thing.
A lot of this was built around mbostock's block: Mergesort I.

  
## index.html
<html>
<meta charset="utf-8">

<head>

    <style>
        rect {
            stroke-linecap: round;
            stroke-width: .25px;
            stroke: black;
            fill: #004d00;
        }
    </style>

    <script src="//d3js.org/d3.v3.min.js"></script>

</head>

<body>

    <div id="viz" style="width: 100%;height:100%"></div>

</body>

<script>

    var n = 100,
        duration = 2000;

    var margin = 40,
        vizDims = document.getElementById('viz').getBoundingClientRect(),
        width = vizDims.width - margin - margin,
        height = vizDims.height - margin - margin;

    var x = d3.scale.ordinal()
        .domain(d3.range(n))
        .rangePoints([0, width]);

    var svg = d3.select("#viz").append("svg")
        .attr("width", width + margin + margin)
        .attr("height", height + margin + margin)
      .append("g")
        .attr("class", "rows")
        .attr("transform", "translate(" + margin + "," + margin + ")");

    var array = d3.shuffle(d3.range(n));

    var rectHeight = 30,
        rectWidth = (width/n) * 1;

    var rectData = array.map(function(v, i) {
                    return {
                        value: v,
                        index: i,
                        array: 0
                    };
                });

    var rectOrig = svg.append("g")
        .attr("class", "orig row")
      .selectAll("rect")
        .data(rectData)
        .enter().append("rect")
            .attr({
                "class": "orig",
                "id": function(d) { return "orig_" + d.index;},
                "x": 0,
                "y": x(0),
                "height": rectHeight,
                "width": rectWidth
            })
            .style("fill-opacity", function(d) { return d.value/n })
            .transition().duration(duration)
            .attr("x", function(d) {return x(d.index)})


    var rectSorted = svg.append("g")
        .attr("class", "sorted row")
      .selectAll("rect")
        .data(rectData)
        .enter().append("rect")
            .attr({
                "class": "sorted",
                "id": function(d) { return "sorted_" + d.index;},
                "x": 0,
                "y": x(0),
                "height": rectHeight,
                "width": rectWidth
            })
            .style("fill-opacity", function(d) { return d.value/n })
            .transition().duration(duration)
            .attr("x", function(d) {return x(d.index)})

    setTimeout(function() { sortedRects(); }, duration * 1);

    function sortedRects() {

        for (i=0; i<n; i++) {
            d3.selectAll("#sorted_" + i)
                .transition().duration(duration)
                .ease("quad-in")
                .attr("y", 10)
                .transition().duration(duration * 1.5)
                .ease("quad-out")
                .attr("x", function(d) {return x(d.value)})
                .attr("y", 60)
        }

        setTimeout(function() {returnRects()}, duration * 2.5);

    }

    function returnRects() {

        for(i=0; i<n; i++) {
            d3.select("#sorted_" + i)
                .transition().duration(duration)
                .attr("x", function(d) {return x(d.index)})
                .attr("y", 0)
        }

        setTimeout(function() { shuffleRects(); }, duration * 1.5);

    }


    function shuffleRects() {

        array = d3.shuffle(array)

        for (i=0; i<array.length; i++) {

            d3.select("#sorted_" + i).data()[0].index = array[i]
            d3.select("#orig_" + i).data()[0].index = array[i]

            d3.select("#sorted_" + i)
                .transition().duration(duration)
                .attr("x", function(d) { return x(d.index) })

            d3.select("#orig_" + i)
                .transition().duration(duration)
                .attr("x", function(d) { return x(d.index) })

        }

        setTimeout(function() { sortedRects(); }, duration * 1);

    }

</script>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html>
	<meta charset="utf-8">

	<head>

	<style>
	rect {
	stroke-linecap: round;
	stroke-width: .25px;
	stroke: black;
	fill: #004d00;
	}
	</style>

	<script src="//d3js.org/d3.v3.min.js"></script>

	</head>

	<body>

	<div id="viz" style="width: 100%;height:100%"></div>

	</body>

	<script>

	var n = 100,
	duration = 2000;

	var margin = 40,
	vizDims = document.getElementById('viz').getBoundingClientRect(),
	width = vizDims.width - margin - margin,
	height = vizDims.height - margin - margin;

	var x = d3.scale.ordinal()
	.domain(d3.range(n))
	.rangePoints([0, width]);

	var svg = d3.select("#viz").append("svg")
	.attr("width", width + margin + margin)
	.attr("height", height + margin + margin)
	.append("g")
	.attr("class", "rows")
	.attr("transform", "translate(" + margin + "," + margin + ")");

	var array = d3.shuffle(d3.range(n));

	var rectHeight = 30,
	rectWidth = (width/n) * 1;

	var rectData = array.map(function(v, i) {
	return {
	value: v,
	index: i,
	array: 0
	};
	});

	var rectOrig = svg.append("g")
	.attr("class", "orig row")
	.selectAll("rect")
	.data(rectData)
	.enter().append("rect")
	.attr({
	"class": "orig",
	"id": function(d) { return "orig_" + d.index;},
	"x": 0,
	"y": x(0),
	"height": rectHeight,
	"width": rectWidth
	})
	.style("fill-opacity", function(d) { return d.value/n })
	.transition().duration(duration)
	.attr("x", function(d) {return x(d.index)})


	var rectSorted = svg.append("g")
	.attr("class", "sorted row")
	.selectAll("rect")
	.data(rectData)
	.enter().append("rect")
	.attr({
	"class": "sorted",
	"id": function(d) { return "sorted_" + d.index;},
	"x": 0,
	"y": x(0),
	"height": rectHeight,
	"width": rectWidth
	})
	.style("fill-opacity", function(d) { return d.value/n })
	.transition().duration(duration)
	.attr("x", function(d) {return x(d.index)})

	setTimeout(function() { sortedRects(); }, duration * 1);

	function sortedRects() {

	for (i=0; i<n; i++) {
	d3.selectAll("#sorted_" + i)
	.transition().duration(duration)
	.ease("quad-in")
	.attr("y", 10)
	.transition().duration(duration * 1.5)
	.ease("quad-out")
	.attr("x", function(d) {return x(d.value)})
	.attr("y", 60)
	}

	setTimeout(function() {returnRects()}, duration * 2.5);

	}

	function returnRects() {

	for(i=0; i<n; i++) {
	d3.select("#sorted_" + i)
	.transition().duration(duration)
	.attr("x", function(d) {return x(d.index)})
	.attr("y", 0)
	}

	setTimeout(function() { shuffleRects(); }, duration * 1.5);

	}


	function shuffleRects() {

	array = d3.shuffle(array)

	for (i=0; i<array.length; i++) {

	d3.select("#sorted_" + i).data()[0].index = array[i]
	d3.select("#orig_" + i).data()[0].index = array[i]

	d3.select("#sorted_" + i)
	.transition().duration(duration)
	.attr("x", function(d) { return x(d.index) })

	d3.select("#orig_" + i)
	.transition().duration(duration)
	.attr("x", function(d) { return x(d.index) })

	}

	setTimeout(function() { sortedRects(); }, duration * 1);

	}

	</script>
	</html>