Skip to content

Instantly share code, notes, and snippets.

@craftybones

craftybones/numbers.css

Last active November 5, 2016 09:13
Show Gist options
  • Save craftybones/84bbe190ed57752b875a8dbda4e9ce1f to your computer and use it in GitHub Desktop.
Save craftybones/84bbe190ed57752b875a8dbda4e9ce1f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
numbers.css
table {
text-align: center;
}
td {
padding: 20px;
}
Raw
numbers.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="numbers.css" media="screen" title="no title" charset="utf-8">
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>
<body>
<div class="numbers">
</div>
<script src="numbers.js" charset="utf-8"></script>
</body>
</html>
Raw
numbers.js
var numbers=d3.range(1,11);
var identity=d3.scaleLinear();
var square=d3.scalePow().exponent(2);
var log=d3.scaleLog();
var logRounded=d3.scaleLog().interpolate(d3.interpolateRound);
var renderRow=function(element,data,numbers) {
element.append(data.cell).text(data.title);
element.selectAll(".nums")
.data(numbers)
.enter()
.append(data.cell)
.attr("class","nums")
.text(data.f);
}
var tableData=
[{title:"Title", f:identity, cell:"th"},
{title:"n", f:identity, cell:"td"},
{title:"n^2", f:square, cell:"td"},
{title:"log(n)", f:log, cell:"td"},
{title:"log(n) rounded", f:logRounded, cell:"td"}];
var table=d3.select(".numbers")
.append("table");
table.selectAll("tr").data(tableData)
.enter()
.append("tr")
.each(function(d,i){
renderRow(d3.select(this),d,numbers);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment