How to get data re-filtered everytime slider event runs?

sabbyiqbal · October 6, 2019, 10:44pm

I want to reset the data everytime my slider event runs but I seem to be going in a loop. This is the sequence of events I am TRYING to create:

Data and chart loads up with all data, initially.
Slider runs and changes the beg and end dates. I capture those dates and trigger a filterData() event.
The filterData() event runs with new dates (from slider event) and should filter original data with new date parameters. This then triggers updateChart() event which takes updated filtered data and displays new chart.

I tried a bunch of things. Right now, the problem is that it does not recognize the variable data even though I made it global (which I’m not even confident is the right thing to do).

How and where can I filter data to reset it everytime slider runs?

My code:

github.com

SabahatPK/RoundOne/blob/master/js/main.js

//-----------------Initialize static bits---------------

let data;

let sliderBeginDate = new Date("1/1/2017");
let sliderEndDate = new Date("12/31/2018");

let margin = { left: 80, right: 20, top: 50, bottom: 100 };

let width = 600 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

let g = d3
  .select("#chart-area1")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

This file has been truncated. show original