Skip to content

Instantly share code, notes, and snippets.

@eesur

eesur/.script-compiled.js

Created August 25, 2017 09:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eesur/0bd3b9350cd785be4eb1211fc4c0544f to your computer and use it in GitHub Desktop.
Save eesur/0bd3b9350cd785be4eb1211fc4c0544f to your computer and use it in GitHub Desktop.
Download ZIP
d3 | simple pagination (next/prev)
Raw
.script-compiled.js
(function () {
var d3 = window.d3
// have a reference to the containing element
var dom = d3.select('.js-vis-wrap')
// create some dummy data
/* const data = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ...] */
var data = d3.range(18).map(function (n) { return n * 10; })
// have a max number of items to display
var maxDisplay = 10
// track if the pagination is clicked
var paginationState = true
// labels for pagination button
var paginationText = ['next →', '← prev']
// loop through the data to append charts
data.forEach(function (d, i) {
console.log(d)
// put max number of items in this div
if (i < maxDisplay) {
createChart(d, i, '.js-vis-1')
} else {
// overflow any others here
createChart(d, i, '.js-vis-2')
}
})
// add pagination if over max number of items
if (data.length > maxDisplay) {
createPagination(dom)
} else {
removePagination(dom)
}
// create a simple 'chart' to illustrate example
function createChart (datum, index, selection) {
// this could be an svg etc
dom.select(selection).append('div')
.attr('class', 'col col-2 p2 m1 chart i-' + index)
.append('h1')
.attr('class', 'center')
.text(datum)
}
// add pagination
function createPagination (sel) {
sel.append('button')
.attr('class', 'pagination inline-block btn btn-primary m1')
.on('click', function () {
// main div holding 9 items
sel.select('.js-vis-1')
.classed('display-none', paginationState)
// div holding remaining items
sel.select('.js-vis-2')
.classed('display-none', !paginationState)
// update pagination state
if (paginationState) {
paginationState = false
// update the btn label 'prev'
sel.select('.pagination')
.text(paginationText[1])
} else {
paginationState = true
// update the btn label 'next'
sel.select('.pagination')
.text(paginationText[0])
}
})
.text(paginationText[0])
}
// have a method to clear pagination when not needed
function removePagination (sel) {
sel.select('.pagination').remove()
}
}())
Raw
README.md

This is an example of using a very simple pagination when you need an overflow for a small number of items (just a next/prev). It uses a flex grid and just hides and display the containing div.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- http://www.basscss.com/ -->
<link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
<!-- http://clrs.cc/ -->
<link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">
<style>
body {
background: #dddddd;
font-family: Consolas, monaco, monospace;
color: #333333;
}
.chart {
background: #fbae17;
}
.btn {
font-family: inherit;
font-size: 16px;
cursor: pointer;
display: inline-block;
padding: .5rem 1rem;
height: auto;
border: 1px solid transparent;
vertical-align: middle;
-webkit-appearance: none;
color: inherit;
background-color: transparent;
text-decoration: none;
letter-spacing: 2px;
}
.btn-primary {
color: #fff;
background-color: #de3d83;
border-radius: 3px;
}
.btn-primary:hover {
box-shadow: inset 0 0 0 20rem #C73675;
}
</style>
</head>
<body>
<section class="js-vis-wrap mx-auto max-width-4 p2">
<div class="js-vis-1 flex flex-wrap"></div>
<!-- overflow div -->
<div class="js-vis-2 flex flex-wrap display-none"></div>
</section>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- d3 code -->
<script src=".script-compiled.js" charset="utf-8"></script>
</body>
</html>
Raw
script.js
(function () {
const d3 = window.d3
// have a reference to the containing element
const dom = d3.select('.js-vis-wrap')
// create some dummy data
/* const data = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ...] */
const data = d3.range(18).map(n => n * 10)
// have a max number of items to display
const maxDisplay = 10
// track if the pagination is clicked
let paginationState = true
// labels for pagination button
const paginationText = ['next →', '← prev']
// loop through the data to append charts
data.forEach(function (d, i) {
console.log(d)
// put max number of items in this div
if (i < maxDisplay) {
createChart(d, i, '.js-vis-1')
} else {
// overflow any others here
createChart(d, i, '.js-vis-2')
}
})
// add pagination if over max number of items
if (data.length > maxDisplay) {
createPagination(dom)
} else {
removePagination(dom)
}
// create a simple 'chart' to illustrate example
function createChart (datum, index, selection) {
// this could be an svg etc
dom.select(selection).append('div')
.attr('class', 'col col-2 p2 m1 chart i-' + index)
.append('h1')
.attr('class', 'center')
.text(datum)
}
// add pagination
function createPagination (sel) {
sel.append('button')
.attr('class', 'pagination inline-block btn btn-primary m1')
.on('click', () => {
// main div holding 9 items
sel.select('.js-vis-1')
.classed('display-none', paginationState)
// div holding remaining items
sel.select('.js-vis-2')
.classed('display-none', !paginationState)
// update pagination state
if (paginationState) {
paginationState = false
// update the btn label 'prev'
sel.select('.pagination')
.text(paginationText[1])
} else {
paginationState = true
// update the btn label 'next'
sel.select('.pagination')
.text(paginationText[0])
}
})
.text(paginationText[0])
}
// have a method to clear pagination when not needed
function removePagination (sel) {
sel.select('.pagination').remove()
}
}())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment