I am currently struggling with navigating through a JSON structure that I created in order to generate side-by-side donut charts. I suspect that my structure is not ideal and would greatly appreciate any guidance.
My inspiration comes from Mike Bostock's example found here: http://bl.ocks.org/mbostock/1305337, where he utilizes a .csv file for the data source.
In his example, Bostock uses d3.nest() to construct a nested data format with an array of flight origins:
var airports = d3.nest()
.key(function(d) { return d.origin; })
.entries(flights);
He then connects this new data format to a specific div element using D3 selection:
var svg = d3.select("body").selectAll("div")
.data(airports)
.enter().append("div")
This allows him to create a donut chart for each unique flight origin.
The structure of my JSON data appears as follows:
{"years": [
{
"year": 2015,
"type": "bestSellers",
"chartOne": [
{
"label": "smarties",
"value": 11
},
{
"label": "nerds",
"value": 13
},
{
"label": "dots",
"value": 16
},
{
"label": "sour patch kids",
"value": 61
}
],
"chartTwo": [
{
"label": "Pepsi",
"value": 36
},
{
"label": "sunkist",
"value": 13
},
{
"label": "coke",
"value": 34
}
]}
Being a computer science student with limited exposure to data structuring principles and d3.js, the hierarchy I have designed does not appear straightforward to me. Unsure if utilizing d3.nest() is necessary, I struggle with accessing data within chartOne and chartTwo using the current structure.
While I can reach the arrays within the charts with:
var chartOne = years[0].chartOne; var cartTwo = years[0].chartTwo;I aim to access both charts through a single object. Contemplating adding another array block to my JSON, I wonder if there might be a simpler solution available.