Struggling to generate a stacked bar graph in D3.js. The axes are displaying correctly, but the data on the graph is not showing up. Any suggestions on what could be causing this issue?
JS:
var svg = d3.select("#recovery__table"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
aspect = width/height,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.align(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#717C8B", "#7FDDC3", "#39B3CD"]);
var stack = d3.stack();
data.forEach(function(d) {
d.year = d['trades.closed_half_year_year'];
d.loss = d['loss'];
d.recovered = d['recovered'];
d.recovery = d['in_recovery'];
d.total = d.loss + d.recovery + d.recovered;
});
var div = d3.select("body").append("div")
.attr("class", "tooltip3")
.style("opacity", "0");
x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
z.domain(d3.keys(data[0]).filter(function(key){ return key == 'loss' && key == 'recovered' && key == 'in_recovery' }));
g.selectAll(".serie")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("fill", function(d){ return z(d.keys); })
.attr("x", function(d) { return x(d.year); })
.attr("width", x.bandwidth())
.attr("y", function(d) { return y(d.total); })
.attr("height", function(d) { return y[0] - y[1]; })
.on("mouseover", function(d) {
var value = parseInt($(this).attr('data-value'));
div.transition()
.duration(200)
.style("opacity", .5);
div.html(d.data.year + "<br/>£" + total.formatMoney())
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
;
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.attr('x', 20)
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(5, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks(10).pop()))
.attr("dy", "0.35em")
.attr("text-anchor", "start")
.attr("fill", "#000");
var legend = g.selectAll(".legend")
.data(data)
.enter().append("g")
.attr('width', 100)
.attr("class", "legend")
.attr('transform', function(d, i) {
var horz = 100*i;
var vert = 0;
if (horz >= width) {
horz = 100 * (i - 3);
vert = 40;
}
return 'translate(' + horz + ',' + vert + ')';
})
.style("font", "10px sans-serif");
legend.append("rect")
.attr("x", "33%")
.attr("width", 18)
.attr("height", 18)
.attr("fill", z);
legend.append("text")
.attr("x", "43%")
.attr("y", 9)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(function(d) { return d; });
JSON example
[{"trades.closed_half_year_year":"2017","auctioncollectioninfos.total_advanced_amount_delinquent_and_collection_completed_gbp_daily":"£0.00","auctioncollectioninfos.total_crystallized_loss_gbp_daily":"£0.00","auctioncollectioninfos.total_outstanding_amount_delinquent_gbp_daily":"£","auctioncollectioninfos.total_advanced_amount_delinquent_gbp_daily":"£0.00","loss":"£0.00","recovered":"£0.00","in_recovery":"£0"},
{"trades.closed_half_year_year":"2016","auctioncollectioninfos.total_advanced_amount_delinquent_and_collection_completed_gbp_daily":"£123,456.78","auctioncollectioninfos.total_crystallized_loss_gbp_daily":"£0.00","auctioncollectioninfos.total_outstanding_amount_delinquent_gbp_daily":"£1,234,234","auctioncollectioninfos.total_advanced_amount_delinquent_gbp_daily":"£1,321,245.56","loss":"£0.00","recovered":"£457,468.31","in_recovery":"£1,890,567"},
{"trades.closed_half_year_year":"2015","auctioncollectioninfos.total_advanced_amount_delinquent_and_collection_completed_gbp_daily":"£3,345,768.54","auctioncollectioninfos.total_crystallized_loss_gbp_daily":"£555,555.08","auctioncollectioninfos.total_outstanding_amount_delinquent_gbp_daily":"£321,321","auctioncollectioninfos.total_advanced_amount_delinquent_gbp_daily":"£3,321,321.32","loss":"£456,324.33","recovered":"£2,324,234.345","in_recovery":"£333,333"}]
Looking to have the loss, recovery, and recovered values stacked on the graph, but so far no data is being displayed as mentioned earlier.
Any thoughts or suggestions would be appreciated!