bhpayne/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This is a demonstration of the use of the html 'range' input using d3.js v4.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Input test (circle)</title>

<p>
  <label for="nRadius"
         style="display: inline-block; width: 240px; text-align: right">
         radius = <span id="nRadius-value">…</span>
  </label>
  <input type="range" min="1" max="150" id="nRadius">
</p>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var width = 600;
var height = 300;

var holder = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

// draw the circle
holder.append("circle")
  .attr("cx", 300)
  .attr("cy", 150)
  .style("fill", "none")
  .style("stroke", "blue")
  .attr("r", 120);

// when the input range changes update the circle
d3.select("#nRadius").on("input", function() {
  update(+this.value);
});

// Initial starting radius of the circle
update(120);

// update the elements
function update(nRadius) {

  // adjust the text on the range slider
  d3.select("#nRadius-value").text(nRadius);
  d3.select("#nRadius").property("value", nRadius);

  // update the rircle radius
  holder.selectAll("circle")
    .attr("r", nRadius);
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Input test (circle)</title>

	<p>
	<label for="nRadius"
	style="display: inline-block; width: 240px; text-align: right">
	radius = <span id="nRadius-value">…</span>
	</label>
	<input type="range" min="1" max="150" id="nRadius">
	</p>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var width = 600;
	var height = 300;

	var holder = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	// draw the circle
	holder.append("circle")
	.attr("cx", 300)
	.attr("cy", 150)
	.style("fill", "none")
	.style("stroke", "blue")
	.attr("r", 120);

	// when the input range changes update the circle
	d3.select("#nRadius").on("input", function() {
	update(+this.value);
	});

	// Initial starting radius of the circle
	update(120);

	// update the elements
	function update(nRadius) {

	// adjust the text on the range slider
	d3.select("#nRadius-value").text(nRadius);
	d3.select("#nRadius").property("value", nRadius);

	// update the rircle radius
	holder.selectAll("circle")
	.attr("r", nRadius);
	}

	</script>