Skip to content

Instantly share code, notes, and snippets.

@chmille4

chmille4/index.html

Last active December 17, 2015 19:35
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 chmille4/a178c0e5813505b09384 to your computer and use it in GitHub Desktop.
Save chmille4/a178c0e5813505b09384 to your computer and use it in GitHub Desktop.
Download ZIP
Iobio.viz BarViewer Chart
Raw
readme.md

Standard bar chart with the included ability to zoom in by selecting regions in the lower chart

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="http://iobio.io/public/js/iobio.viz.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://iobio.io/public/css/iobio.viz.min.css">
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
#barViewer-viz .iobio-bar rect { fill: rgb(120,176,194); }
</style>
</head>
<body>
<div id="barViewer-viz"></div>
<script>
var m = [30, 60, 44, 70],
w = 960,
h = 500;
var barData = [ [0, 4], [1,1], [3,3], [6,4], [12,2], [18,7], [23,1], [25,2], [30,1], [36,1], [40,5], [41,3] ];
var selection = d3.select("#barViewer-viz").datum( barData );
var barViewerChart = iobio.viz.barViewer()
.xValue(function(d) { return d[0]; })
.yValue(function(d) { return d[1]; })
.wValue(function() { return 1; })
.height(h)
.width(w)
.margin({top: m[0], right: m[1], bottom: m[2], left:m[3]})
.sizeRatio(0.8)
barViewerChart( selection );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment