# can functions be values of radio buttons

**URL:** <https://talk.observablehq.com/t/can-functions-be-values-of-radio-buttons/2990>\
**Category:** Help\
**Created:** [March 30, 2020, 3:19pm UTC](https://talk.observablehq.com/t/can-functions-be-values-of-radio-buttons/2990 "2020-03-30T15:19:06Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ugadal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ugadal/32/2867_2.png) [@ugadal](https://talk.observablehq.com/u/ugadal)\
**Post date:** [March 30, 2020, 3:19pm UTC](https://talk.observablehq.com/t/can-functions-be-values-of-radio-buttons/2990/1 "2020-03-30T15:19:06Z")

</div>

> **[Untitled](https://observablehq.com/d/e736372c6eb497b5)**
>
> An Observable notebook by Coornaert David.

I have a couple a functions  
they’re in an array  
I can make a radio switch using values 0,1… toward function number in the array and use the function by array[valuechoosen]()…and this works  
I was wondering wether the function (names) could be passed straightfully as value in the radio switch, but then the viewof my radio select turns into string of the function…

```auto
ways=[d3.scaleLinear,d3.scaleLog]

```

```auto
viewof whichf = radio({
  options: [
    { label: 'linear', value: 0 },
    { label: 'log', value: 1},
    ],
  value: 0
})

```

```auto
fx={
return ways[whichf]()
  .domain([0.001, 10])
    .range([0,100])
}

```

# fx(5) works…

But I would like to do something like :

```auto
viewof whichf = radio({
  options: [
    { label: 'linear', value: d3.scaleLinear },
    { label: 'log', value: d3.scaleLog},
    ],
  value: d3.scaleLinear
})

```

afterthat whichf contains the text of the function…  
and is of type string…

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [March 30, 2020, 3:52pm UTC](https://talk.observablehq.com/t/can-functions-be-values-of-radio-buttons/2990/2 "2020-03-30T15:52:10Z")

</div>

I don’t think that’s supported by Jeremy’s radio input, but you can certainly do it yourself. Here’s an example with a select input, but you could adapt the code to use radio buttons instead.

> **[Treemap](https://observablehq.com/@d3/treemap)**
>
> An Observable notebook by D3.

Here’s the source for the input:

```auto
viewof tile = {
  const options = [
    {name: "d3.treemapBinary", value: d3.treemapBinary},
    {name: "d3.treemapDice", value: d3.treemapDice},
    {name: "d3.treemapSlice", value: d3.treemapSlice},
    {name: "d3.treemapSliceDice", value: d3.treemapSliceDice},
    {name: "d3.treemapSquarify", value: d3.treemapSquarify, selected: true}
  ];
  const form = html`<form style="display: flex; align-items: center; min-height: 33px;"><select name=i>${options.map(o => Object.assign(html`<option>`, {textContent: o.name, selected: o.selected}))}`;
  form.i.onchange = () => form.dispatchEvent(new CustomEvent("input"));
  form.oninput = () => form.value = options[form.i.selectedIndex].value;
  form.oninput();
  return form;
}

```

The key part is the _form_.value assignment, which pulls from the _options_ array.

---

<div class="post-metadata">

**Author:** ![ugadal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ugadal/32/2867_2.png) [@ugadal](https://talk.observablehq.com/u/ugadal)\
**Post date:** [March 30, 2020, 3:56pm UTC](https://talk.observablehq.com/t/can-functions-be-values-of-radio-buttons/2990/3 "2020-03-30T15:56:04Z")

</div>

ok thanks I was suspecting the radio import nature…  
thanks for reformatting my post also… I’m new to this 🙂

I’ll have a test without importing and using raw materials.  
Thanks a lot !

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [April 1, 2020, 12:58pm UTC](https://talk.observablehq.com/t/can-functions-be-values-of-radio-buttons/2990/4 "2020-04-01T12:58:48Z")

</div>

Just for the record, you can still use string references:

```auto
viewof whichf = radio({
  options: [
    { label: 'linear', value: 'scaleLinear' },
    { label: 'log', value: 'scaleLog'},
    ],
  value: 'scaleLinear'
})

```

```auto
d3[whichf]()(123)

```

… or even wrap everything:

```auto
viewof whichf = Object.defineProperty(
  html`<div>${radio({
    options: [
      { label: 'linear', value: 'scaleLinear' },
      { label: 'log', value: 'scaleLog'},
      ],
    value: 'scaleLinear'
  })}`,
  'value',
  {get() { return d3[this.firstChild.value] } }
) 

```

```auto
whichf()(123)

```

---

<div class="post-metadata">

**Author:** ![ugadal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ugadal/32/2867_2.png) [@ugadal](https://talk.observablehq.com/u/ugadal)\
**Post date:** [April 1, 2020, 1:30pm UTC](https://talk.observablehq.com/t/can-functions-be-values-of-radio-buttons/2990/5 "2020-04-01T13:30:58Z")

</div>

> [@mootari](#):
>
> d3whichf(123)

wowie zowie, that’s the winner, didn’t think could access the functions in library that way…  
I prefer really this solution to my array of function indexed values

Big Big thanks 🙂

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [April 1, 2020, 1:48pm UTC](https://talk.observablehq.com/t/can-functions-be-values-of-radio-buttons/2990/6 "2020-04-01T13:48:29Z")

</div>

You can expand that technique further to generate the available options. E.g., to create entries for every `scale*` function, except `scaleDiverging*` and `scaleSequential*`, use:

```auto
const options = Object.keys(d3)
  .filter(k => k.match(/^scale(?!Diverging|Sequential)/))
  .map(k => ({
    // strip "scale" prefix and convert first character to lowercase
    label: k.slice(5, 6).toLowerCase() + k.slice(6),   
    value: k
  }));

```