using d3.nest() i am attempting to allow a user to select a year within a Melbourne LGA, currently i have created the nested_data for which i need to use however i am not sure how to allow for the user to select the year and update a choropleth map. code that creates the data in nested form grouping the data by the LGA name and then the Date and returns the rows for each year for the LGA.
d3.csv("ACCIDENT_MASTER_SINGLE.csv").then(function(data){ var nested_data = d3.nest() .key(function(d) { return d.LGA_NAME; }) .key(function(d) { return parseInt(d.ACCIDENTDATE); }) .rollup(function(leaves) { return leaves.length; }) .entries(data); console.log(nested_data)i have no problem console logging the data [(console log of the nested data example)][2] my issue comes with attempting to visualise the data over a choropleth map using d3. the visualising of the program works when i only nest the data by the LGA name and the leaves.length values however when adding the secondary grouping of the year it does not work. this is the code used to visualise the code over the json map.
d3.json("VIC_LGAS_MGA.json").then(function(json) { for (var i = 0; i < nested_data.length; i++) { var dataState=n ested_data[i].key; var dataAccidents=n ested_data[i].value; for (var j=0 ; j < json.features.length; j++) { var jsonState=j son.features[j].properties.vic_lga__3;
if (dataState==j sonState) { json.features[j].properties.value=d ataAccidents; break; } } } svg.selectAll( "path") .data(json.features) .enter() .append( "path") .attr( "d", path) .attr( "class", function(d){ return "LGA_NAME" } ) .style( "stroke",
"transparent") .style( "opacity", 0.8) .on( "mouseover", mouseOver) .on( "mouseleave", mouseLeave) .on( "click", function(e,d) { createChart(d.properties.vic_lga__3); document.getElementById( "selected").innerHTML=d .properties.vic_lga__3 + ": " + numberWithCommas(d.properties.value)
+ " Accidents in " + Year; }) .style( "fill", function(d) { var value=d .properties.value; if (value) { console.log(d) console.log(d.properties.vic_lga__3 + ": " + value) return colorScale(value); } else { return "#ccc"; } })my objective is to allow for the user to select using a drop down menu which has already been created and when the user clicks '2019' or '2017' the visualisation will update with the values of the LGA's within that year they selected. any help would be appreciated, Thanks. [2]: https://i.stack.imgur.com/9ARvv.png [3]: https://i.stack.imgur.com/wuHJE.png
