bar chart with D3.js

by Abhishek Hingu

HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>Multi Series Span Chart (Vertical)</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="chart1" class="chart"></div>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    </body>
    <script type="text/javascript" src="main.js"></script>
</html>

CSS

.axis path,
    .axis line {
      fill: none;
      font: 10px sans-serif;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    .legend {
        padding: 5px;
        font: 10px sans-serif;
        background: yellow;
        box-shadow: 2px 2px 1px #888;
    }

JavaScript

$( document ).ready(function() {
    render_chart();
});

function render_chart(){
    var stack = d3.layout.stack();
    var dataset = {
                "categories": ['2017','2018'],
                "series": ["New York"],
                "colors": ["#3498db","#e74c3c","#2ecc71"],
                "layers": [
                        [
                            {"y":5,"y0":16,"month":"2017","avg":10},
                            {"y":4,"y0":15,"month":"2018","avg":9},
                        ],
                        
                    ]
                }

    n = dataset["series"].length, // Number of Layers
    m = dataset["layers"].length, // Number of Samples in 1 layer

    yGroupMax = d3.max(dataset["layers"], function(layer) { return d3.max(layer, function(d) { return d.y0; }); });
    yGroupMin = d3.min(dataset["layers"], function(layer) { return d3.min(layer, function(d) { return d.y; }); });

    var margin = {top: 50, right: 50, bottom: 50, left: 100},
        width = 300 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .domain(dataset["categories"])
        .rangeRoundBands([0, width], .08);

    var y = d3.scale.linear()
        .domain([0, 30])
        .range([height, 10]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickSize(5)
        .tickPadding(6)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var svg = d3.select("#chart1").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 layer = svg.selectAll(".layer")
        .data(dataset["layers"])
        .enter().append("g")
        .attr("class", "layer");

    var rect = layer.selectAll("rect")
        .data(function(d,i){d.map(function(b){b.colorIndex=i;return...