Skip to content
Visualization and charting JS library for streaming genomic data
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.travis.yml
LICENSE
gulpfile.js
iobio.viz.js
iobio.viz.min.css
iobio.viz.min.js
package.json
readme.md

readme.md

iobio.viz Build Status Coverage Status

Visualization and charting JS library for streaming genomic data

Charts

See all chart types and examples

Base Attributes

These features are present on every chart

margin - the offsets of the chart. often used for scales

  var chart = iobio.viz.bar()
    .margin( {top: m[0], right: m[1], bottom: m[2], left:m[3]} )

width - the width of the chart

  var chart = iobio.viz.bar()
    .width( 500 )

height - the height of the chart

  var chart = iobio.viz.bar()
    .height( 600 )

x - the x scale of the chart. This is d3 scale object. See scales for full options

  chart.x().range();

y - the y scale of the chart. This is d3 scale object. See scales for full options

  chart.y().domain();

xValue - the x value accessor. Sets the x location for charts with glyphs placed on the x,y axis

  var chart = iobio.viz.bar()
    .xValue( function(d) { return d.pos; } )

yValue - the y value accessor. Sets the y location for glyphs placed on the x,y axis

  var chart = iobio.viz.bar()
    .yValue( function(d) { return d.count; } )

wValue - the w value accessor. Sets the width of the glyph

  var chart = iobio.viz.bar()
    .wValue( function(d) { return d.sequence.length; } )

id - the id value accessor. Sets the html id attribute value

  var chart = iobio.viz.bar()
    .id( function(d) { return 'read-' + d.name; } )

xAxis - the x axis. This is d3 axis object. See axes for full options

  chart.xAxis().orient('bottom');    

yAxis - the y axis. This is d3 axis object. See axes for full options

  chart.yAxis().ticks(10);

preserveAspectRatio

  // Determines how the chart will scale when the browser size
  // is changed by user
  chart.preserveAspectRatio('xMinYMin')

getBoundingClientRect - returns bounding client for chart

  chart.getBoundingClientRect();

transitionDuration - the duration (in milliseconds) of the standard transitions in a chart

  chart.transitionDuration(200);

color - the color of the default glyphs

  // set color
  chart.color();

brush - the brush selector. This is ad3 brush object. See brush for full options

  chart.brush('brush', function(brush) { 
      // Get selected values
      var region = brush.extent();         
      // Do something with region
    });

onChart - set events on the entire chart

  // Same events as d3
  chart.onChart('mouseover', function() { alert('hi'); });  

tooltipChart - set tooltips on the entire chart

  chart.tooltipChart(function(d) { return 'hi'; });  

Developers

Download

To get going you need to clone the repo from github

git clone https://github.com/iobio/iobio.viz.git

Install Dependencies

This will install all needed node modules

cd iobio.viz; npm install

Build JS

This will create a single development js file from everything in the src directory with sourcemaps for debugging.

gulp js-debug

This will create a single minified js file (ready for production) from everything in the src directory.

gulp js

Build CSS

This will create a single minified css file (ready for production) from everything in the src/css directory.

gulp css

Run tests

Runs all tests found in the test directory

gulp test
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.