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

Reusable chart components with D3.js

Reusable charts

Reusable HTML select

Reusable HTML range slider Reusable density plots Reusable box plots Reusable beeswarm plots Rain cloud plots from reusable chart components Population prevalence plot

{

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;

}

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more