D3 Animated Lines

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

xxxxxxxxxx

 

1

%%html

2

number <select id='num_points' 

3

style='text-align:center; text-align-last:center; 

4

  background:silver; width:200px; height:25px'>

5

    <option value='100'>100</option><option value='150'>150</option>

6

    <option value='200'>200</option><option value='250'>250</option>

7

    <option value='300'>300</option><option value='350'>350</option>

8

</select><br/><br/>run &nbsp; &nbsp; &nbsp; &nbsp;

9

<button style='background:silver; width:200px; height:25px'

10

onclick='draw_chart();' id='run_button'>=>>></button><br/><br/>

11

<svg id='d302' style='background-color:silver;'/><script>

12

margin={top:20,right:20,bottom:20,left:60},width=600,height=400;

13

reveal=path=>

14

path.transition().duration(10000).ease(d3.easeLinear)

15

    .attrTween('stroke-dasharray',function() {

16

      const length=this.getTotalLength();

17

      return d3.interpolate(`0,${length}`,`${length},${length}`);});

18

function draw_chart() {

19

  var n=parseInt(document.getElementById('num_points').value);

20

  var x=d3.scaleLinear().domain([0,n-1])

21

          .range([margin.left,width-margin.right]),

22

      y=d3.scaleLinear().domain([0,n])

23

          .range([height-margin.bottom,margin.top]); 

24

  var line=d3.line().curve(d3.curveMonotoneX)

25

           .x(function(d,i) {return x(i);})

26

           .y(function(d) {return y(d.y);});

27

  var data=d3.range(n).map(function(d) {

28

      return {'y':d3.randomUniform(n)()}; })

29

  var xAxis=(g,scale=x)=>g

30

      .attr('transform',`translate(0,${height-margin.bottom})`)

31

      .call(d3.axisBottom(scale)

32

              .ticks(width/60).tickSizeOuter(0)),

33

      yAxis=(g,scale=y)=>g

34

      .attr('transform',`translate(${margin.left},0)`)

35

      .call(d3.axisLeft(scale).ticks(height/40));

36

  var svg=d3.select('#d302')

37

            .attr('width',width).attr('height',height);

38

  svg.selectAll('g').remove(); svg.selectAll('path').remove();

39

  svg.append('g').call(xAxis); svg.append('g').call(yAxis);

40

  svg.append('path').datum(data).attr('d',line)

41

     .attr('stroke','#ff36ff').attr('stroke-width',1)

42

     .attr('stroke-miterlimit',1).attr('stroke-dasharray','0,1')

43

     .attr('fill','none').call(reveal);};

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages