Colored Curved Lines - Visual Channel Example

This block was inspired by Tamara Munzner's example of color channels in her book Visualizaion Analysis and Design 2015, pg96 Fig. 5.3 Color.

Code was based on documentation of d3.js paths, such as the one found on Dashing d3.js.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
  </style>
</head>

<body>
  <script>
    var svg = d3.select("body").append("svg")
      .attr("width", 300)
      .attr("height", 300)
     
     // black line
     svg.append('path')
     		 		// the M means mark point and C means connect with curve
           .attr("d", "M 10 140 C 20 90 55 100 65 50")          
           .attr("stroke-width", 13)
           .attr("stroke", "black")
     
     // red line
      svg.append('path')
           // the M means mark point and C means connect with curve
           .attr("d", "M 110 140 C 120 90 155 100 165 50")           
           .attr("stroke-width", 13)
           .attr("stroke", "red")
      
     // green line
       svg.append('path')
           // the M means mark point and C means connect with curve
				   .attr("d", "M 210 140 C 220 90 255 100 265 50")          
           .attr("stroke-width", 13)
           .attr("stroke", "green")
      
          
  </script>
</body>

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