D3.js - Bar Chart & Sorting

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

by Tyler N.

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="slider"></div>

JavaScript

$("#slider").slider({
    max: 50
});

$("#slider").slider({
    min: 10
});


$("#slider").slider({
    slide: function (event, ui) {
        var selection = $("#slider").slider("value");
        console.log(selection);
        
        //Width and height
        var w = 500;
        var h = 50;

        //Data
        var dataset = [];

        dataset.push(selection);

        console.log(dataset);        

        var rectangle = svg.selectAll("rect")
            .data(dataset);
        
        rectangle
            .enter()
            .append("rect");

        rectangle.attr("width", 20)
            .attr("height", function (d) { console.log('d is ' + d);
            return d;
        })
            .attr("x", function (d) {
            return 20;
        })
            .attr("y", function (d) {
            return 20;
        });


    }
});

//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", 100)
.attr("height", 100);