Edit: The visualization now works but only with this small dataset. With my original dataset (which is at least ten times the size of the one posted below), nothing shows up in the visualization.
I have been trying to make a stacked bar chart like this: http://bl.ocks.org/mbostock/3886208 but using json instead. For some reason though, the bars will not show up. The JS code is exactly the same as the example code except for variable name changes:
var margin = {top: 20, right: 20, bottom: 20, left: 40},
width = 1000 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("body").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 + ")");
d3.json ("stats_reformat_short.json", function (error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Time"; }));
data.forEach(function(d) {
var y0 = 0;
d.concent = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.concent[d.concent.length - 1].y1;
});
x.domain(data.map(function(d) { return d.Time; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Concentration");
var time = svg.selectAll(".time")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x(d.Time) + ",0)"; });
time.selectAll("rect")
.data(function(d) { return d.concent; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
var legend = svg.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 0.1)
.attr("height", 0.1)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".15em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
stats_reformat_short.json
[
{
"Time":0,
"H2O":0.7223999972,
"Ca3SiO5":0.2775999921,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":0,
"H3SiO4-":0,
"Ca++":0,
"CaOH+":0,
"OH-":0,
"Vacancy":"0"
},
{
"Time":0,
"H2O":0.7223999972,
"Ca3SiO5":0.2775999921,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":0,
"H3SiO4-":0,
"Ca++":0,
"CaOH+":0,
"OH-":0,
"Vacancy":"0"
},
{
"Time":0.1011666667,
"H2O":0.722445376,
"Ca3SiO5":0.2775546219,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":1.66E-006,
"H3SiO4-":0.0007145257,
"Ca++":0.0021455429,
"CaOH+":3.01E-006,
"OH-":0.0035762526,
"Vacancy":"0"
},
{
"Time":0.2025,
"H2O":0.7224635218,
"Ca3SiO5":0.277536476,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":5.77E-006,
"H3SiO4-":0.000996856,
"Ca++":0.0029978343,
"CaOH+":1.00E-005,
"OH-":0.0049973131,
"Vacancy":"0"
},
{
"Time":0.3038333333,
"H2O":0.7224757574,
"Ca3SiO5":0.2775242411,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":1.19E-005,
"H3SiO4-":0.001183896,
"Ca++":0.0035669817,
"CaOH+":2.03E-005,
"OH-":0.005946632,
"Vacancy":"0"
},
{
"Time":0.4051666667,
"H2O":0.722485082,
"Ca3SiO5":0.277514916,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":1.92E-005,
"H3SiO4-":0.0013237783,
"Ca++":0.0039957417,
"CaOH+":3.31E-005,
"OH-":0.0066624743,
"Vacancy":"0"
},
{
"Time":0.5065,
"H2O":0.7224926814,
"Ca3SiO5":0.2775073166,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":2.77E-005,
"H3SiO4-":0.0014351806,
"Ca++":0.0043407829,
"CaOH+":4.80E-005,
"OH-":0.0072388754,
"Vacancy":"0"
},
{
"Time":0.611,
"H2O":0.7224993205,
"Ca3SiO5":0.2775006773,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":3.68E-005,
"H3SiO4-":0.0015308949,
"Ca++":0.0046383714,
"CaOH+":6.48E-005,
"OH-":0.0077369817,
"Vacancy":"0"
},
{
"Time":0.7155,
"H2O":0.7225050948,
"Ca3SiO5":0.2774949035,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":4.60E-005,
"H3SiO4-":0.0016128709,
"Ca++":0.0048938526,
"CaOH+":8.27E-005,
"OH-":0.0081655806,
"Vacancy":"0"
},
{
"Time":0.82,
"H2O":0.7225102312,
"Ca3SiO5":0.2774897666,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":5.54E-005,
"H3SiO4-":0.0016845349,
"Ca++":0.0051181417,
"CaOH+":0.0001016937,
"OH-":0.0085426217,
"Vacancy":"0"
},
{
"Time":0.9245,
"H2O":0.722514876,
"Ca3SiO5":0.2774851215,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":6.52E-005,
"H3SiO4-":0.0017480743,
"Ca++":0.0053181429,
"CaOH+":0.0001216663,
"OH-":0.0088794869,
"Vacancy":"0"
}
]
Thank you!