Skip to content

Visualization and charting JS library for streaming genomic data

License

Notifications You must be signed in to change notification settings

iobio/iobio.viz

Repository files navigation

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

About

Visualization and charting JS library for streaming genomic data

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •