benrudolph/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 960px;
    height: 500px;
    position: relative;
    font-weight: 300;
  }
  .container {
    margin-left: 20px;
  }

  .controls {
    margin-top: 10px;
  }
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="container">
  <div id="domain"></div>
  <div id="range"></div>
  <div class="controls">
    <label for="input">Input: </label>
    <input name="input" type="text" id="input"/>
    <button type="submit" id="submit">Scale!</button>
    <div id="output"></div>
  </div>
</div>
<script>
  var scale = d3.scale.linear()

  // Let's add a domain, a.k.a. what is the input into the scale
  scale.domain([0, 100])

  // Adding a range that will map a number to this output range
  scale.range([0, 1])

  d3.select("#domain")
    .text("Domain: [" + scale.domain()[0] + ", " + scale.domain()[1] + "]")
  d3.select("#range")
    .text("Range: [" + scale.range()[0] + ", " + scale.range()[1] + "]")

  d3.select("#submit")
    .on("click", function() {
      var input = parseInt(d3.select("#input")[0][0].value)
      var output = scale(input)
      d3.select("#output")
        .text("Output: " + output)
    })
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	font-weight: 300;
	}
	.container {
	margin-left: 20px;
	}

	.controls {
	margin-top: 10px;
	}
	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<div class="container">
	<div id="domain"></div>
	<div id="range"></div>
	<div class="controls">
	<label for="input">Input: </label>
	<input name="input" type="text" id="input"/>
	<button type="submit" id="submit">Scale!</button>
	<div id="output"></div>
	</div>
	</div>
	<script>
	var scale = d3.scale.linear()

	// Let's add a domain, a.k.a. what is the input into the scale
	scale.domain([0, 100])

	// Adding a range that will map a number to this output range
	scale.range([0, 1])

	d3.select("#domain")
	.text("Domain: [" + scale.domain()[0] + ", " + scale.domain()[1] + "]")
	d3.select("#range")
	.text("Range: [" + scale.range()[0] + ", " + scale.range()[1] + "]")

	d3.select("#submit")
	.on("click", function() {
	var input = parseInt(d3.select("#input")[0][0].value)
	var output = scale(input)
	d3.select("#output")
	.text("Output: " + output)
	})
	</script>