JSFiddle - React, Tailwind, and code Playground

by John Kawakami

HTML

<div id="one" class="box"></div>
<div id="two" class="box"></div>
<div id="three" class="box"></div>
<div id="four" class="box"></div>
<hr>
<button id="button_light">Light</button>
<button id="button_dark">Dark</button>

CSS

.box {
    width: 20px; 
    height: 20px;
    background-color: silver;
    border: 1px solid silver;
}
.light {
    background-color: yellow;
}
.dark {
    background-color: #003;
}

JavaScript

dispatch = d3.dispatch('light', 'dark');
dispatch.on('light.one', function() {
	d3.select('#one').classed('light', true);
});
dispatch.on('dark.two', function() {
	d3.select('#two').classed('dark', true);
});
dispatch.on('light.three', function() {
	d3.select('#three').classed({'dark':false, 'light': true});
});
dispatch.on('dark.three', function() {
	d3.select('#three').classed({'dark': true, 'light':false});
});
dispatch.on('dark.four', function() {
	d3.select('#four').classed('dark', true);
});



d3.select('#button_light').on("click", function() {
	dispatch.light();
});
d3.select('#button_dark').on("click", function() {
	dispatch.dark();
});