I want to create a Stacked bar chart like http://bl.ocks.org/mbostock/3886208 . But I don't want to use CSV file.
How can I change this sample by using JSON data? Anyone could help?
2
-
Have you tried this: convertcsv.com/csv-to-json.htmOliver Houston– Oliver Houston2017-08-29 14:44:47 +00:00Commented Aug 29, 2017 at 14:44
-
Yes, I just did it. It doesn't work..LI WEIJIE– LI WEIJIE2017-08-29 15:02:13 +00:00Commented Aug 29, 2017 at 15:02
Add a comment
|
1 Answer
Your question is a bit vague but let's say we convert that CSV file to JSON data as:
var data = [{
"State": "VT",
"Under 5 Years": 32635,
"5 to 13 Years": 62538,
"14 to 17 Years": 33757,
"18 to 24 Years": 61679,
"25 to 44 Years": 155419,
"45 to 64 Years": 188593,
"65 Years and Over": 86649
}, {
"State": "VA",
"Under 5 Years": 522672,
"5 to 13 Years": 887525,
"14 to 17 Years": 413004,
"18 to 24 Years": 768475,
"25 to 44 Years": 2203286,
"45 to 64 Years": 2033550,
"65 Years and Over": 940577
},
...
Then you would need to fix the pre-processing (to get the keys and totals) as:
// fix pre-processing
var keys = [];
for (key in data[0]){
if (key != "State")
keys.push(key);
}
data.forEach(function(d){
d.total = 0;
keys.forEach(function(k){
d.total += d[k];
})
});
Then the rest of the example falls into place:
<!DOCTYPE html>
<style>
.axis .domain {
display: none;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
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,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = [{
"State": "VT",
"Under 5 Years": 32635,
"5 to 13 Years": 62538,
"14 to 17 Years": 33757,
"18 to 24 Years": 61679,
"25 to 44 Years": 155419,
"45 to 64 Years": 188593,
"65 Years and Over": 86649
}, {
"State": "VA",
"Under 5 Years": 522672,
"5 to 13 Years": 887525,
"14 to 17 Years": 413004,
"18 to 24 Years": 768475,
"25 to 44 Years": 2203286,
"45 to 64 Years": 2033550,
"65 Years and Over": 940577
}, {
"State": "WA",
"Under 5 Years": 433119,
"5 to 13 Years": 750274,
"14 to 17 Years": 357782,
"18 to 24 Years": 610378,
"25 to 44 Years": 1850983,
"45 to 64 Years": 1762811,
"65 Years and Over": 783877
}, {
"State": "WV",
"Under 5 Years": 105435,
"5 to 13 Years": 189649,
"14 to 17 Years": 91074,
"18 to 24 Years": 157989,
"25 to 44 Years": 470749,
"45 to 64 Years": 514505,
"65 Years and Over": 285067
}, {
"State": "WI",
"Under 5 Years": 362277,
"5 to 13 Years": 640286,
"14 to 17 Years": 311849,
"18 to 24 Years": 553914,
"25 to 44 Years": 1487457,
"45 to 64 Years": 1522038,
"65 Years and Over": 750146
}, {
"State": "WY",
"Under 5 Years": 38253,
"5 to 13 Years": 60890,
"14 to 17 Years": 29314,
"18 to 24 Years": 53980,
"25 to 44 Years": 137338,
"45 to 64 Years": 147279,
"65 Years and Over": 65614
}];
// fix pre-processing
var keys = [];
for (key in data[0]){
if (key != "State")
keys.push(key);
}
data.forEach(function(d){
d.total = 0;
keys.forEach(function(k){
d.total += d[k];
})
});
data.sort(function(a, b) {
return b.total - a.total;
});
x.domain(data.map(function(d) {
return d.State;
}));
y.domain([0, d3.max(data, function(d) {
return d.total;
})]).nice();
z.domain(keys);
g.append("g")
.selectAll("g")
.data(d3.stack().keys(keys)(data))
.enter().append("g")
.attr("fill", function(d) {
return z(d.key);
})
.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
.attr("x", function(d) {
return x(d.data.State);
})
.attr("y", function(d) {
return y(d[1]);
})
.attr("height", function(d) {
return y(d[0]) - y(d[1]);
})
.attr("width", x.bandwidth());
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) {
return d;
});
</script>
Comments
