Skip to content

Instantly share code, notes, and snippets.

@gabrielmontagne

gabrielmontagne/.block

Last active October 20, 2016 11:14
Show Gist options
  • Save gabrielmontagne/ca38bb27853b808ae4cf43d3840ada97 to your computer and use it in GitHub Desktop.
Save gabrielmontagne/ca38bb27853b808ae4cf43d3840ada97 to your computer and use it in GitHub Desktop.
Download ZIP
Stacked horizontal grid - WIP
Raw
.block
height: 800
Raw
index.html
<!doctype html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/[email protected]">
</head>
<button id="randomize-data">Randomize data</button>
<p id="data-count"></p>
<div class="grid-target"></div>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]/faker.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://npmcdn.com/@zambezi/[email protected]"></script>
<script src="https://npmcdn.com/@zambezi/[email protected]"></script>
<script src="https://npmcdn.com/@zambezi/[email protected]"></script>
<script>
const table = grid.createStackedGrid()
, target = d3.select('.grid-target').style('height', '500px')
, count = d3.select('#data-count')
d3.select('#randomize-data')
.on('click', draw)
draw()
function draw() {
const dataCount = _.random(5, 6000)
, rows = _.range(1, dataCount)
.map(_.compose(_.partial(_.pick, _, 'name', 'username', 'email'), faker.Helpers.createCard))
.map((row, i) => Object.assign({}, row, { i }))
target.datum(rows).call(table)
count.text(`There are ${dataCount} rows`)
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment