GeneSubway

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var lineData =  [{ "x": 1,   "y": 15},  
                      { "x": 70,  "y": 30},
                      { "x": 140,  "y": 15}, 
                      { "x": 260,  "y": 15},
                      { "x": 380,  "y": 15},  
                      { "x": 500, "y": 15}];
    var geneData = 
        [{
          "name": "Gene 1",
          "start": 50,
          "stop": 350,
          "orientation": "forward"
          },
         {
           "name": "Gene 2",
           "start": 365,
           "stop": 425,
           "orientation": "reverse"
         },
         {
           "name": "Gene 3",
           "start": 450,
           "stop": 580,
           "orientation": "reverse"
         },
         {
           "name": "Gene 4",
           "start": 600,
           "stop": 770,
           "orientation": "reverse"
         }]

/*   var lineFunction = d3.line(lineData)
                             .x(function(d) { return d.x; })
                             .y(function(d) { return d.y; }).curve(d3.curveStep);

var svgContainer = d3.select("body").append("svg")
                                        .attr("width", 500)
                                        .attr("height", 500);

var lineGraph = svgContainer.append("path")
                                .attr("d", lineFunction(lineData))
                                .attr("stroke", "blue")
                                .attr("stroke-width", 10)
                                .attr("fill", "none");*/

</script>
</body>

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