Skip to content

Instantly share code, notes, and snippets.

@bhuppal

bhuppal/index.html

Created September 3, 2019 16:31
Show Gist options
  • Save bhuppal/f361d2d54e48c231692f68d0a8c51cb1 to your computer and use it in GitHub Desktop.
Save bhuppal/f361d2d54e48c231692f68d0a8c51cb1 to your computer and use it in GitHub Desktop.
Download ZIP
Drawing SVg Shapes with D3 // source https://jsbin.com/sufuwuh
Raw
index.html
<!DOCTYPE html>
<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.v5.min.js" charset="utf-8"></script>
</head>
<body>
<h3>SVG Bar</h3>
<svg>
<rect width="50" height="200" style="fill:blue" />
</svg>
<h3>D3 Bar</h3>
<script>
d3.select("body") //select body tag
.append("svg") // add an <svg> html element
.append("rect") // add <rect> svg element
.attr("width", 50)
.attr("height", 200)
.style("fill","blue");
</script>
<hr/>
<svg width="50" hegiht="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",10)
.attr("cy",10)
.attr("r",10)
.style("fill","green");
</script>
<hr/>
<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")
.attr("y",25)
.attr("x",0)
.style("fill","blue")
</script>
<hr>
<script>
d3.select("body").append("svg").append("rect").attr("width",50).attr("height",200).style("fill","blue");
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<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.v5.min.js" charset="utf-8"><\/script>
</head>
<body>
<h3>SVG Bar</h3>
<svg>
<rect width="50" height="200" style="fill:blue" />
</svg>
<h3>D3 Bar</h3>
<script>
d3.select("body") //select body tag
.append("svg") // add an <svg> html element
.append("rect") // add <rect> svg element
.attr("width", 50)
.attr("height", 200)
.style("fill","blue");
<\/script>
<hr/>
<svg width="50" hegiht="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",10)
.attr("cy",10)
.attr("r",10)
.style("fill","green");
<\/script>
<hr/>
<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")
.attr("y",25)
.attr("x",0)
.style("fill","blue")
<\/script>
<hr>
<script>
d3.select("body").append("svg").append("rect").attr("width",50).attr("height",200).style("fill","blue");
<\/script>
</body>
</html>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment