All examples By author By category About

speedryan

Full window Github gist

proj2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3: Bar Charts </title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<style>

.button {
            display: inline-block;
            padding: 15px 15px;
            font-size: 12px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            outline: none;
            color: #fff;
            background-color: #000084;
            border: none;
            border-radius: 50%;
            box-shadow: 0 2px #999;
        }

.button:hover {background-color:  #C4150C}

.button:active {
            background-color:  #C4150C;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }

.button {
            position: relative;
            left: 530px;
            top:50px;

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

.button:hover {background-color:  #C4150C}

.button:active {
            background-color:  #C4150C;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }

</style>

</head>

<h1 align="center">Monthly Contracts</h1>

//Width and height
    var w = 800;
    var h = 450;
    var padding = 30;

var BA = [6, 6, 3, 5, 1, 3, 4, 8, 3, 3, 5, 5, 2, 5, 8, 4, 2,
                4,  5,  1,  3,  1,  4, 17, 11,  8,  2,  4,  4,  6,  8,  9,  9, 15,
                5, 21,  1,  1, 12,  7,  8,  8,  6, 13,  5, 11,  4, 23,  5,  5, 13,
                3];

var NG = [3, 3, 3, 2, 2, 2, 2, 3, 5, 3, 4, 9, 2, 1, 4, 4, 1, 2, 4, 3, 2, 0,2, 5,
            3, 2, 2, 1, 1, 2, 3, 0,2, 5, 1, 3, 3, 0,4, 3, 2, 5, 5, 2, 3, 1, 2, 3, 2,
            1, 3, 2];

var GA = [ 8, 11, 14,  9, 12, 13, 11, 17, 12, 21, 23, 19, 15, 22, 11,  4,  5,
                    14,  7, 11,  7, 14,  9, 26, 13, 18, 10, 16, 16, 14, 18, 15,  7,  6,
                    19, 26, 16,  5, 23,  7,  9, 16, 18, 15, 13, 11, 16, 24, 10, 13, 11,
                    3,  1];

var AV = [ 1,  8,  8, 10,  6, 13, 23,  8,  7,  7, 10, 28,  6,  9, 10,  6,  5,
                    8,  5,  2,  8,  3,  8, 14,  5,  7,  4,  2, 0,  4,  4,  4,  4, 13,  6,
                    4,  2,  2,  4, 0, 2,  2,  6,  4,  5,  7,  4,  9,  4,  3,  2];

var ax = ['2011-10','2011-11', '2011-12', '2012-01', '2012-02', '2012-03', '2012-04',
            '2012-05', '2012-06', '2012-07', '2012-08', '2012-09', '2012-10',
            '2012-11', '2012-12', '2013-01', '2013-02', '2013-03', '2013-04',
            '2013-05', '2013-06', '2013-07', '2013-08', '2013-09', '2013-10',
            '2013-11', '2013-12', '2014-01', '2014-02', '2014-03','2014-04',
            '2014-05', '2014-06', '2014-07', '2014-08', '2014-09', '2014-10',
            '2014-11','2014-12', '2015-01',  '2015-02','2015-03', '2015-04',
            '2015-05', '2015-06', '2015-07', '2015-08', '2015-09', '2015-10',
            '2015-11', '2015-12', '2016-01'];

var monthFormat = d3.time.format("%b");
    var yearFormat = d3.time.format("%y");

var xScale = d3.scale.ordinal()
                .domain(d3.range(GA.length))
                .rangeRoundBands([0, w], 0.05);

var xScale2 = d3.scale.ordinal()
            .domain(ax)
            .rangePoints([0, w - 15],1.1);

var yScale = d3.scale.linear()
                .domain([0, d3.max(AV)])
                .range([0, h]);

//Define X axis
        var xAxis = d3.svg.axis()
                .scale(xScale2)
                .orient("bottom");

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

//Create bars
        svg.selectAll("rect")
                .data(NG)
                .enter()
                .append("rect")
                .attr("x", function (d, i) {
                    return xScale(i);
                })
                .attr("y", function (d) {
                    return h - yScale(d);
                })
                .attr("width", xScale.rangeBand())

.attr("height", function (d) {
                    return yScale(d);
                })
                .attr("fill", function (d) {
                    return "rgb(0, 0, " + (d * 25) + ")";
                })

.on("click", function () {
                    sortBars();
                    sorttxt();
                    sortax();
                })

;

//Create labels
        svg.selectAll("text")
                .data(NG)
                .enter()
                .append("text")
                .attr("id", "labtext")
                .text(function (d) {
                    return d;
                })
                .attr("text-anchor", "middle")
                .attr("x", function (d, i) {
                    return xScale(i) + xScale.rangeBand() / 2;
                })
                .attr("y", function (d) {
                    return h - yScale(d) + 14;
                })
                .attr("font-family", "sans-serif")
                .attr("font-size", "11px")
                .attr("fill", "white")

;

svg.append("g")
            .attr("class", "x axis")
            .attr("transform",  "translate(-5,460)" )
            .call(xAxis)
            .selectAll("text")
            .attr("id", "axtext")
            .attr("font-size", "11px")
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform",  "rotate(-90)" )

;

svg.selectAll(".tick")
            .data(NG)
            .enter()
    ;

//Define sort order flag
        var sortOrder = true;

//Define sort function
        var sortBars = function () {

//Flip value of sortOrder
            sortOrder = !sortOrder;

svg.selectAll("rect")
                    .sort(function (a, b) {
                        if (sortOrder) {
                            return d3.ascending(a, b);
                        } else {
                            return d3.descending(a, b);
                        }
                    })
                    .transition()
                    .delay(function (d, i) {
                        return i * 20;
                    })
                    .duration(100)
                    .attr("x", function (d, i) {
                        return xScale(i);
                    });

};

//Define sort function
        var sorttxt = function () {

//Flip value of sortOrder
            sortOrder = sortOrder;

svg.selectAll("#labtext")
                    .sort(function (a, b) {

if (sortOrder) {
                            return d3.ascending(a, b);

} else {
                            return d3.descending(a, b);
                        }
                    })
                    .transition()
                    .delay(function (d, i) {
                        console.log(d);
                        return i * 20;
                    })
                    .duration(700)

.attr("x", function (d, i) {
                        return xScale(i) + 7;
                    });

};

//Define sort function
            var sortax = function () {

//Flip value of sortOrder
                sortOrder = sortOrder;

svg.selectAll(".tick")
                        .sort(function (a, b) {
                            if (sortOrder) {
                                return d3.ascending(a, b);
                            } else {
                                return d3.descending(a, b);
                            }
                        })
                        .transition()
                        .delay(function (d, i) {
                            return i * 20;
                        })
                        .duration(100)
                        .attr("transform", function (d, i) {
                            return "translate(" + xScale(i)  +",0)"
                        });

};

//On click, update
        d3.select("button1")
                .on("click", function () {

//Update all rects
                    svg.selectAll("rect")
                            .data(NG)
                            .transition()
                            .delay(function (d, i) {
                                return i / NG.length * 1000;
                            })
                            .duration(60)
                            .attr("y", function (d) {
                                return h - yScale(d);
                            })
                            .attr("height", function (d) {
                                return yScale(d);
                            })
                            .attr("fill", function (d) {
                                return "rgb(0, 0, " + (d * 25) + ")";
                            });

//Update all labels
                    svg.selectAll("#labtext")
                            .data(NG)
                            .transition()
                            .delay(function (d, i) {
                                return i / NG.length * 1000;
                            })
                            .duration(120)
                            .text(function (d) {
                                return d;
                            })
                            .attr("x", function (d, i) {
                                return xScale(i) + xScale.rangeBand() / 2;
                            })
                            .attr("y", function (d) {
                                return h - yScale(d) + 14;
                            });

});

d3.select("button2")
                .on("click", function () {

//Update all rects
                    svg.selectAll("rect")
                            .data(BA)
                            .transition()
                            .delay(function (d, i) {
                                return i / BA.length * 1000;
                            })
                            .duration(60)
                            .attr("y", function (d) {
                                return h - yScale(d);
                            })
                            .attr("height", function (d) {
                                return yScale(d);
                            })
                            .attr("fill", function (d) {
                                return "rgb(0, 0, " + (d * 25) + ")";
                            });

//Update all labels
                    svg.selectAll("#labtext")
                            .data(BA)
                            .transition()
                            .delay(function (d, i) {
                                return i / BA.length * 1000;
                            })
                            .duration(120)
                            .text(function (d) {
                                return d;
                            })
                            .attr("x", function (d, i) {
                                return xScale(i) + xScale.rangeBand() / 2;
                            })
                            .attr("y", function (d) {
                                return h - yScale(d) + 14;
                            });

});
                     svg.selectAll(".tick")
                        .data(BA)
                        .enter()
                     ;

d3.select("button3")
                .on("click", function () {

//Update all rects
                    svg.selectAll("rect")
                            .data(GA)
                            .transition()
                            .delay(function (d, i) {
                                return i / GA.length * 1000;
                            })
                            .duration(60)
                            .attr("y", function (d) {
                                return h - yScale(d);
                            })
                            .attr("height", function (d) {
                                return yScale(d);
                            })
                            .attr("fill", function (d) {
                                return "rgb(0, 0, " + (d * 25) + ")";
                            });

//Update all labels
                    svg.selectAll("#labtext")
                            .data(GA)
                            .transition()
                            .delay(function (d, i) {
                                return i / GA.length * 1000;
                            })
                            .duration(120)
                            .text(function (d) {
                                return d;
                            })
                            .attr("x", function (d, i) {
                                return xScale(i) + xScale.rangeBand() / 2;
                            })
                            .attr("y", function (d) {
                                return h - yScale(d) + 14;
                            });
                });

// update data on the ticks
    svg.selectAll(".tick")
                         .data(GA)
                         .enter()
    ;

d3.select("button4")
                 .on("click", function () {

//Update all rects
                                svg.selectAll("rect")
                                        .data(AV)
                                        .transition()
                                        .delay(function (d, i) {
                                            return i / AV.length * 1000;
                                        })
                                        .duration(60)
                                        .attr("y", function (d) {
                                            return h - yScale(d);
                                        })
                                        .attr("height", function (d) {
                                            return yScale(d);
                                        })
                                        .attr("fill", function (d) {
                                            return "rgb(0, 0, " + (d * 25) + ")";
                                        });

//Update all labels
                                svg.selectAll("#labtext")
                                        .data(AV)
                                        .transition()
                                        .delay(function (d, i) {
                                            return i / AV.length * 1000;
                                        })
                                        .duration(120)
                                        .text(function (d) {
                                            return d;
                                        })
                                        .attr("x", function (d, i) {
                                            return xScale(i) + xScale.rangeBand() / 2;
                                        })
                                        .attr("y", function (d) {
                                            return h - yScale(d) + 14;
                                        });

// update data on the ticks
                     svg.selectAll(".tick")
                             .data(GA)
                             .enter()
                     ;

});

</script>

https://d3js.org/d3.v3.min.js