using a waffle chart to show time in percentage. Updating every second and squares/percentage is rounded down to nearest integer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit | |
height: 500 | |
border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit | |
height: 500 | |
border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit | |
height: 500 | |
border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit | |
height: 500 | |
border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit | |
height: 500 | |
border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// #1a1a1a : #a634a0 | |
(function () { | |
var d3 = window.d3 | |
var Redux = window.Redux | |
// Create a Redux store holding the state of the app | |
// Its API is { subscribe, dispatch, getState }. | |
var store = Redux.createStore(active) | |
var initialstate = { | |
fill: '#1a1a1a', |
simple example showing how to get
the width of a div and use it's value/number
var containerWidth = +d3.select('.some-div').style('width').slice(0, -2)
it's an easy way to size/re-size drawings based on the containing div:
selection.append('svg')
.attr('width', containerWidth)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var d3 = window.d3 | |
// hook on with a temp namespace | |
d3.eesur = {} | |
d3.eesur.singleValueDonut = function createDonut () { | |
// getter/setters | |
var height = null | |
var width = null | |
var innnerRadius = 45 | |
var outerRadius = 90 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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 |