AlessandraSozzi/index.html

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

<head>
	<style>
	.chart div {
		font: 10px sans-serif;
		background-color: steelblue;
		text-align: right;
		padding: 3px;
		margin: 1px;
		color: white;
	}
	.chart rect {
	   	stroke: white;
		fill: steelblue;
	}
	</style>
	<title> TEST </title>
</head>

<body>

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

<script>

	var nBars = 6;

	var margin = {top: 30, right: 20, bottom: 20, left: 20},
    	width = 500 - margin.left - margin.right,
    	height = 300 - margin.top - margin.bottom;


	var dragging = {};

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


	var y = d3.scale.ordinal()
    	.domain(dimensions = d3.range(nBars))
    	.rangePoints([0,height],1);


	var chart = d3.select("body")
   		.append("svg")
     	.attr("class", "chart")
    	.attr("width", width + margin.left + margin.right)
    	.attr("height", height + margin.top + margin.bottom);

   	var g = chart.selectAll(".dimension")
      	.data(dimensions)
    	.enter().append("g")
      	.attr("class", "dimension")
      	.attr("transform", function(d) { return "translate(0," + y(d) + ")"; })
      	.call(d3.behavior.drag()
	        .origin(function(d) {
	        	return {y: y(d)}; })
	        .on("dragstart", function(d) {
				dragging[d] = y(d);
				sel = d3.select(this);
				sel.moveToFront();
	        })
	        .on("drag", function(d) {
	          	dragging[d] = Math.min(height, Math.max(0, d3.event.y));
	          	dimensions.sort(function(a, b) { return position(a) - position(b); });
	          	y.domain(dimensions);
	          	g.attr("transform", function(d) {
	        		return "translate(0," + position(d) + ")"; })
	        })
	        .on("dragend", function(d) {
	          	delete dragging[d];
	          	transition(d3.select(this)).attr("transform", "translate(0," + y(d) + ")");
	        })
        );

   	g.append("rect")
		.attr("width", function(d) {
			return Math.random() * width; })
		.attr("height", height/nBars);


	d3.selection.prototype.moveToFront = function() {
	  	return this.each(function(){
	    	this.parentNode.appendChild(this);
	  	});
	};

	function position(d) {
	  	var v = dragging[d];
	  	return v == null ? y(d) : v;
	}

	function transition(g) {
	  	return g.transition().duration(500);
	}


</script>

</body>

## thumbnail.png

      
    Raw
  

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

	<head>
	<style>
	.chart div {
	font: 10px sans-serif;
	background-color: steelblue;
	text-align: right;
	padding: 3px;
	margin: 1px;
	color: white;
	}
	.chart rect {
	stroke: white;
	fill: steelblue;
	}
	</style>
	<title> TEST </title>
	</head>

	<body>

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

	<script>

	var nBars = 6;

	var margin = {top: 30, right: 20, bottom: 20, left: 20},
	width = 500 - margin.left - margin.right,
	height = 300 - margin.top - margin.bottom;


	var dragging = {};

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


	var y = d3.scale.ordinal()
	.domain(dimensions = d3.range(nBars))
	.rangePoints([0,height],1);


	var chart = d3.select("body")
	.append("svg")
	.attr("class", "chart")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

	var g = chart.selectAll(".dimension")
	.data(dimensions)
	.enter().append("g")
	.attr("class", "dimension")
	.attr("transform", function(d) { return "translate(0," + y(d) + ")"; })
	.call(d3.behavior.drag()
	.origin(function(d) {
	return {y: y(d)}; })
	.on("dragstart", function(d) {
	dragging[d] = y(d);
	sel = d3.select(this);
	sel.moveToFront();
	})
	.on("drag", function(d) {
	dragging[d] = Math.min(height, Math.max(0, d3.event.y));
	dimensions.sort(function(a, b) { return position(a) - position(b); });
	y.domain(dimensions);
	g.attr("transform", function(d) {
	return "translate(0," + position(d) + ")"; })
	})
	.on("dragend", function(d) {
	delete dragging[d];
	transition(d3.select(this)).attr("transform", "translate(0," + y(d) + ")");
	})
	);

	g.append("rect")
	.attr("width", function(d) {
	return Math.random() * width; })
	.attr("height", height/nBars);


	d3.selection.prototype.moveToFront = function() {
	return this.each(function(){
	this.parentNode.appendChild(this);
	});
	};

	function position(d) {
	var v = dragging[d];
	return v == null ? y(d) : v;
	}

	function transition(g) {
	return g.transition().duration(500);
	}


	</script>

	</body>