D3.js: how to read data from JSON in a chart of grouped charts

Question

I am working on D3.js where I study all aspects of D3. By studying the grouped chart diagram , I can view the file through JSON (not through CSV).

If you see a grouped chart diagram , they use data.csv

State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64
Years,65 Years and Over
CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672
FL,1140516,1938695,925060,1607297,4782119,4746856,3187797
IL,894368,1558919,725973,1311479,3596343,3239173,1575308
PA,737462,1345341,679201,1203944,3157759,3414001,1910571

I want to build the same graph, but with a JSON file. How can I convert this CSV file to a JSON file and create the same schedule? , please, help.

EDIT

I am customizing this schedule according to my need. Here are my data.csv

State,Orders,Abandoned
0,300,500
1,400,600
2,500,700
3,600,800
4,700,900
5,800,1000
6,900,1100
7,1000,1200
8,700,900
9,600,700
10,550,750

So, here I hard-coded all the values, and the graph comes out in a good format.

-, JAXB JSON.

{
"ordernumbertrack": [
{
  "state":1,
  "noOfCancellation": "12",
  "noOfOrder": "30"
},
{
  "state":2,
  "noOfCancellation": "7",
  "noOfOrder": "15"
},
{
  "state":3,
  "noOfCancellation": "15",
  "noOfOrder": "35"
},
{
  "state":4,
  "noOfCancellation": "5",
  "noOfOrder": "18"
},
{
  "state":5,
  "noOfCancellation": "10",
  "noOfOrder": "55"
},
{
  "state":6,
  "noOfCancellation": "8",
  "noOfOrder": "45"
},
{
  "state":7,
  "noOfCancellation": "5",
  "noOfOrder": "20"
},
{
  "state":8,
  "noOfCancellation": "6",
  "noOfOrder": "30"
},
{
  "state":9,
  "noOfCancellation": "4",
  "noOfOrder": "22"
},
{
  "state":10,
  "noOfCancellation": "17",
  "noOfOrder": "40"
},
{
  "state":11,
  "noOfCancellation": "2",
  "noOfOrder": "14"
},
{
  "state":12,
  "noOfCancellation": "5",
  "noOfOrder": "18"
}
]
}

?

Answer 1

, JSON. -, JSON D3.

JSON , ,

, D3, ...

d3.json("rooturi/rest/ordernumbertracks", function(error, data) {
  var ageNames = d3.keys(data.ordernumbertrack[0]).filter(function(key) { return key !== "state";
});

data.ordernumbertrack.forEach(function(d) {
  d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
});

x0.domain(data.ordernumbertrack.map(function(d) { return d.state; }));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data.ordernumbertrack, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

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("");

var state = svg.selectAll(".state")
  .data(data.ordernumbertrack)
.enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x0(d.state) + ",0)"; });

, :)