Skip to content

Instantly share code, notes, and snippets.

View robert-moore's full-sized avatar

Rob Moore robert-moore

View GitHub Profile
@robert-moore
robert-moore / SASS Animations Mixin
Created November 8, 2014 15:09
A mixin for simple keyframe animations with SASS
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}
@robert-moore
robert-moore / SASS Transition Mixin
Last active August 29, 2015 14:08
Mixin for SASS Transition
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
a {
color: gray;
@robert-moore
robert-moore / README.md
Last active January 17, 2021 08:38
A New Pattern for Updatable D3.js Charts

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.

@robert-moore
robert-moore / index.html
Last active August 25, 2015 20:01
Simple D3.js Bar Chart
<!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;
}
@robert-moore
robert-moore / README.md
Last active August 25, 2015 20:00
Simple D3.js Bar Chart Generation

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

@robert-moore
robert-moore / README.md
Last active September 9, 2015 16:55
Simple D3.js Bar Chart Using Reusable Pattern
@robert-moore
robert-moore / README.md
Last active September 6, 2015 20:10
D3.js Bar Chart with configuration variables

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.

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"];
@robert-moore
robert-moore / gradient.js
Last active March 22, 2017 19:46
Blue Radial SVG Gradient with D3.js
var blueRadialGradientStops = [{
"color": "#0189DF", "offset":0
}, {
"color": "#005A9B", "offset":30
}, {
"color": "#00326A", "offset":63
}, {
"color": "#071932", "offset":100
}
];