Skip to content

Instantly share code, notes, and snippets.

@GerHobbelt

GerHobbelt/.gitignore

Created February 22, 2012 21:34
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save GerHobbelt/1887532 to your computer and use it in GitHub Desktop.
Save GerHobbelt/1887532 to your computer and use it in GitHub Desktop.
Download ZIP
create HTML5 input type nodes using d3.js
Raw
.gitignore
# Editor backup files
*.bak
*~
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<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="https://raw.github.com/GerHobbelt/d3/master/d3.latest.js"></script>
<!--<script type="text/javascript" src="../../../../js/d3/d3.latest.js"></script>-->
<style>
circle {
stroke: #fff;
stroke-width: 1.5px;
}
body, p {
font: 12px sans-serif;
}
text {
font: 10px sans-serif;
}
</style>
</head>
<body>
<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 = [
'color',
'date',
'datetime',
'datetime-local',
'email',
'month',
'number',
'range',
'search',
'tel',
'time',
'url',
'week'
];
// create the UL list of types, id-ing each <LI> so we can then d3.select those later for the real test
var ul = d3.select("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;
})
.append('p')
.text(function(d) {
return 'type="' + d + '"';
});
ul.append('input')
.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):
d3.select('body')
.append('input')
.attr('type', 'range')
*/
d3.select('body')
.data(['range'])
.append('input')
.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 = d3.select(this.parentNode);
var ranger_value = +this.value; // identical to +d3.select(this).node().value
// 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() !
.enter()
*/
.enter();
pn.each(function(d, i) {
var sel = d3.select(this);
if (!d)
{
sel.append('span')
.attr('id', 'display-value');
}
});
// always update the value shown:
pn = pa.select('span#display-value');
pn.text(function() {
return 'value = ' + ranger_value;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment