Animated Scatter Plot with Menus

menu.js

import { dispatch } from 'd3';

export const menu = () => {

let id;

let labelText;

let options;

const listeners = dispatch('change');

// <label for="cars">Choose a car:</label>

// <select name="cars" id="cars">

// <option value="volvo">Volvo</option>

// <option value="saab">Saab</option>

// <option value="mercedes">Mercedes</option>

// <option value="audi">Audi</option>

// </select>

const my = (selection) => {

selection

.selectAll('label')

.data([null])

.join('label')

.attr('for', id)

.text(labelText);

selection

.selectAll('select')

.data([null])

.join('select')

.attr('id', id)

.on('change', (event) => {

listeners.call('change', null, event.target.value);

})

.selectAll('option')

.data(options)

.join('option')

.attr('value', (d) => d.value)

.text((d) => d.text);

};

Last edited Apr 13, 2022

Created on May 29, 2021

MIT Licensed