Rob Moore robert-moore

Using a new updatable chart format. Update functions are made accessible to the caller, handing over chart controls with full functionality to the caller in a modular manner. Data binding is done with method chaining, like any other configuration variable, and can be changed after initialization. This allows for changes to be rendered in the context of chart history, leveraging D3's transitions and update logic.

A simple generator function for a D3.js bar graph with an options parameter.

A bar chart using Mike Bostock's pattern of reusable charts.

A simple D3.js bar chart with some of the configuration variables abstracted out for quick and easy changes. The bar chart will scale based on the length and values of the data.

	@mixin keyframes($animation-name) {
	@-webkit-keyframes $animation-name {
	@content;
	}
	@-moz-keyframes $animation-name {
	@content;
	}
	@-ms-keyframes $animation-name {
	@content;
	}

	@mixin transition($args...) {
	-webkit-transition: $args;
	-moz-transition: $args;
	-ms-transition: $args;
	-o-transition: $args;
	transition: $args;
	}

	a {
	color: gray;

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Updatable Charts (1 of 4)</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body {
	padding: 20px 0 0 10px;
	}

	function wrap(d) {
	var allowedWidth = (x(d.x + d.dx) - x(d.x))*0.85;
	var self = d3.select(this),
	textLength = self.node().getComputedTextLength(),
	text = self.text();
	while (textLength > allowedWidth && text.length > 0) {
	text = text.slice(0, -1);
	self.text(text + '...');
	textLength = self.node().getComputedTextLength();
	}

	function numberFormat(amount, prefix, suffixArray, maxWholeDigitLength, decimalLength) {
	var suffixIndex = 0;
	while(amount > Math.pow(10, maxWholeDigitLength) && suffixIndex < suffixArray.length) {
	amount /= 1000;
	suffixIndex++;
	}
	return prefix + amount.toFixed(decimalLength) + suffixArray[suffixIndex];
	};

	var dollarSuffix = ["", "K", "M", "B"];

	var blueRadialGradientStops = [{
	"color": "#0189DF", "offset":0
	}, {
	"color": "#005A9B", "offset":30
	}, {
	"color": "#00326A", "offset":63
	}, {
	"color": "#071932", "offset":100
	}
	];