Nested Input dynamic selection

Community Help
1

I am trying to see if there is a way to have the results of the first input, select the first (or last value) of the 2nd input. I see that you can specify a key value - but can that value be dynamic based on the previous input?

In the notebook example - when I select a different presidential term i.e. (2017 to 2021: Donald J. Trump), the year_introduced values change i.e. (2017, 2018, etc…) but none are selected by default

My test notebook is here Nested Input / mferro64 | Observable

Thanks for any help,

Mike

2

I would create the following…

presidentialYearMap = d3.group(presidential_term_2, d => d.year_introduced)

and replace the related code with the following…

viewof year_introduced_2 = Inputs.radio(presidentialYearMap, {key: Math.min(...presidentialYearMap.keys()), sort: true, unique: true, label: "Select year introduced"})

Setting the key: Math.min(...presidentialYearMap.keys()) is what selects the 2nd input. The logic will select the earliest year

1 Like
3

I like to use IIFEs for this:

viewof presidential_term_2 = (options => Inputs.radio(options, {
  key: "2021-2024: Joseph R. Biden",
  sort: true,
  unique: true,
  label: "Select Presidential Term"
}))(d3.group(bills_3, d => d.President))

viewof year_introduced_2 = (options => Inputs.radio(options, {
  // Select the last key.
  key: [...options.keys()].at(-1),
  sort: true,
  unique: true,
  label: "Select year introduced"
}))(d3.group(presidential_term_2, d => d.year_introduced))

viewof signed_governor_2 = (options => Inputs.radio(options, {
  // Find the previously selected key, or default to the first key.
  key: !!(this?.querySelector("input:checked")?.value ?? [...options.keys()].at(0)),
  sort: true,
  unique: true,
  label: "Signed by Governer"
}))(d3.group(year_introduced_2, d => d.action_classification === "executive-signature"))
2 Likes
4

This will work - appreciate the help!