D3.js - Bar Chart & Sorting

Use D3.js to sort in ascending & descending order, utilizing JS Objects.

by kunalvashist

HTML

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

CSS

.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

rect {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
rect:hover{
	fill: orange;
}

JavaScript

var data= [{
	"Groups" : "JUL 06, 2017",
	"group 1":3,
	"group 2":3,
	"group 3":3
},
{
	"Groups" : "JUL 09, 2017",
	"group 1":3,
	"group 2":1,
	"group 3":5
},
{
	"Groups" : "JUL 15, 2017",
	"group 1":1,
	"group 2":2,
	"group 3":3
},
{
	"Groups" : "JUL 25, 2017",
	"group 1":1,
	"group 2":2,
	"group 3":3
},
{
	"Groups" : "Apri 5, 2017",
	"group 1":3,
	"group 2":2,
	"group 3":3
}
,
{
	"Groups" : "Apri 6, 2017",
	"group 1":1,
	"group 2":1,
	"group 3":1
},
{
	"Groups" : "Apri 7, 2017",
	"group 1":1,
	"group 2":1,
	"group 3":1
},
{
	"Groups" : "Apri 8, 2017",
	"group 1":2,
	"group 2":1,
	"group 3":3
},
{
	"Groups" : "Apri 9, 2017",
	"group 1":1,
	"group 2":5,
	"group 3":4
},
{
	"Groups" : "Apri 10, 2017",
	"group 1":1,
	"group 2":2,
	"group 3":4
},
{
	"Groups" : "Apri 11, 2017",
	"group 1":3,
	"group 2":3,
	"group 3":3
},
{
	"Groups" : "Apri 12, 2017",
	"group 1":2,
	"group 2":2,
	"group 3":2
},
{
	"Groups" : "Apri 13, 2017",
	"group 1":1,
	"group 2":2,
	"group 3":3
},
{
	"Groups" : "Apri 14, 2017",
	"group 1":2,
	"group 2":1,
	"group 3":1
}
]

var margin = {top: 20, right: 20, bottom: 30, left: 40},
                        width = 960 - margin.left - margin.right,
                        height = 350 - margin.top - margin.bottom;
    
                    var svg = d3.select("body").append("svg")
                        .attr("width", width + margin.left + margin.right)
                        .attr("height", height + margin.top + margin.bottom)
                        .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
                    var divTooltip = d3.select("body").append("div").attr("class", "toolTip");
    
      var x0 = d3.scale.ordinal()
                            .rangeRoundBands([0, width], '0.6');
    
                        var x1 = d3.scale.ordinal();
    
                        var y = d3.scale.linear()
                            .range([height, 0]);
    
                        var...