D3 Stacked Bar Chart with JSON data

D3 Stacked Bar Chart with JSON data and customize

by Khadeer Mohammed

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="ChartBox"></div>

CSS

body { 
  font: 12px/1.4 arial;
  background: rgba(0,0,0,.1);
  text-align: center;
  color: #333;
}
text {
  fill: #555;
}
.axis line,
.axis path {
  fill: none;
  stroke: rgba(0,0,0,.2);
  shape-rendering: crispEdges;
}
.ChartBox {
  padding: 1em;
  display: inline-block;
  background: #fff;
  box-shadow: 0 2px 3px rgba(0,0,0,.1);
  border-radius: 3px;
  position: relative;
}
.Cont {
  display: block;
  background: #fff;
  padding: 1em;
  font-size: 15px;
  text-align: left;
  margin: 1em;
}
.Tooltip {
  padding: 5px 10px;
  position: absolute;
  white-space: nowrap;
  background: rgba(0,0,0,.8);
  color: #fff;
  border-radius: 3px;
  display: none;
}
.Tooltip:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  border: 5px solid transparent;
  border-right-color: rgba(0,0,0,.8);
  margin-top: -5px;
}
.Tooltip.Right:after {
  top: 50%;
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: rgba(0,0,0,.8);
}
.GridLines line {
  stroke: rgba(0,0,0,.05);
  shape-rendering: crispEdges;
}
.Title {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  padding: 10px 0;
}
.Legends ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.Legends ul li {
  padding: 1em 1em .2em;
  line-height: 1.2;
  display: inline-block;
}
.Legends li > :first-child, .Legends li > :last-child {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.Legends li > :last-child {
  margin-right: 0;
  color: #555;
}
.Legends.Right {
  width: 150px;
  vertical-align: top;
  display: inline-block;
}
.Legends.Right ul {
  margin-top: 0;
}
.Legends.Right ul li {
  text-align: left;
  padding: 10px 0;
  display: block;
}
.Legends.Right li > :first-child {
  margin-right: 0;
  width: 35px;
}
.Legends.Right li > :last-child {
  width: calc(100% - 35px)
}
.Legends li line {
  stroke-width: 2.5px;
}

JavaScript

var data = [{"interest_rate":"< 5%","abc1":60,"abc2":1,"abc3":1},{"interest_rate":"5-10%","abc1":2,"abc2":1,"abc3":1},{"interest_rate":"10-15%","abc1":15,"abc2":1,"abc3":1},{"interest_rate":"15-20%","abc1":2,"abc2":1,"abc3":1}];

var margin = {
        top: 20,
        right: 20,
        bottom: 40,
        left: 60
    },
    width = 450 - margin.left - margin.right,
    height = 315 - margin.top - margin.bottom,
    that = this;


var x = d3.scale.ordinal().rangeRoundBands([0, width], .3);

var y = d3.scale.linear().rangeRound([height, 0]);

var color = d3.scale.category20();

var xAxis = d3.svg.axis().scale(x).orient("bottom");

var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".0%"));

var svg = d3.select(".ChartBox")
	.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 + ")");

color.domain(d3.keys(data[0]).filter(function(key) {
    return key !== "interest_rate";
}));


data.forEach(function(d) {
    var y0 = 0;

    d.rates = color.domain().map(function(name) {
        console.log();;
        return {
            name: name,
            y0: y0,
            y1: y0 += +d[name],
            amount: d[name]
        };
    });
    d.rates.forEach(function(d) {
        d.y0 /= y0;
        d.y1 /= y0;
    });

    console.log(data);
});

data.sort(function(a, b) {
    return b.rates[0].y1 - a.rates[0].y1;
});

x.domain(data.map(function(d) {
    return d.interest_rate;
}));

svg.append("g")
	.attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
	.attr("class", "y axis")
  .call(yAxis);

var layer = svg.selectAll(".layer")
	.data(data)
  .enter().append("g")
  .attr("class", "layer")
  .attr("transform", function(d) {
    return "translate(" + x(d.interest_rate) + ",0)";
	});

layer.selectAll("rect")
	.data(function(d) {
    return...