I am searching for an effective method to input data from my MVC application into a d3.js bubble chart. Specifically, the standard bubble chart requires nested data in this format:
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{
"name": "CNN",
"size": 3938
}
]
},
{
"name": "graph",
"children": [
{
"name": "MTV",
"size": 3534
}
]
}
]
}
]
}
On the server side, I have a linq query accessing a SQL database:
var results = from a in db.Durations
where a.Category == "watch"
group a by a.Description
into g
select new
{
name = g.Key,
size = g.Select(d => new{d.Begin, d.End}).Sum(d => SqlFunctions.DateDiff("hh", d.Begin, d.End))
};
return Json(results, JsonRequestBehavior.AllowGet);
This linq query result, represented as Json, appears like this:
[{"name":"CNN","size":1950},{"name":"MTV","size":1680}]
I am unsure of the best approach to format and create the required nested structure using my query results.
- Utilize anonymous types on the server-side
- Adjust the linq-query on the server-side
- Apply d3.js nest on the client-side
- Implement a simpler bubble model if the nested structure is unnecessary
- Explore alternative methods beyond options 1-4
Any suggestions or advice would be greatly appreciated.