Skip to content

Instantly share code, notes, and snippets.

@wenzelmkay
Created May 12, 2017 17:42
Show Gist options
  • Save wenzelmkay/75bf50e2f9f16062bdd56bc4b42b60c8 to your computer and use it in GitHub Desktop.
Save wenzelmkay/75bf50e2f9f16062bdd56bc4b42b60c8 to your computer and use it in GitHub Desktop.
GeneSubway
license: mit
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment