vdavez · August 8, 2015 04:46
diff --git a/glossary.csv b/glossary.csv
diff --git a/glossary.js b/glossary.js
 d3.csv('glossary.csv', function (d){
  d.forEach(function(w,i,a){
    var b = d3.select('body')
    var s = b.html()
    b.html(replaceAll(w.term, tipper(w.term, w.definition, w.url),s))
    $('[data-toggle="tooltip"]').tooltip();
  })
 })

 function tipper (text, tooltip, url) {
  var tipURL = (url ? url : "#")
  return '<a href="' + tipURL + '" data-toggle="tooltip" data-placement="bottom" title="' + tooltip + '">' + text + '</a>'
 }

 function replaceAll(find, replace, str) {
  return str.replace(new RegExp("\\b" + find + "\\b", 'g'), replace); // the "\\b" ensures that only exact matches get through
 }
diff --git a/index.html b/index.html
 <html>
 <head>
 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 </head>

 <body>
 <div class="container">
 <h1>Glossary and D3</h1>
 <p>There are some abbreviations in here, including ATO and GSA, and they deserve tooltips.</p>
 <p>Additionally, there are things that need definitions, and have outbound URLs, like 18F.</p>
 <p>These tooltips are generated automatically by d3 and bootstrap.</p>
 </div>

 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <script src="./glossary.js"></script>
 </body>
 </html>
term	definition	url
ATO	Authority to Operate
18F	a team of top-notch designers, developers, and product specialists inside the General Services Administration, headquartered at 18 and F streets in Washington, D.C.	https://18f.gsa.gov
GSA	General Services Administration	http://gsa.gov
d3	Data-Driven Documents	http://d3js.org
	d3.csv('glossary.csv', function (d){
	d.forEach(function(w,i,a){
	var b = d3.select('body')
	var s = b.html()
	b.html(replaceAll(w.term, tipper(w.term, w.definition, w.url),s))
	$('[data-toggle="tooltip"]').tooltip();
	})
	})

	function tipper (text, tooltip, url) {
	var tipURL = (url ? url : "#")
	return '<a href="' + tipURL + '" data-toggle="tooltip" data-placement="bottom" title="' + tooltip + '">' + text + '</a>'
	}

	function replaceAll(find, replace, str) {
	return str.replace(new RegExp("\\b" + find + "\\b", 'g'), replace); // the "\\b" ensures that only exact matches get through
	}
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	</head>

	<body>
	<div class="container">
	<h1>Glossary and D3</h1>
	<p>There are some abbreviations in here, including ATO and GSA, and they deserve tooltips.</p>
	<p>Additionally, there are things that need definitions, and have outbound URLs, like 18F.</p>
	<p>These tooltips are generated automatically by d3 and bootstrap.</p>
	</div>

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="./glossary.js"></script>
	</body>
	</html>