More advanced GenomeD3Plot functionality is shown in this demo, where a circular and linear plot are linked together such that panning and zooming in one plot causes an update to the other plot.
A demo of the circular plot can be found at this gist.
A demo of the linear plot 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 Combo Plots 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: 650px; | |
| left: 10px; | |
| } | |
| #brush { | |
| position: absolute; | |
| top: 900px; | |
| left: 250px; | |
| } | |
| #circularchart { | |
| position: absolute; | |
| top: 0px; | |
| left: 125px; | |
| } | |
| </style> | |
| <link rel="stylesheet" type="text/css" href="tracks.css"> | |
| </head> | |
| <body> | |
| <div id="body"> | |
| <!-- The containers that will hold the SVG of the plots --> | |
| <div id="circularchart"></div> | |
| <div id="linearchart"></div> | |
| <div id="brush"></div> | |
| </div> | |
| <!-- Sample data to be rendered --> | |
| <script type="text/javascript" src="/lairdm/raw/bdd7410698e06970a9ff/data.simple.js"></script> | |
| <!-- Circular plot library --> | |
| <script type="text/javascript" src="/lairdm/raw/bdd7410698e06970a9ff/circularplot.js"></script> | |
| <!-- Linear plot library --> | |
| <script type="text/javascript" src="/lairdm/raw/bdd7410698e06970a9ff/linearplot.js"></script> | |
| <!-- Linear brush library --> | |
| <script type="text/javascript" src="/lairdm/raw/bdd7410698e06970a9ff/linearbrush.js"></script> | |
| <!-- Initialization code to initialize the plots, this is what you would write | |
| and place in your application. Note, pulled from the linear and circular | |
| plot demo Gists --> | |
| <script type="text/javascript" src="/lairdm/raw/c6c235dbfa6e6ee61565/lineardemo.js"></script> | |
| <script type="text/javascript" src="/lairdm/raw/6a770c94c6793eee660d/circularsample.js"></script> | |
| <!-- Controls on the demo --> | |
| <div id="demo-controls"> | |
| <div class="control-item"><input type="checkbox" name="showGC" onchange="updateGC(this); return false" checked>Show GC plot</div> | |
| <div class="control-item"><input type="checkbox" name="showStrand" onchange="updateStrand(this); return false" checked>Show stranded track</div> | |
| <div class="control-item"><input type="checkbox" name="showvfdb" onchange="updateAdb(this); return false" checked>Show ADB glyph type</div> | |
| <div class="control-item"><input type="checkbox" name="showgaps" onchange="updateGaps(this); return false" checked>Show contig gap region type</div> | |
| </div> | |
| <script type="text/javascript"> | |
| // Hack to make this example display correctly in an iframe on bl.ocks.org | |
| d3.select(self.frameElement).style("height", "1025px"); | |
| </script> | |
| </body> | |
| </html> |
| /* 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 */ | |
| .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; | |
| } |