D3 Examples - BarChart

xxxxxxxxxx
 
<!DOCTYPE HTML>
<html>
​
<head>
    <title>ninjaPixel.js Bar Chart</title>
</head>
<style>
    .ninja-axis path,
    .ninja-axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    .ninja-background{
        fill: #333333;
        stroke: black;
    }
    text {
        font: 12px sans-serif;
        position: absolute;
    }
    .ninja-chartTitle {
        font: 18px sans-serif;
    }
    .yTitle,
    .xTitle {
        font: 16px sans-serif;
    }
    .d3-tip {
        line-height: 1;
        padding: 8px;
        background: rgba(100, 100, 100, 0.7);
        color: #fff;
        border-radius: 2px;
        font: 12px sans-serif;
        width: 100px;
    }
    /* Creates a small triangle extender for the tip */
    .d3-tip:after {
        box-sizing: border-box;
        display: inline;
        font-size: 10px;
        width: 100%;
        line-height: 1;
        color: rgba(100, 100, 100, 0.7);
        content: "\25BC";
        position: absolute;
        text-align: center;
    }
    /* Style northward tooltips differently */
    .d3-tip.n:after {
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
    }
    .ninja-horizontalGrid {
        stroke: lightgrey;
        opacity: 0.7;
    }
    .ninja-horizontalGridTopping {
        stroke: #333333;
        opacity: 0.7;
    }
</style>
​
<body>
    <div id="chart"></div>
    <div id="message"></div>
</body>
<script src="ninjaPixel.bundle.js" charset="utf-8"></script>
<script src="queue.js" charset="utf-8"></script>
<script>
    var barChart = new ninjaPixel.BarChart();
    barChart.transitionDuration(2000)
        .margin({
            top: 40,
            bottom: 250,
            left: 60,
            right: 30
        })
    .plotBackground(true)
    .y1Max(12)
    .transitionEase('elastic')
    .transitionDelay(function(d,i){return i*30;})
    .onMouseover(function (d, i) {
            d3.select('#message').text(d.x);
        })
    .height(500)
    .plotHorizontalGridTopping(true)
    .cornerRounding(0)
    .title('UK Christmas Number Ones')
    .yAxis1Title('Weeks at Number 1')
    .mouseOverItemOpacity(function(d,i){return d.opacity;})
    .xAxisTextTransform('rotate(-90) translate(-10,-13)');
    
    var toolTip = barChart.toolTip();
    toolTip.html(function(d){return '<i>'+d.artist + '</i><br/>'+ d.song});
    barChart.toolTip(toolTip);
​
​
    topHits = [];
​
    queue()
        .defer(d3.csv, "xmas-number-ones.csv", function (d) {
            topHits.push({
                x: d.Artist + " ... " + d.Year,
                y: +d.Weeks,
                song: d.Song,
                artist: d.Artist,
                year: +d.Year,
                color: 'lightsteelblue',
                opacity: 0.3
            });
        })
        .await(ready);
​
    function ready(error) {
​
        var filteredData = topHits.filter(function (d) {
            if (d.year >= 1980 & d.year < 2020) return d;
        });
​
        barChart.plot(d3.select("#chart")
            .datum(filteredData));
    }
</script>
​
</html>
​
    