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