slattery · May 13, 2014 19:18
diff --git a/.gitignore b/.gitignore
 # Editor backup files
 *.bak
 *~
diff --git a/index.html b/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>
	<!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>