HTML Range slider with play / pause loop

Question

HTML Range slider with play / pause loop

I am new to web development and have run into a wall with the d3 visualization I am doing. I need a range slider that will go through a two-dimensional array (representing different time points) in order to change the color of several SVG elements.

The fact that I still looked perfectly functional, as far as I can tell. However, I cannot figure out how to add play / pause functionality to the HTML range slider to save my life. The previous post for almost this exact question received only advice on using the d3 brush element as a slider. This makes sense, however it seems more complicated, and I still can't figure out how the play / pause function will be executed with a brush.

Please see the full code for an example of my toy, built below, or in this script if you want. I suppose there is a way to do this using jQuery - but there is a desire to reduce dependencies as much as possible, so I need a solution based on vanilla javascript or d3. Thanks!

var dataSet = [
  [1, 2],
  [2, 3],
  [3, 4],
  [4, 5],
  [5, 4]
];

var colorScale = d3.scale.linear()
  .domain([0, 2.5, 5])
  .range(["red", "white", "blue"]);

//Draw the SVG element, then the circles
var svg = d3.select('#circles')
  .append("svg")
  .attr("width", 200)
  .attr("height", 900)
  .append('g')
  .attr('id', 'foo');

svg.append('circle')
  .attr({
    "cx": 45,
    'cy': 45,
    'r': 15,
    'id': 'circle1'
  });

svg.append('circle')
  .attr({
    "cx": 90,
    'cy': 45,
    'r': 15,
    'id': 'circle2'
  });

//Initialize the color fill in each circle
d3.select('#circle1')
  .style('fill', function(d) {
    return colorScale(dataSet[0][0]);
  })
  .transition();

d3.select('#circle2')
  .style('fill', function(d) {
    return colorScale(dataSet[0][1]);
  })
  .transition();

//The function which updates the fill of the circles to match a new time point 			
function update(timePoint) {
  d3.select('#circle1')
    .transition().duration(500)
    .style('fill', function(d) {
      return colorScale(dataSet[timePoint][0]);
    });
  d3.select('#circle2')
    .transition().duration(500)
    .style('fill', function(d) {
      return colorScale(dataSet[timePoint][1]);
    });
};

//Run the update function when the slider is changed
d3.select('#rangeSlider').on('input', function() {
  update(this.value);
});

html {
  background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
  <div id="slider">
    <input type='range' min='0' max='4' step='1' value='0' id='rangeSlider' />
    <button type="button" id="start">start</button>
    <button type="button" id="stop">stop</button>
  </div>

  <div id="circles">
  </div>
</body>

Run code

+4

javascript html d3.js

Tanner Koomar 21 . '16 21:20

1

mgraham · Accepted Answer · 2016-01-21T22:27:59+0000

: https://jsfiddle.net/bfbun6cc/4/

var myTimer;
d3.select("#start").on("click", function() {
    clearInterval (myTimer);
    myTimer = setInterval (function() {
    var b= d3.select("#rangeSlider");
      var t = (+b.property("value") + 1) % (+b.property("max") + 1);
      if (t == 0) { t = +b.property("min"); }
      b.property("value", t);
      update (t);
    }, 1000);
});

d3.select("#stop").on("click", function() {
    clearInterval (myTimer);
});

d3 min, max, value llider

, . , .

HTML Range slider with play / pause loop

More articles: