bio-vis-expression-bar/snippets/berry.html

Simple barchart to show expression levels across experiments

<style type="text/css">
    body{
        margin: 0;
    }
    div.wrapper {
        border-radius: 25px;
        /* padding: 20px; */
        background-color:  #FFFFFF;
        box-sizing: border-box;
    }  
    nav.navigation {
    	box-sizing: border-box;
    	width: 100%;
    	background-color: #f7c84e;
    	border-radius: 15px;
    	padding: 15px;
    }
    nav.navigation a{
    	box-sizing: border-box;
    	display: inline-block;
    	text-decoration: none;
    	color: #337ab7 !important;
    	padding: 10px 0px 10px 0px;
	    margin: 0px 0px 0px -4px;
	    width: calc(100%/7);
	    text-align: center;
	    font-size: larger;
	    border-radius: 10px;
    }
    nav.navigation a:hover{
	    background-color: #E6E6E6;
	    -webkit-transition: background-color 200ms linear;
	    -ms-transition: background-color 200ms linear;
	    transition: background-color 200ms linear;    
	    text-decoration: underline;
	}	
	footer{
		margin: 0;
		background-color:  #f7c84e;
		border-radius: 25px;    
		right: 0;
		bottom: 0;
		left: 0;    
		max-height: 55px;
		text-align: center;
	}
	footer h1{
		margin: 0;
		padding: 10px;
	}
</style>
<div class="wrapper" >
	<nav class="navigation">
		<h1>Wheat Expression Browser   <span style="font-size:50%">powered by expVIP </span>(Simulation)</h1>
		<a href="/snippets">Home</a>
		<a href="#">Studies</a>		
		<a href="#">Download</a>		
		<a href="#">Add your data</a>		
		<a href="#">Tutorial</a>		
		<a href="#">Videos</a>		
		<a href="#">Cite</a>		
	</nav>

    <div  id="bar_expression_viewer">
	</div>    
	
	<footer>
		<h1>Imagin logos here</h1>
	</footer>
</div>