D3 Examples - Example of slider

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
    h1{font-size: 32px; color:#444;}
    #slider1{
      width: 300px;
    }
  </style>
</head>
​
<body>
  <h1>Example of slider with D3.js</h1>
  <input id="slider1" type="range" min="2000" max="2020" step="1" value="2000"/>
  <div id="svg"></div>  
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 960, height = 500;
    
    var svg = d3.select("#svg").append("svg")
      .attr("width", width)
      .attr("height", height);
    
    var padding = 30;
    
    var colors = d3.scaleOrdinal(d3.schemeCategory10);
    
    var data = d3.range(20).map((d)=>{
      var values = d3.range(20).map((d)=>({id: d, x: Math.random()*300, y: Math.random()*100}));
     return {year: 2000 + d, values: values};
    });
 
    var yScale = d3.scaleLinear()
        .domain([0,100])
        .range([height - padding, padding]);
    
    var xScale = d3.scaleLinear()
        .domain([0,300])
        .range([padding, width - padding]);
    
    var xAxis = d3.axisBottom(xScale);
    var yAxis = d3.axisLeft(yScale);
    
    var gX = svg.append("g")
        .attr("transform", "translate(0," + (height - padding) + ")")
        .call(xAxis);
    
    var gY = svg.append("g")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);
    
    var year = svg.append("text")
        .attr("font-family", "Helvetica")
        .attr("font-size", 18)
        .attr("y", 20)
        .attr("x", 800)
        .text("Year: 2000");
    
    var circles = svg.selectAll(".circles")
        .data(data.filter(d=>d.year === 2000)[0].values, d=> d.id)
        .enter()
        .append("circle")
        .attr("cx", d=>xScale(d.x))
        .attr("cy", d=>yScale(d.y))
        .attr("r", 8)
        .attr("fill", d=> colors(d.id));
    
    d3.select("input").on("input", function(){
      updateCircles(this.value)
    });
    
    function updateCircles(sliderYear){
      
      console.log(sliderYear);
      
      var newData = data.filter(d=>d.year === +sliderYear)[0].values;
      
      circles.data(newData, d => d.id)
        .transition()
        .duration(250)
        .attr("cx", d=>xScale(d.x))
          .attr("cy", d=>yScale(d.y));
      
      year.text("Year: " + sliderYear);
      
    }
 
​
  </script>
</body>
​
    