I am working on D3.js where I am exploring each and every aspects of D3. While Exploring Grouped Bar Chart I can across to read file through JSON (not via CSV).

If you can see in Grouped Bar Chart they are using 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 JSON file. How can I convert this CSV file to JSON file and generate the same graph? please help.

EDIT

I customize this graph accoring to my Need. Here is 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 have hard coded all the values, and graph is ing out in a nice format.

Now I am writing a web services using JAXB to send same data using JSON format.

{
"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"
}
]
}

How can I parse it now ?

I am working on D3.js where I am exploring each and every aspects of D3. While Exploring Grouped Bar Chart I can across to read file through JSON (not via CSV).

If you can see in Grouped Bar Chart they are using 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 JSON file. How can I convert this CSV file to JSON file and generate the same graph? please help.

EDIT

I customize this graph accoring to my Need. Here is 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 have hard coded all the values, and graph is ing out in a nice format.

Now I am writing a web services using JAXB to send same data using JSON format.

{
"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"
}
]
}

How can I parse it now ?

• javascript
• jquery
• json
• csv
• d3.js

Share Improve this question Follow edited Jun 9, 2014 at 8:52 Free-Minded asked Jun 9, 2014 at 6:50 Free-MindedFree-Minded 5,43066 gold badges5252 silver badges100100 bronze badges 11

• It doesn't matter in which form you store the data. d3 works with arrays and objects, not JSON or CSV. So it makes no difference at all where the data came from. No need to convert the CSV file to a JSON file. – Felix Kling Commented Jun 9, 2014 at 6:58
• I am writing a web services to send json data, then how it will work? – Free-Minded Commented Jun 9, 2014 at 6:59
• 1 suppose I am generating this JSON -> {"ordernumbertrack": [{noOfCancellation": "12",noOfOrder": "30"},{noOfCancellation": "7","noOfOrder": "15"},{"noOfCancellation":"15","noOfOrder": "35"}]} – Free-Minded Commented Jun 9, 2014 at 7:01
• That's a different issue then. Do you literally just want to covert this one CSV example to JSON? Either you open up a text editor and write the file manually or you use your favorite scripting language to parse the file, convert the data to JSON and save it to a file. Not sure what kind of answer you expect? – Felix Kling Commented Jun 9, 2014 at 7:03
• I don't understand, what does the JSON posted in the ment have to do with the rest of your question? – Felix Kling Commented Jun 9, 2014 at 7:03

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 4

Finally I created Grouped Bar Chart using JSON data. I have written web services which will send JSON data to D3.

My JSON is same as above I posted in Question

Only the change I have done in D3 is ..

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

I can't expect It is as simple as that :)