sortedExample2.html

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 
	<title>D3: Ascending and descending sorts</title>

    <style type="text/css">



		body {
			background-color: #000;
		}

		/* New rules for styling buttons */
		#buttonContainer {
			margin-bottom: 10px;
		}

		button {
			padding: 15px;
		}

		svg {
			background-color: white;
		}

		g.bar text {
			font-family: Lato;
			font-size: 11px;
			fill: white;
			font-style: bold;
			text-anchor: middle;
			opacity: 0;
		}

		g.bar.highlight text {
			opacity: 1;
		}

/*		g.bar.highlight rect {  		 Both this is the one below work fine 
			fill: yellowgreen;
		}*/

		rect:hover {
			/*fill: #ff89fd;*/
			fill: yellowgreen;
		}

		.axis path,
		.axis line {
			fill: none;
			stroke: black;
			shape-rendering: crispEdges;
		}
		
		.axis text {
			font-family: sans-serif;
			font-size: 11px;
		}

		#tooltip {
				position: absolute;
				width: 100px;
				height: auto;
				padding: 10px;
				background-color: yellow;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 3px;
				-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				pointer-events: none;
			}
			
			#tooltip.hidden {
				display: none;
			}
			
			#tooltip p {
				margin: 0;
				font-family: sans-serif;
				font-size: 16px;
				line-height: 20px;
			}

	</style>
</head>
<body>

	<!-- New buttons to trigger sorting!
      use divs to setup buttons -->
	<div id="buttonContainer">
		<button id="sortAscending">Sort Ascending</button>
		<button id="sortDescending">Sort Descending</button>
	</div>
			<div id="tooltip" class="hidden">
			<p><strong>Value = </strong> <span id ="value">100 </span></p>
			<!-- <p><span id="value">100</span></p> -->
		</div>

	<script type="text/javascript">



		//Width, height, padding
		var w = 800;
		var h = 500;
		var padding = 25;
		
		//Array of dummy data values
		var dataset = [ 5, 8, 13, 19, 21, 22, 31, 26, 25, 23,
						16, 17, 15, 14, 11, 3, 6, 8, 3, 5 ];

		//Configure x and y scale functions
		var xScale = d3.scale.ordinal()
						.domain(d3.range(dataset.length))
						.rangeRoundBands([ padding, w - padding ], 0.1);

		var yScale = d3.scale.linear()
						.domain([ 0, d3.max(dataset) ])
						.rangeRound([ h - padding, padding ]);

		//Configure y axis generator
		var yAxis = d3.svg.axis()
						.scale(yScale)
						.orient("left")
						.ticks(5);
		
		//Create SVG element
		var svg = d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h);

		//Create groups
		var groups = svg.selectAll("g")
						.data(dataset)
						.enter()
						.append("g")
						.attr("class", "bar")
						.attr("transform", function(d, i) {
					  		return "translate(" + xScale(i) + ",0)";
						});
		var rects = groups.append("rect")
						  .attr("x", 0)
						  .attr("y", function(d) {
						  		return h - padding;
						  })
						  .attr("width", xScale.rangeBand())
						  .attr("height", 0)
						  .attr("fill", "dodgerblue")

////////////////
					.on("mouseover", function(d, i) {

					//Get this bar's x/y values, then augment for the tooltip
					var xPosition = parseFloat(d3.select(this).attr("x")) + xScale(dataset.indexOf(d));
					var yPosition = parseFloat(d3.select(this).attr("y"));
			
					//Update the tooltip position and value
					d3.select("#tooltip")
						.style("left", xPosition + "px")
						.style("top", yPosition + "px")						
						.select("#value")
						.text(d);
			   
					//Show the tooltip
					d3.select("#tooltip").classed("hidden", false);

			   })
			   .on("mouseout", function() {
			   
					//Hide the tooltip
					d3.select("#tooltip").classed("hidden", true);
					
			   });
////////////////
/*						.on("mouseover", function() {
							d3.select(this)
								.classed("highlight", true);
						})
						.on("mouseout", function() {
							d3.select(this)
								.classed("highlight", false);
						});*/

		//Add bar to each group

						  //.attr("fill", "#ff89fd");

		//Add label to each group
/*		groups.append("text")
			.attr("x", xScale.rangeBand() / 2)
			.attr("y", function(d) {
				return yScale(d) + 20;
			})
			.text(function(d) {
				return d;
			})*/

		//Transition rects into place
		rects.transition()
			.delay(function(d, i) {
				return i * 100;
			})
			.duration(1500)
			.attr("y", function(d) {
				return yScale(d);
			})
			.attr("height", function(d) {
				return h - padding - yScale(d);
			});
/*			.filter(function(d) {
				if (d < 12) {
					return true;
				}
				return false;
			})
			.attr("fill", "#00e0f4");*/

		//Create y axis
		svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(" + padding + ",0)")
			.attr("opacity", 0)
			.call(yAxis)
			.transition()
			.delay(2000)
			.duration(1500)
			.attr("opacity", 1.0);

		//Sorting logic
		d3.select("#sortAscending")
			.on("click", function() {

				groups.sort(function(a, b) {
  						return d3.ascending(a, b);
					})
					.transition()
					.delay(function(d, i) {
						return i * 50;  // gives it a smoother effect
					})
					.duration(1000)
					.attr("transform", function(d, i) {
						dataset = dataset.sort(function(a,b){return a- b})
				  		return "translate(" + xScale(i) + ",0)";
					});
 
			});

		//This is EXACTLY the same as above, except for:
		d3.select("#sortDescending")  //DEscending
			.on("click", function() {

				groups.sort(function(a, b) {
  						return d3.descending(a, b);  //DEscending
					})
					.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("transform", function(d, i) {
						dataset = dataset.sort(function(a,b){return b- a})
				  		return "translate(" + xScale(i) + ",0)";
					});

			});



	</script>
</body>
</html>