D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
biovisualize
Full window
Github gist
Invoice using a minimalist d3 templating system
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <script type='text/javascript' src="https://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>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js