Built with blockbuilder.org
xxxxxxxxxx<html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Drawing SVG Shapes with D3</title> <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script></head><body> <!-- Example 1 --> <!-- <h3>SVG Bar</h3> <svg> <rect width="50" height="200" style="fill:blue"/> </svg> <h3>D3 Bar</h3> <script> d3.select("body") // selects <body> html tag .append("svg") // add an <svg> html element .append("rect") // add <rect> svg element .attr("width", 50) // set the attribute of width .attr("height", 200) // set the attribute of height .style("fill", "blue"); // add some style </script> --> <!-- Example 2 --><!-- <svg width="50" height="50"> <circle cx="25" cy="25" r="25" style="fill: blue" /> </svg> <script> d3.select("body") .append("svg") .attr("width", 50) .attr("height", 50) .append("circle") .attr("cx", 25) .attr("cy", 25) .attr("r", 25) .style("fill", "purple"); </script> --> <!-- Example 3 --> <svg width="250" height="50"> <text x="0" y="25">Easy Peasy</text> </svg> <script> d3.select("body") .append("svg") .attr("width", 250) .attr("height", 50) .append("text") .text("Easy Peasy with D3") .attr("x", 0) .attr("y", 25) .style("fill", "blue"); </script></body></html> Modified http://d3js.org/d3.v4.min.js to a secure url
https://d3js.org/d3.v4.min.js