d3noob/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a simple example of implimenting an HTML input using a <range> input tag and using that to adjust a d3.js drawn svg element (a circle).
It is used as an example and described in the book D3 Tips and Tricks.

  
## 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://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.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://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.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>
No results found