eesur

license: mit
height: 500
border: no

eesur

license: mit
height: 500
border: no

eesur

license: mit
height: 500
border: no

eesur

using a waffle chart to show time in percentage. Updating every second and squares/percentage is rounded down to nearest integer

eesur

license: mit
height: 500
border: no

eesur

license: mit
height: 500
border: no

eesur

// #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',

eesur

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)

eesur

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

eesur

(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