xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script> var canvas = d3.select("body") .append("svg") .attr("width", 1200) .attr("height", 1200); var circle = canvas.append("circle") .attr("cx", 150) .attr("cy", 100) .attr("r", 60); var circle = canvas.append("circle") .attr("cx", 150) .attr("cy", 250) .attr("r", 60) .attr("fill", "red"); var line = canvas.append("line") .attr("x1", 300) .attr("y1", 100) .attr("x2", 300) .attr("y2", 250) .attr("stroke-width", 5) .attr("stroke", "black"); var line = canvas.append("line") .attr("x1", 400) .attr("y1", 100) .attr("x2", 400) .attr("y2", 250) .attr("stroke-width", 10) .attr("stroke", "red");var rectangle = canvas.append("rect") .attr("x", 500) .attr("y", 100) .attr("width", 50) .attr("height", 150);var rectangle = canvas.append("rect") .attr("x", 600) .attr("y", 100) .attr("width", 50) .attr("height", 150) .attr("fill","red")var text1 = canvas.append("text") .text("Basic Shapes") .attr("x", 300) .attr("y", 50) .attr("font-size", 26) .attr("font-family", "monospace")var text1 = canvas.append("text") .text("Translation Operation ->") .attr("x", 20) .attr("y", 380) .attr("font-size", 20) .attr("font-family", "monospace")var circle_translate1 = canvas.append("circle") .attr("cx", 340) .attr("cy", 380) .attr("r", 30) .attr("fill", "orange")var circle_translate2 = canvas.append("circle") .attr("transform", "translate(440,380)") .attr("r", 30) .attr("fill", "green")var text1 = canvas.append("text") .text("Scaling Operation ->") .attr("x", 500) .attr("y", 380) .attr("font-size", 20) .attr("font-family", "monospace")var circle_scale1 = canvas.append("circle") .attr("cx", 860) .attr("cy", 380) .attr("r", 15) .attr("fill", "orange")var circle_scale2 = canvas.append("circle") .attr("cx", 760) .attr("cy", 380) .attr("r", 35) .attr("transform", "scale(1.008)") .attr("fill", "green")var text1 = canvas.append("text") .text(" Rotation Operation ->") .attr("x", 20) .attr("y", 480) .attr("font-size", 20) .attr("font-family", "monospace")var textrotate_object = canvas.append("text") // append text .style("fill", "black") // fill the text with the colour black .attr("x", 300) // set x position of left side of text .attr("y", 470) // set y position of bottom of text .attr("font-size", 20) .text("Hello World"); // define the text to display var rotatedtext_object = canvas.append("text") // append text .style("fill", "black") // fill the text with the colour black .attr("font-size", 20) .attr("transform", "translate(480,450) rotate(10)") .text("Hello World"); // define the text to display </script></body> https://d3js.org/d3.v4.min.js