Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
create HTML5 input type nodes using d3.js
# Editor backup files
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Multiple Bar Charts showcasing various scale methods and data offset-ing technique</title>
<script type="text/javascript" src=""></script>
<!--<script type="text/javascript" src="../../../../js/d3/d3.latest.js"></script>-->
circle {
stroke: #fff;
stroke-width: 1.5px;
body, p {
font: 12px sans-serif;
text {
font: 10px sans-serif;
<p>The list of HTML5 input types (+ sample for each, as created by D3.JS):</p>
<ul id="input-types"></ul>
<p>Plus a lone 'input type=range' one:</p>
Safari 5 has a bug: this <input> renders correctly, while the D3-generated one at
the end has the slider positioned at the default value '50' despite 'value="0"'
being set and visible with 'inspect element'. :-(
<input type="range" name="lone-ranger1" min="0" max="1000" value="0" style="width: 800px;">
<script type="text/javascript">
var input_types = [
// create the UL list of types, id-ing each <LI> so we can then those later for the real test
var ul ="ul#input-types") // this one exists, and is to be parent of...
.selectAll('li') // ... these, which don't exist yet, but will once ...
.data(input_types) // ... data[] is used to determine how many there must be ...
.enter() // ... and we pick the set of 'not-yet-existing' elements corresponding
.append('li'); // ... to one(1) data[i] item each
ul.attr('id', function(d) {
return 'inp-item-' + d;
.text(function(d) {
return 'type="' + d + '"';
.attr('type', String); // implicit function(d, i) { return ''+d; }
<input type="range" name="lone-ranger" min="0" max="1000" value="0" onchange="... show value ..." style="width: 800px;">
first 4 lines have same effect as these (in this context, as data[] isn't used anywhere, really):'body')
.attr('type', 'range')
.attr('type', String) // implicit function(d, i) { return ''+d; }
.attr('name', 'lone-ranger')
.attr('value', 400)
.attr('min', 0)
.attr('max', 1000)
.attr('style', 'width: 800px;')
.on('change', function(d, i) {
// 'this' is the node itself
var pa =;
var ranger_value = +this.value; // identical to
// only create node when it's not there yet:
var pn = pa.selectAll('p#display-value')
.data([ranger_value]) // when you don't use data(), you can't .enter().append() !
pn.each(function(d, i) {
var sel =;
if (!d)
.attr('id', 'display-value');
// always update the value shown:
pn ='span#display-value');
pn.text(function() {
return 'value = ' + ranger_value;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment