Reusable HTML select / Jeya Balaji Balasubramanian

Jeya Balaji Balasubramanian

AI Researcher in Medicine. All opinions are my own.

Workspace

Public

Reusable chart components with D3.js

Edited

Jan 29, 2023

{

const menuContainer = d3.create('div')

.attr('class', 'menu-container');

const carMenu = menuContainer.append('div');

const options = [

{ value: 'volvo', text: 'Volvo' },

{ value: 'saab', text: 'Saab' },

{ value: 'mercedes', text: 'Mercedes' },

{ value: 'audi', text: 'Audi' }

];

carMenu.call(

menu()

.id('car-menu')

.labelText('Car: ')

.options(options)

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

console.log(`You selected: ${value}`);

})

);

return menuContainer.node();

}

function menu() {

let id;

let labelText;

let options;

const listeners = d3.dispatch('change');

const menu = (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);

};

menu.id = function (_) {

return arguments.length ? ((id = _), menu) : id;

}

menu.labelText = function (_) {

return arguments.length ? ((labelText = _), menu) : labelText;

}

menu.options = function (_) {

return arguments.length ? ((options = _), menu) : options;

}

menu.on = function () {

let value = listeners.on.apply(listeners, arguments);

return value === listeners ? menu : value;

};

return menu;

}

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more