Skip to content

Instantly share code, notes, and snippets.

@lairdm
Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lairdm/c6c235dbfa6e6ee61565 to your computer and use it in GitHub Desktop.
Save lairdm/c6c235dbfa6e6ee61565 to your computer and use it in GitHub Desktop.
GenomeD3Plot Linear Plot Demo

A basic linear plot demo.

Some basic functionality of GenomeD3Plot is shown for a linear plot, mouse drag and scrollwheel are enabled on the linear plot to change the view in focus. As well the linear brush below the plot can be used to adjust the viewable region.

A demo of the circular plot can be found at this gist.

A demo of the circular and linear plots with their panning features linked together can be found at this gist.

Track definitions are imported via a separate json file

All the dependant libraries can be see at a separate shared Gist

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>GenomeD3Plot Linear Plot Example</title>
<script src="/lairdm/raw/bdd7410698e06970a9ff/d3.min.js"></script>
<script src="/lairdm/raw/bdd7410698e06970a9ff/d3-tip.js"></script>
<style>
body {
overflow: hidden;
margin: 0;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica;
}
#linearchart {
position: absolute;
top: 10px;
left: 10px;
}
#brush {
position: absolute;
top: 260px;
left: 200px;
}
#resizeButton {
position: absolute;
top: 300px;
left: 100px;
}
</style>
<link rel="stylesheet" type="text/css" href="tracks.css">
</head>
<body>
<div id="body">
<div id="linearchart"></div>
<div id="brush"></div>
</div>
<input type="button" id="resizeButton" onClick="resizeLinearPlot(); return false;" value="Resize plot">
<script type="text/javascript" src="/lairdm/raw/bdd7410698e06970a9ff/data.js"></script>
<script type="text/javascript" src="/lairdm/raw/bdd7410698e06970a9ff/linearplot.js"></script>
<script type="text/javascript" src="/lairdm/raw/bdd7410698e06970a9ff/linearbrush.js"></script>
<script type="text/javascript" src="lineardemo.js"></script>
</body>
</html>
/* Initialize the layout for the linear plot, the base
parameters such as the genome size, the height of the
plot in px, the width of the plot, the div container to
put the SVG element, and an initial zoom level */
var linearlayout = { genomesize: 6264404,
height: 250,
width: 900,
container: "#linearchart",
initStart: 0,
initEnd: 200000,
};
/* Initialize the layout for the linear brush, including
what container to put the brush in to */
var contextLayout = { genomesize: 6264404,
container: "#brush" };
/* Initialize the plot with the layout and the tracks data,
then initialize the brush telling it the plot it needs
to update */
var linearTrack = new genomeTrack(linearlayout, tracks);
var brush = new linearBrush(contextLayout,linearTrack);
/* Tell the linear plot about the brush so when the linear
track is updated (via a drag event, etc) it will update
the brush */
linearTrack.addBrushCallback(brush);
/* If we have a circular plot, tell the linear plot
to let it know about updates, this is needed for
the combo demo */
window.onload = function() {
if('undefined' !== typeof cTrack) {
console.log("Hooking up circular plot callback");
linearTrack.addBrushCallback(cTrack);
brush.addBrushCallback(cTrack);
}
}
/* Callback to demo resizing the linear plot */
function resizeLinearPlot() {
linearTrack.resize(1000);
}
/* Catch a click callback on the linear plot and show what
information we're given about the track item */
function linearPopup(trackName, d) {
console.log(d);
alert("Received click event from track " + trackName + ", item: " + JSON.stringify(d));
}
/* Callback to demo click functionality on the linear plot,
the click callback is defined in the data json object for
each track */
function linearClick(trackName, d) {
console.log(d);
window.open("https://github.com/lairdm/islandplot", '_blank');
}
/* Classes for the demo's controls */
#demo-controls {
padding: 10px;
}
.control-item {
padding: 5px;
}
/* Render the chart as cleanly as possible */
#circularchart {
shape-rendering: geometricPrecision;
}
/* Text on the demo */
.mini text {
font: 9px sans-serif;
}
.main text {
font: 12px sans-serif;
}
/* Definitions for the plot resize dragger, and
resizing shadow */
.dragbar-line {
stroke-width: 1;
stroke: lightgrey;
pointer-events: inherit;
}
.dragbar-shadow {
stroke-width: 1;
stroke: lightgrey;
fill: transparent;
}
/* Style for the plot move arrow if active */
.move-cross {
stroke-width: 1;
stroke: lightgrey;
fill: lightgrey;
cursor:move;
}
.move-shadow {
cursor:move !important;
}
/* For resizing the linear chart */
#linearchart {
cursor: -webkit-grab; cursor: -moz-grab;
}
#linearchart:active {
cursor: -webkit-grabbing; cursor: -moz-grabbing;
}
.mainTrack {
cursor: pointer;
cursor: hand;
}
/* Definitions for first stranded track, colour, stroke */
.track1_pos {
fill: darksalmon;
stroke: #d1876d;
stroke-opacity: 0.8;
stroke-width: 1;
}
.track1_neg {
fill: #FFCC00;
fill-opacity: .7;
/*stroke-width: 1;
stroke: #4c602a;*/
}
/* In a linear track if an intergenic
region is defined, give it a colour */
.track1_none {
fill: #cccccc;
fill-opacity: .7;
stroke-width: 1;
}
/* And we want to show the user as they hover
over a track, change the colour */
.track1_pos:hover {
fill: red;
stroke-width: 1;
stroke: 1;
}
.track1_neg:hover {
fill: red;
fill-opacity: .9;
stroke-width: 1;
stroke: red;
}
/* In a linear track, if there are regulatory
elements such as transcription factors and
terminators, give them a colour for the stroke */
.track1_arrow_pos, .track1_arrow_neg, .track3_arrow {
stroke-width: 1;
stroke: black;
}
/* Labels on the linear track */
.track1_text {
fill: white;
font-weight: bold;
font: 12px arial;
}
/* Track 2 is also a stranded track, give it
a different set of colours */
.track2_pos {
fill: #000099;
fill-opacity: .7;
}
/* When a linear track is zoomed to the point
it's text is visible an extra class is added
to the element we can hook in to */
.track2_pos_zoomed {
stroke-width: 1px;
stroke: #647381;
}
.track2_neg {
fill: #006600;
fill-opacity: .7;
}
.track2_neg_zoomed {
stroke-width: 1px;
stroke: #007300;
stroke-opacity: 0.7;
}
.track2_text {
fill: white;
font-weight: bold;
font: 12px arial;
}
/* Track 3 is a non-stranded track, so no _pos
and _neg modifiers on the classes */
.track3 {
fill: #3399FF;
fill-opacity: .7;
}
.track3:hover {
fill: blue;
fill-opacity: .9;
}
.track3_text {
fill: white;
font-weight: bold;
font: 12px arial;
}
/* The GC Plot type track, give the stroke a colour */
.gcplot {
stroke: black;
}
/* Track 5 is the glyphs, classes of a concatenation
of the track name and the type of glyph in the track */
.track5_vfdb {
fill: #663300;
}
.track5_adb {
fill: #FF9933;
}
/* Give a colour to the glyph track's stroke */
.linearplot.gapTrack {
stroke: grey;
fill: lightgrey;
opacity: 0.5;
}
.gapTrack {
stroke: grey;
}
/* Set the stroke width of the axis lines */
.trackAxis .domain {
stroke-width: 1;
}
/* In a linear track, we need to set the
colours for the drag brush */
.brush .background {
stroke: black;
stroke-width: 2;
fill: slategray;
fill-opacity: .3;
}
.brush .extent {
stroke: gray;
fill: dodgerblue;
fill-opacity: .365;
}
/* In a circular plot if there's a
drag brush for zoomed region, define the
colours and style */
.polarbrush {
fill: lightgrey;
opacity: 0.5;
}
/* In the circular plot, the circular end points
for the drag brush */
.brushEnd {
fill: "red";
}
.brushStart {
fill: "green";
}
/* If we need to set an element to hidden, give
ourselves a class */
.linear_hidden {
visibility: hidden;
}
/* For regulatory elements in a linear plot,
define the colours and stroke for the lollipop
head (terminator site) */
.lollipophead {
stroke:#000000;
stroke-opacity: 1;
fill: none;
}
.lollipopstemstart {
fill:none;
stroke:#000000;
stroke-width: 1px;
stroke-linecap:butt;
stroke-linejoin:miter;
stroke-dasharray: 5,5;
}
.lollipopstemend {
fill:none;
stroke:#000000;
stroke-width: 1px;
stroke-linecap:butt;
stroke-linejoin:miter;
}
/* For our tooltips, how should we display them? */
.d3-tip {
line-height: 1;
font: 12px arial;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment