index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
#graphArea{
width:100px;
margin: 50 auto;
}
</style>
</head>
<body>
<div class="notes"></div>
<div id="graphArea"></div>
<script>
console.log("you are now rocking with d3", d3);
var lineData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var overallWidth = 2000;
var overallHeight = 2000;
var xEnd = 200
d3.select("#graphArea").append("svg")
.attr("width", overallWidth)
.attr("height", overallHeight)
.attr("id", "mainSVG");
d3.select("#mainSVG").append("g")
.attr("id", "moduleGroup")
d3.select("#moduleGroup").append("path")
.attr("d", "M 0 5 100 5")
.attr("stroke", "black")
.attr("stroke-width", "10")
.attr("id", "path01");
d3.select("#moduleGroup").append("path")
.attr("d", "M 0 25 100 25")
.attr("stroke", "black")
.attr("stroke-width", "10")
.attr("id", "path02");
d3.select("#moduleGroup").append("path")
.attr("d", "M 0 45 100 45")
.attr("stroke", "black")
.attr("stroke-width", "10")
.attr("id", "path03");
d3.select("#moduleGroup").append("path")
.attr("d", "M 0 65 100 65")
.attr("stroke", "black")
.attr("stroke-width", "10")
.attr("id", "path04");
d3.select("#moduleGroup").append("path")
.attr("d", "M 0 85 100 85")
.attr("stroke", "black")
.attr("stroke-width", "10")
.attr("id", "path05");
</script>
</body>