AlainRo/.block

## .block
license: bsd-3-clause
scrolling: yes
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Renders a simple interactive slider.
Inspired by The New York Times Is It Better to Rent or Buy?
forked from johnwalley's block: d3-simple-slider

  
## index.html
<!doctype html>
<html lang="en">
<title>d3-simple-slider</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-simple-slider@0.2.1/build/d3-simple-slider.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
  crossorigin="anonymous">


<body>
  <div class="container">
    <h1>Basic example</h1>
    <div class="row align-items-center">
      <div class="col-sm-2">
        <p id="value1"></p>
      </div>
      <div class="col-sm">
        <div id="slider1"></div>
      </div>
    </div>
    <a id="setValue1" href="#">Reset</a>
    <h1>Step example</h1>
    <div class="row align-items-center">
      <div class="col-sm-2">
        <p id="value2"></p>
      </div>
      <div class="col-sm">
        <div id="slider2"></div>
      </div>
    </div>
    <a id="setValue2" href="#">Reset</a>
    <h1>Time example</h1>
    <div class="row align-items-center">
      <div class="col-sm-2">
        <p id="value3"></p>
      </div>
      <div class="col-sm">
        <div id="slider3"></div>
      </div>
    </div>
    <a id="setValue3" href="#">Reset</a>
    <h1>Dense values example</h1>
    <div class="row align-items-center">
      <div class="col-sm-2">
        <p id="value4"></p>
      </div>
      <div class="col-sm">
        <div id="slider4"></div>
      </div>
    </div>
    <a id="setValue4" href="#">Reset</a>
  </div>
</body>

<script>
  var data1 = [0, 0.005, 0.01, 0.015, 0.02, 0.025];

  var slider1 = d3.sliderHorizontal()
    .min(d3.min(data1))
    .max(d3.max(data1))
    .width(300)
    .tickFormat(d3.format('.2%'))
    .ticks(5)
    .default(0.015)
    .on('onchange', val => {
      d3.select("p#value1").text(d3.format('.2%')(val));
    });

  var g = d3.select("div#slider1").append("svg")
    .attr("width", 500)
    .attr("height", 100)
    .append("g")
    .attr("transform", "translate(30,30)");

  g.call(slider1);

  d3.select("p#value1").text(d3.format('.2%')(slider1.value()))
  d3.select("a#setValue1").on("click", () => slider1.value(0.015));

  var slider2 = d3.sliderHorizontal()
    .min(0)
    .max(10)
    .step(1)
    .width(300)
    .on('onchange', val => {
      d3.select("p#value2").text(val);
    });

  var g = d3.select("div#slider2").append("svg")
    .attr("width", 500)
    .attr("height", 100)
    .append("g")
    .attr("transform", "translate(30,30)");

  g.call(slider2);

  d3.select("p#value2").text((slider2.value()));
  d3.select("a#setValue2").on("click", () => slider2.value(5));

  var data3 = d3.range(0, 10).map(function (d) { return new Date(1995 + d, 10, 3); });

  var slider3 = d3.sliderHorizontal()
    .min(d3.min(data3))
    .max(d3.max(data3))
    .step(1000 * 60 * 60 * 24 * 365)
    .width(400)
    .tickFormat(d3.timeFormat('%Y'))
    .tickValues(data3)
    .on('onchange', val => {
      d3.select("p#value3").text(d3.timeFormat('%Y')(val));
    });

  var g = d3.select("div#slider3").append("svg")
    .attr("width", 500)
    .attr("height", 100)
    .append("g")
    .attr("transform", "translate(30,30)");

  g.call(slider3);

  d3.select("p#value3").text(d3.timeFormat('%Y')(slider3.value()));
  d3.select("a#setValue3").on("click", () => slider3.value(new Date(1997, 11, 17)));

  var data4 = [0.20, 0.22, 0.24, 0.26, 0.28, 0.30, 1];

  var slider4 = d3.sliderHorizontal()
    .min(d3.min(data4))
    .max(d3.max(data4))
    .width(300)
    .tickFormat(d3.format('.2%'))
    .marks(data4)
    .ticks(5)
    .default(0.015)
    .on('onchange', val => {
      d3.select("p#value4").text(d3.format('.2%')(val));
    });

  var g = d3.select("div#slider4").append("svg")
    .attr("width", 500)
    .attr("height", 100)
    .append("g")
    .attr("transform", "translate(30,30)");

  g.call(slider4);

  d3.select("p#value4").text(d3.format('.2%')(slider4.value()))
  d3.select("a#setValue4").on("click", () => slider4.value(0.015));
</script>

</html>
	<!doctype html>
	<html lang="en">
	<title>d3-simple-slider</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/d3-simple-slider@0.2.1/build/d3-simple-slider.js"></script>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
	crossorigin="anonymous">


	<body>
	<div class="container">
	<h1>Basic example</h1>
	<div class="row align-items-center">
	<div class="col-sm-2">
	<p id="value1"></p>
	</div>
	<div class="col-sm">
	<div id="slider1"></div>
	</div>
	</div>
	<a id="setValue1" href="#">Reset</a>
	<h1>Step example</h1>
	<div class="row align-items-center">
	<div class="col-sm-2">
	<p id="value2"></p>
	</div>
	<div class="col-sm">
	<div id="slider2"></div>
	</div>
	</div>
	<a id="setValue2" href="#">Reset</a>
	<h1>Time example</h1>
	<div class="row align-items-center">
	<div class="col-sm-2">
	<p id="value3"></p>
	</div>
	<div class="col-sm">
	<div id="slider3"></div>
	</div>
	</div>
	<a id="setValue3" href="#">Reset</a>
	<h1>Dense values example</h1>
	<div class="row align-items-center">
	<div class="col-sm-2">
	<p id="value4"></p>
	</div>
	<div class="col-sm">
	<div id="slider4"></div>
	</div>
	</div>
	<a id="setValue4" href="#">Reset</a>
	</div>
	</body>

	<script>
	var data1 = [0, 0.005, 0.01, 0.015, 0.02, 0.025];

	var slider1 = d3.sliderHorizontal()
	.min(d3.min(data1))
	.max(d3.max(data1))
	.width(300)
	.tickFormat(d3.format('.2%'))
	.ticks(5)
	.default(0.015)
	.on('onchange', val => {
	d3.select("p#value1").text(d3.format('.2%')(val));
	});

	var g = d3.select("div#slider1").append("svg")
	.attr("width", 500)
	.attr("height", 100)
	.append("g")
	.attr("transform", "translate(30,30)");

	g.call(slider1);

	d3.select("p#value1").text(d3.format('.2%')(slider1.value()))
	d3.select("a#setValue1").on("click", () => slider1.value(0.015));

	var slider2 = d3.sliderHorizontal()
	.min(0)
	.max(10)
	.step(1)
	.width(300)
	.on('onchange', val => {
	d3.select("p#value2").text(val);
	});

	var g = d3.select("div#slider2").append("svg")
	.attr("width", 500)
	.attr("height", 100)
	.append("g")
	.attr("transform", "translate(30,30)");

	g.call(slider2);

	d3.select("p#value2").text((slider2.value()));
	d3.select("a#setValue2").on("click", () => slider2.value(5));

	var data3 = d3.range(0, 10).map(function (d) { return new Date(1995 + d, 10, 3); });

	var slider3 = d3.sliderHorizontal()
	.min(d3.min(data3))
	.max(d3.max(data3))
	.step(1000 * 60 * 60 * 24 * 365)
	.width(400)
	.tickFormat(d3.timeFormat('%Y'))
	.tickValues(data3)
	.on('onchange', val => {
	d3.select("p#value3").text(d3.timeFormat('%Y')(val));
	});

	var g = d3.select("div#slider3").append("svg")
	.attr("width", 500)
	.attr("height", 100)
	.append("g")
	.attr("transform", "translate(30,30)");

	g.call(slider3);

	d3.select("p#value3").text(d3.timeFormat('%Y')(slider3.value()));
	d3.select("a#setValue3").on("click", () => slider3.value(new Date(1997, 11, 17)));

	var data4 = [0.20, 0.22, 0.24, 0.26, 0.28, 0.30, 1];

	var slider4 = d3.sliderHorizontal()
	.min(d3.min(data4))
	.max(d3.max(data4))
	.width(300)
	.tickFormat(d3.format('.2%'))
	.marks(data4)
	.ticks(5)
	.default(0.015)
	.on('onchange', val => {
	d3.select("p#value4").text(d3.format('.2%')(val));
	});

	var g = d3.select("div#slider4").append("svg")
	.attr("width", 500)
	.attr("height", 100)
	.append("g")
	.attr("transform", "translate(30,30)");

	g.call(slider4);

	d3.select("p#value4").text(d3.format('.2%')(slider4.value()))
	d3.select("a#setValue4").on("click", () => slider4.value(0.015));
	</script>

	</html>