Simple Path Editor

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Path Editor</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script> 
<style type="text/css">
body {
  padding: 0
  margin: 0
}
</style>
</head>
<body>
<script type="text/javascript">

config = {"path" : "M0,4.5L7,4.5L5,2L7,4.5L5,7L7,4.5", "lineJoin": "round", "scale": 50}
gui = new dat.GUI({width: 500})
pathChanger = gui.add(config, "path")
pathChanger.onChange(function(value) {
  path.attr("d", value)
})
scaleChanger = gui.add(config, "scale", 1, 100)
scaleChanger.onChange(function(value) {
  path.attr("transform", "scale("+value+")")
})
lineJoinChanger = gui.add(config, "lineJoin", ["miter", "round", "bevel"])
lineJoinChanger.onChange(function(value) {
  path.attr("stroke-linejoin", value)
})

width = window.innerWidth,
height = window.innerHeight

svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)

path = svg.append("path")
  .attr("d", config["path"])
  .attr("stroke", "black")
  .attr("fill", "none")
  .attr("stroke-linejoin", config["lineJoin"])
  .attr("transform", "scale("+config["scale"]+")")

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js