Example of slider

forked from anonymous's block: fresh block

<!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>

https://d3js.org/d3.v4.min.js