Issues with JSON for Stacked Bars

673 views
Skip to first unread message

steve

unread,
May 2, 2011, 10:03:26 PM5/2/11
to d3-js
Hey all, I'm trying to generate a stacked bar chart from JSON data.

My data is a collection of entries like so:
{
"totalResults":171,
"entries":
[
{
"dimensions":
{
"flowTimeMinute":"0",
"flowTimeDay":"null",
"flowTimeMonth":"null",
"protocolIdentifier":"6",
"flowTimeYear":"2011",
"flowTimeHour":"null",
"observationDomainId":"49"
},
"metrics":
{
"octetTotalCount":
{
"sum":334843.0
}
}
},
...
]
}


When I run the following code:

d3.json("fastip-test.json", function(json) {
var dimensions = _.pluck(json.entries, 'dimensions');
var nested = d3.nest(dimensions).key(function(d) { return
d.protocolIdentifier; }).entries();
});

I get the following error from line 83 of d3.js: "Uncaught TypeError:
Cannot read property 'length' of undefined". The error is thrown when
trying to do the nesting above, any thoughts on why this is happening,
or if there is a better way to achieve this? I'm trying to take this
JSON, with multiple nesting levels, and produce an array of entries
nested/grouped by "protocolIdentifier".
Thanks

Martin Daniel

unread,
May 3, 2011, 5:41:27 AM5/3/11
to d3...@googlegroups.com
Hi Steve,

I am not an expert but it looks like nesting method is slightly different in d3 than Protovis.

In Protovis I could actually nest an array by passing the argument inside pv.nest(data). In d3 I rather use the map method.

So in your case I would try  :

d3.nest().key(function(d) { return d.protocolIdentifier;}).map(dimensions);

Martin

2011/5/3 steve <stephe...@gmail.com>



--
Martin DANIEL | 55 | fifty-five.com | 6 rue de Lisbonne | 75 008 Paris | 01 71 18 23 79 | 06 23 51 88 91

steve

unread,
May 3, 2011, 12:02:18 PM5/3/11
to d3-js
That worked perfectly, thanks Martin!

On May 3, 2:41 am, Martin Daniel <mar...@fifty-five.com> wrote:
> Hi Steve,
>
> I am not an expert but it looks like nesting method is slightly different in
> d3 than Protovis.
>
> In Protovis I could actually nest an array by passing the argument inside *
> pv.nest(data). I*n d3 I rather use the *map* method*.*
> *
> *
> So in your case I would try * :*
> *
> *
> *d3.nest().key(function(d) { return d.protocolIdentifier;}).map(dimensions);
> *
>
> Martin
>
> 2011/5/3 steve <stephen.b...@gmail.com>

steve

unread,
May 3, 2011, 2:24:04 PM5/3/11
to d3-js
OK followup question...

I now have my data nested and ready via the code:

d3.json("fastip-test.json", function(json) {
var dimensions = json.entries.map(function(d){return
d.dimensions;});
var nested = d3.nest().key(function(d) { return
d.protocolIdentifier; }).map(dimensions);
}

but I'm now trying to use that to populate layers for the stacked bar
chart. My code is as follows:

d3.json("fastip-test.json", function(json) {
var dimensions = json.entries.map(function(d){return
d.dimensions;});
var nested = d3.nest().key(function(d) { return
d.protocolIdentifier; }).map(dimensions);

var chart = d3.select("body").append("svg:svg")
.attr("class", "chart")
.attr("width", w * (dimensions.length - 1))
.attr("height", h);

var layers =
chart.selectAll("g.layer").data(nested).enter().append("svg:g")
.attr("fill", function(d, i) { return color(i / (4)); })
.attr("class", "layer");
}

But layers var is empty. I expect this is because "nested" is an
object and that d3 can't iterate through it easily. I've tried
writing a function for data, like so:

var layers = chart.selectAll("g.layer").data(function(d){
for (var key in nested) {
layers[d] = nested[key];
return d;
//return nested[key];
}
}).enter().append("svg:g")
.attr("fill", function(d, i) { return color(i / (4)); })
.attr("class", "layer");


But this doesn't seem to give me what I need. Any tips to get this
data into layers greatly appreciated.
Reply all
Reply to author
Forward
0 new messages