biovisualize/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script>
    <script type='text/javascript' src="infos.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container"></div>

<script id="main-tpl" type="text/html">

<div id="info-section">
	<div id="consultant-info">
		<span id="consultant-name">{consultantName}</span><br>
		{consultantAddress}<br>
		{consultantEmail}
	</div>

	<div id="client-info">
		Attention To:<br>
		{clientName}<br>
		{clienAddress}<br>
		{clientEmail}
	</div>

	<div id="bill-info">
		{date}
	</div>
</div>

<div id="description">
	<table>
		<tr><th>Description</th><th>Price</th></tr>
		{jobs}
		<tr><td id="payment-cell">Total:</td><td>{paymentTotal}</td></tr>
	</table>

</div>

<div id="footnote">{note}</div>

</script>

<script id="description-partial" type="text/html">
<tr><td>{jobName}</td><td>{jobPrice}</td></tr>
</script>

<script>

var compileTemplate = function(_template, _values){
    return [].concat(_values).map(function(d, i){
    	return _template.replace(/{([^}]*)}/g, function(s, key){return d[key] || '';});
    }).join('\n');
};

var format = d3.format('>$,.2f');
var total = d3.sum(valuesPartial.map(function(d, i){ return d.jobPrice; }));
valuesPartial.forEach(function(d, i){ d.jobPrice = format(d.jobPrice); });
var compiledPartial = compileTemplate(d3.select('#description-partial').html(), valuesPartial);
values.jobs = compiledPartial;
values.paymentTotal = format(total);
var compiledTemplate = compileTemplate(d3.select('#main-tpl').html(), values);

d3.select('#container').html(compiledTemplate);

</script>

</body>
</html>

## infos.js
var valuesPartial = [
    {jobName: 'Job description 1', jobPrice: 10},
    {jobName: 'Job description 2', jobPrice: 10}
];

var values = {
    consultantName: 'Name',
    consultantAddress: 'Address',
    consultantEmail: 'Email',
    clientName: 'Client name',
    clienAddress: 'Client Address',
    clientEmail: 'Client email',
    date: 'Date',
    note: "Footnote"
};

## style.css
div, table, td, th{
	padding: 10px;
}
table{
	border-collapse: collapse;
}
#description{
	padding: 0;
	border: 1px solid black;
}
#client-info, table, td, th{
	border: 1px solid silver;
}
#container{
	border: 1px solid black;
}
#footnote{
	font-size: 14px;
}
#consultant-name{
	font-size: 40px;
}
#payment-cell{
	text-align: right;
}
table tr:last-child td:last-child{
	border: 2px solid black;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#container{
	width: 800px;
}
#info-section{
	height: 200px;
}
#consultant-info, #bill-info{
	float: left;
	width: 300px;
}
#client-info, #client-info, #bill-info{
	float: right;
	width: 300px;
}
#bill-info{
	clear: both;
}
table{
	width: 100%;
}
table td:first-child{
	width: 90%;
}
table td:last-child{
	width: 10%;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title></title>
	<script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script>
	<script type='text/javascript' src="infos.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>

	<div id="container"></div>

	<script id="main-tpl" type="text/html">

	<div id="info-section">
	<div id="consultant-info">
	<span id="consultant-name">{consultantName}</span><br>
	{consultantAddress}<br>
	{consultantEmail}
	</div>

	<div id="client-info">
	Attention To:<br>
	{clientName}<br>
	{clienAddress}<br>
	{clientEmail}
	</div>

	<div id="bill-info">
	{date}
	</div>
	</div>

	<div id="description">
	<table>
	<tr><th>Description</th><th>Price</th></tr>
	{jobs}
	<tr><td id="payment-cell">Total:</td><td>{paymentTotal}</td></tr>
	</table>

	</div>

	<div id="footnote">{note}</div>

	</script>

	<script id="description-partial" type="text/html">
	<tr><td>{jobName}</td><td>{jobPrice}</td></tr>
	</script>

	<script>

	var compileTemplate = function(_template, _values){
	return [].concat(_values).map(function(d, i){
	return _template.replace(/{([^}]*)}/g, function(s, key){return d[key] \|\| '';});
	}).join('\n');
	};

	var format = d3.format('>$,.2f');
	var total = d3.sum(valuesPartial.map(function(d, i){ return d.jobPrice; }));
	valuesPartial.forEach(function(d, i){ d.jobPrice = format(d.jobPrice); });
	var compiledPartial = compileTemplate(d3.select('#description-partial').html(), valuesPartial);
	values.jobs = compiledPartial;
	values.paymentTotal = format(total);
	var compiledTemplate = compileTemplate(d3.select('#main-tpl').html(), values);

	d3.select('#container').html(compiledTemplate);

	</script>

	</body>
	</html>
	var valuesPartial = [
	{jobName: 'Job description 1', jobPrice: 10},
	{jobName: 'Job description 2', jobPrice: 10}
	];

	var values = {
	consultantName: 'Name',
	consultantAddress: 'Address',
	consultantEmail: 'Email',
	clientName: 'Client name',
	clienAddress: 'Client Address',
	clientEmail: 'Client email',
	date: 'Date',
	note: "Footnote"
	};
	div, table, td, th{
	padding: 10px;
	}
	table{
	border-collapse: collapse;
	}
	#description{
	padding: 0;
	border: 1px solid black;
	}
	#client-info, table, td, th{
	border: 1px solid silver;
	}
	#container{
	border: 1px solid black;
	}
	#footnote{
	font-size: 14px;
	}
	#consultant-name{
	font-size: 40px;
	}
	#payment-cell{
	text-align: right;
	}
	table tr:last-child td:last-child{
	border: 2px solid black;
	}

	, :before, *:after {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	}
	#container{
	width: 800px;
	}
	#info-section{
	height: 200px;
	}
	#consultant-info, #bill-info{
	float: left;
	width: 300px;
	}
	#client-info, #client-info, #bill-info{
	float: right;
	width: 300px;
	}
	#bill-info{
	clear: both;
	}
	table{
	width: 100%;
	}
	table td:first-child{
	width: 90%;
	}
	table td:last-child{
	width: 10%;
	}