How to select JSON arrays with D3.js with . operator

Question

Im using D3.js to create a bar chart from a JSON file. I want the user to filter through different years and different countries. I can't seem to figure out how to select the different arrays from the JSON file.

My JSON is set up like this: (which could be wrong)

var NL = [
    j1996 = [20317, 27395, 29273, 27170, 19441],
    j1997 = [25267, 31331, 35193, 35299, 23005],
    j1998 = [25576, 30643, 35484, 35796, 23343]
]

var BE = [
    j1996 = [52317, 17395, 39273, 47170, 39441],
    j1997 = [35267, 13331, 15193, 15299, 13005],
    j1998 = [15576, 20643, 14284, 25796, 13343]
] 

Then I have buttons that load the data from the different years:

d3.select("#button1996")
    .on("click", function (d, i) {
        bars(j1996);
    })
d3.select("#button1997")
    .on("click", function (d, i) {
        bars(j1997);
    })
d3.select("#button1998")
    .on("click", function (d, i) {
        bars(j1998);
    })

bars function

function bars(data) {

max = d3.max(data)

var yScale = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, height])    

var xScale = d3.scale.ordinal()
    .domain(d3.range(0, data.length))
    .rangeBands([0, width], .2)    

var myChart = d3.select("#chart")

var bars = myChart.selectAll("rect.bar")
    .data(data)

//enter
bars.enter()
    .append("svg:rect")
    .attr("class", "bar")
    .style('fill', '#C64567')
    .attr('width', xScale.rangeBand())
    .attr('x', function(d,i){ return xScale(i); })
    .attr('height', 0)
    .attr('y', height)
}

This works

    d3.select("#button1996")
    .on("click", function (d, i) {
        bars(NL[0]);
    })

How can I toggle between the NL and BE arrays (in the future more) but remember the year that is selected last?

Answer 1

The problem seems to be that you try to have NL to be both an array and an object.

Your declaration

var NL = [
  j1996 = [20317, 27395, 29273, 27170, 19441],
  j1997 = [25267, 31331, 35193, 35299, 23005],
  j1998 = [25576, 30643, 35484, 35796, 23343]
]

gives the same result as

var NL = [
  [20317, 27395, 29273, 27170, 19441],
  [25267, 31331, 35193, 35299, 23005],
  [25576, 30643, 35484, 35796, 23343]
]

i.e., it is an array of arrays. So no hope to be accessing NL.j1996 this way (to be exact, you are also afecting each array to the corresponding global variable j199x).

If you want to use NL as an object, the syntax is the following:

var NL = {
  j1996 : [20317, 27395, 29273, 27170, 19441],
  j1997 : [25267, 31331, 35193, 35299, 23005],
  j1998 : [25576, 30643, 35484, 35796, 23343]
}

Then NL.j1996 won't create an error anymore.

Answer 2

var NL = [
    j1996 = [20317, 27395, 29273, 27170, 19441],
    j1997 = [25267, 31331, 35193, 35299, 23005],
    j1998 = [25576, 30643, 35484, 35796, 23343]
]

var BE = [
    j1996 = [52317, 17395, 39273, 47170, 39441],
    j1997 = [35267, 13331, 15193, 15299, 13005],
    j1998 = [15576, 20643, 14284, 25796, 13343]
] 

That is wrong format, NL and BE should be objects containing arrays like so :

var NL = {
    j1996 : [20317, 27395, 29273, 27170, 19441],
    j1997 : [25267, 31331, 35193, 35299, 23005],
    j1998 : [25576, 30643, 35484, 35796, 23343]
}

var BE = {
    j1996 : [52317, 17395, 39273, 47170, 39441],
    j1997 : [35267, 13331, 15193, 15299, 13005],
    j1998 : [15576, 20643, 14284, 25796, 13343]
}

As it is an object you cant call it like this :

d3.select("#button1996")
    .on("click", function (d, i) {
        bars(NL[0]);
    })

You have to do :

d3.select("#button1996")
    .on("click", function (d, i) {
        bars(NL['j1996']);// or 
        //bars(NL.j1996);
    })

Answer 3

Yout JSON is in a wrong format. Use something like that. You can access to your data with :

 data.NL[0], etc

Your JSON should have the following format :

{
"NL": [{
    "j1996": [20317, 27395, 29273, 27170, 19441],
    "j1997": [20317, 27395, 29273, 27170, 19441],
    "j1998": [20317, 27395, 29273, 27170, 19441]
}],
"NL": [{
    "j1996": [20317, 27395, 29273, 27170, 19441],
    "j1997": [20317, 27395, 29273, 27170, 19441],
    "j1998": [20317, 27395, 29273, 27170, 19441]
}]

}

Don't forget to validate your JSON with a tool like http://jsonlint.com/.