How to trigger update to chart based on dropdown selection

1

Hi - I have a data dashboard that shows several indicators depending on what the user selected in the dropdown.

Code: https://github.com/SabahatPK/RoundTwo
This is how I expect the code to work - mostly all found in main.js:
1 - Load pages with default graphs (b/c genderFlag is false).
2 - User selects other option from dropdown; genderFlag gets reset to True.
3 - Page should switch from default graphs to new set of graphs.

I need something to trigger a rerun of the code that invokes the constructor function, StackedArea.

I’m no React expert but I recognize that the question I am asking is very similar to the problems that React was designed to solve.

The problem is that I don’t want to use React (b/c I am using d3 and do not want to make my life more complicated (yet) by trying to learn how to integrate the 2 libraries).

Any help would be much appreciated - thank you!

2

Hello!

The simplest answer would be to surround the code that builds the chart with a function that gets called when the select changes. For example:

function createChart() {
  // Clean the chart/svg
  // Build the chart
}

document.querySelector('.my-select').onchange = createChart;
1 Like