D3 Examples - Stackover flow

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    var data = [
      { "category": "business", "Exceed": 10, "Fully Meets": 20, "Partially Meets": 30, "Does Not Meet": 30 },
      { "category": "leadership", "Exceed": 15, "Fully Meets": 5, "Partially Meets": 30, "Does Not Meet": 50    },
    ]
   
    
    var chart = d3.select("body").append("svg")
        .attr("width", 600)
        .attr("height", 500);
        
     var margin = { top: 70, right: 0, bottom: 150, left: 40 },
                 width = +chart.attr("width") - margin.left - margin.right,
                 height = +chart.attr("height") - margin.top - margin.bottom,
                 g = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
        //chart background color
        var bg = g.append("rect")
            .attr("width", "100%")
            .attr("height", "100%")
            .attr("fill", "#f8f8ff");
​
        //scale chart
        var x0 = d3.scaleBand()
            .rangeRound([0, width])
            .paddingInner(0.4);
​
        var x1 = d3.scaleBand()
            .padding(0.05);
​
        var y = d3.scaleLinear()
            .rangeRound([height, 0]);
​
        var z = d3.scaleOrdinal() //d3.schemeCategory20
         //   .range(["#0000ff", "#dcdcdc", "#696969", "#00008b"]);
        .range(["#00008b", "#696969", "#dcdcdc", "#0000ff"]);
​
        var columns = ['category', 'Does Not Meet', 'Partially Meets', 'Fully Meets', 'Exceed'];
​
        var keys = columns.slice(1);
    
​
        var color = d3.scaleOrdinal()
    .range(["#00008b", "#696969", "#dcdcdc", "#0000ff"]);
​
​
        x0.domain(data.map(function (d) { return d.category; }));
        x1.domain(keys).rangeRound([0, x0.bandwidth()]);
        y.domain([0, 100]).nice();
                
            //CREATE G FOR EACH CHART, AND STORE A REFERENCE TO THOSE G'S
        var chart = g.append("g")
            .selectAll("g")
            .data(data)
            .enter().append("g");
    
        chart.attr("transform", function (d) { return "translate(" + x0(d.category) + ",0)"; })
            .selectAll("rect")
            .data(function (d) { return keys.map(function (key) { return { key: key, value: d[key] }; }); })
            .enter().append("rect")
            .attr("x", function (d) { return x1(d.key); })
            .attr("y", function (d) {
                return y(d.value);
            })
            .attr("width", x1.bandwidth() - 7)
            .attr("height", function (d) { return height - y(d.value); })
            .attr("fill", function (d) { return z(d.key); })
​
            
                //APPEND AN AXIS TO THE CHART G'S
         chart.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + height + ")")
            .attr("x", function (d) { return x0(d.category); })
            .call(d3.axisBottom(x1))
            .selectAll("text")
             .attr("y", 15)
             .attr("x", 0)
            .attr("dy", ".35em")
            .attr("transform", "rotate(50)")
            .style("text-anchor", "start");;
        g.append("g")
            .attr("class", "axis")
            .call(d3.axisLeft(y).ticks(null, "s"))
            .append("text")
            .attr("x", 2)
            .attr("y", y(y.ticks().pop()) - 5)
            .attr("dy", "0.32em")
            .attr("fill", "#000")
            .attr("font-weight", "bold")
            .attr("text-anchor", "start")
            .text("Employees (%)");
​
​
        //chart title
        g.append("text")
            .attr("x", (width / 2) + 30)
            .attr("y", 1 - (margin.top / 2) + 20)
            .attr("text-anchor", "middle")
            .style("font-size", "16px")
            .style("font-weight", "bold")
            .style("text-decoration", "underline")
            .attr("font-family", "sans-serif")
            .text("Performance Distribution");
​
​
​
​
​
​
  </script>
</body>
​
    