Old school D3 from simpler times

All examples By author By category About

meveritt

Full window Github gist

lines module

5 horizontal lines in a group

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js