Built with blockbuilder.org
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.
xxxxxxxxxx<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