Sundar Singh 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)

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

	var render = (function () {

	// keys for concentric circles
	var dataKeys = ['studentNumber', 'femalePercentRatio', 'malePercentRatio', 'intlStudentsPercent']

	// helpers
	var width = 300
	var height = 250

	var t = d3.transition()

	function circleLegend(selection) {

	var instance = {}

	// set some defaults
	var api = {
	domain: [0, 100], // the values min and max
	range: [0, 80], // the circle area/size mapping
	values: [8, 34, 89], // values for circles
	width: 500,

	var d3 = window.d3
	/* const data = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90] */
	var data = d3.range(9).map(function (n) { return n * 10; })

	var sqrtScale = d3.scaleSqrt()
	.domain([0, 100])
	.range([0, 70])

	var svg = d3.select('svg')
	// const width = +svg.attr('width')

	(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 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

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