adriankonopko
3/26/2020 - 10:15 AM

d3-simple-slider

d3-simple-slider

.block
content_copyfile_download
license: bsd-3-clause
scrolling: yes
border: no
README.md
content_copyfile_download
  • Rendered
  • Source

Renders a simple interactive slider.

Inspired by The New York Times Is It Better to Rent or Buy?

Source code and documentation available on Github.

forked from johnwalley's block: d3-simple-slider

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

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/d3-simple-slider"></script>
<div class="container">
  
  <h2>Range</h2>
  <div class="row align-items-center">
    <div class="col-sm-2"><p id="value-range"></p></div>
    <div class="col-sm"><div id="slider-range"></div></div>
  </div>
  
  
  
  

<script>
  // Time
  var dataTime = d3.range(0, 10).map(function(d) {
    return new Date(1995 + d, 10, 3);
  });

  
  // Range
  var sliderRange = d3
    .sliderBottom()
    .min(d3.min(dataTime))
    .max(d3.max(dataTime))
    .step(1000 * 60 * 60 * 24 * 365)
    .width(300)
    .tickFormat(d3.timeFormat('%Y'))
    .tickValues(dataTime)
    .default([new Date(1998, 10, 3), new Date(2000, 10, 3)])
    .fill('#2196f3')
    .on('onchange', val => {
      
    });

  var gRange = d3
    .select('div#slider-range')
    .append('svg')
    .attr('width', 500)
    .attr('height', 100)
    .append('g')
    .attr('transform', 'translate(30,30)');

  gRange.call(sliderRange);



  

</script>