D3 Examples - Marks and Channels

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Motion</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    #motion {
      position: absolute;
      width: 960px;
      height: 500px;
​
      box-sizing: border-box;
    }
    .label {
      font-family: Arial,Helvetica;
    }
  </style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <svg id="motion"></svg>
  <script>
    let init = Date.now();
    let motion = d3.select("#motion");
    //motion.append("circle").attr("class","motion1").attr("cx", 120).attr("cy",20).attr("r",4).attr("fill", "#000000");
    //motion.append("circle").attr("cx", 140).attr("cy",50).attr("r",4).attr("fill", "#000000");
    //motion.append("circle").attr("cx", 160).attr("cy",40).attr("r",4).attr("fill", "#000000");
    //motion.append("circle").attr("cx", 195).attr("cy",30).attr("r",4).attr("fill", "#000000");
    //motion.append("circle").attr("class","motion2").attr("cx",215).attr("cy",65).attr("r",4).attr("fill", "#000000");
    //motion.append("circle").attr("cx",225).attr("cy",28).attr("r",4).attr("fill", "#000000");
    //motion.append("text").attr("class","label").attr("x",10).attr("y",50).text("Motion");
    motion.append("circle").attr("class","motion1").attr("cx", 90).attr("cy",100).attr("r",30).attr("fill", "#000000");
    motion.append("circle")                        .attr("cx", 240).attr("cy",300).attr("r",30).attr("fill", "#000000");
    motion.append("circle")                        .attr("cx", 420).attr("cy",220).attr("r",30).attr("fill", "#000000");
    motion.append("circle")                        .attr("cx", 660).attr("cy",140).attr("r",30).attr("fill", "#000000");
    motion.append("circle").attr("class","motion2").attr("cx", 770).attr("cy",350).attr("r",30).attr("fill", "#000000");
    motion.append("circle")                        .attr("cx", 860).attr("cy",120).attr("r",30).attr("fill", "#000000");
​
    d3.timer(()=>{
      const delta = Date.now() - init;
      motion.selectAll(".motion1").attr("transform",d=>{
        return "rotate(" + delta / 2  + ",90,140)";
      });
      motion.selectAll(".motion2").attr("transform",d=>{
        return "rotate(" + delta / 2  + ",770,310)";
      });
    });
  </script>
</body>
</html>
    