I am in the process of creating a straightforward d3 bar chart () by utilizing this specific nested json file.
{
"clustername": "cluster1",
"children": [
{
"neighborhoodname": "Shaw",
"children": [
{
"totpop2000": "1005",
"children": [
{
"name": "demographic",
"children": [
{"name": "Black", "size2000":0.18},
{"name": "White", "size2000":0.6},
{"name": "Hispanic", "size2000":0.40},
{"name": "Asian", "size2000":0.10}
]
},
{
"name": "wellbeing",
"children": [
{"name": "Unemployment", "size2000":0.40},
{"name": "Poverty", "size2000":0.1},
{"name": "Without HS Education", "size2000":0.31}
]
},
{
"name": "crime",
"children": [
{"name": "Violent Crime", "size2000":0.09},
{"name": "Property Crime", "size2000":0.08}
]
},
{
"name": "housing",
"children": [
{"name": "Home Ownership", "size2000":0.34},
{"name": "Houses for Rent", "size2000":0.50}
]
}
]
}
]
}
]
}
In my JavaScript code, I have included the following logic to integrate the values marked as size2000 into the svg. However, there seems to be an issue with appending the correct set of data from my JSON file (it currently only retrieves the initial array/"clustername": "cluster1").
var data = d3.json("data/test.json", function(json) {
console.log(json);
var bar = chart2000.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * height + ")"; });
bar.append("rect")
.attr("width", function(d) { return x((d.size2000)*100); })
.attr("height", height - 1);
bar.append("text")
.attr("x", function(d) { return x((d.size2000)*100) - 3; })
.attr("y", height / 2)
.attr("dy", ".35em")
.text(function(d) { return (d.size2000)*100); });
});Could someone provide guidance on how to maintain the json data structure and successfully append the size2000 values to an svg? Any help is greatly appreciated!