Buttons Controlling Color: Using form elements to control DOM, with D3

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 12px sans-serif;
  background-color: teal;
}

.buttons-div
{
  margin: 0 auto;
  width: 140px;
  height: 140px;
  position: absolute;
}

</style>
<body>

<h1>Buttons with Colors</h1>
<p>Using form elements to control DOM, with D3.</p>

<div class='container' >
	<div class="buttons-div">
	  <h2>Select Variables</h2>
	</div>
	<div id="chart1"></div>
</div>

drawRadioButtons();

function drawRadioButtons(){
	var targ = d3.select(".buttons-div");

var grp1 = {'name': 'Colors', 'buttons': [
					{'value':'teal', 'label':'teal', 'checked':true},
					{'value':'#a02b42', 'label':'red', 'checked':false},
					{'value':'#3a4e87', 'label':'blue', 'checked':false},
					{'value':'#82af80', 'label':'green', 'checked':false} ]}
												
	targ.append('div')
		.append('p')
		.text(function(){return grp1['name']; });

for(button in grp1['buttons']){
		var b = grp1['buttons'][button];
		console.log(b['label'])
		drawRadioButton(targ, grp1['name'], b['label'], b['value'], b['checked'])
	}

}

//-------------------------------------------------------------------------------------

// event listeners and actions
var inputElems = d3.selectAll("input");

inputElems.on("change", changeColor);

function changeColor(){
  d3.select('body')
  	.style('background-color', this.value)
}

//-------------------------------------------------------------------------------------

//ToDo: move font sizing to external css, and give this a group-class for styling!!
function drawRadioButton(targ_div, grp_name, label_txt, value, checked, fontsize){
	if(checked === undefined) { checked = false; }
	if(fontsize===undefined){ fontsize = '10px'}

var button = targ_div.append('div')
		
	button.append('label')
			.text(function(d){ return label_txt; })
			.style('font-size', fontsize)
		
	var radio = button.append('input')
		.attr('type', 'radio')
		.attr('name', grp_name)
		.attr('value', value)
		.style('float', 'left')
		.style('vertical-align', 'bottom')
		
	if(checked){ radio.attr('checked', 'checked') }

targ_div.append('br')

return button;
}

</script>

https://d3js.org/d3.v3.min.js