javascriptarraysjsond3.jsdot-operator

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


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?


Solution

  • 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.