Skip to content

Instantly share code, notes, and snippets.

View jmacqueen's full-sized avatar

Jonathan MacQueen jmacqueen

  • Bitsight
  • United States
View GitHub Profile
@jmacqueen
jmacqueen / README.md
Last active December 27, 2015 19:39
D3.js: Exploring Scaling Options for Force Directed Layouts

Using the random node and link generator, I wanted to play with some scaling options to get a feel for what the values all mean. Here we have some basic HTML5 sliders to set ranges. Sorry old IE users. I didn't feel like busting out jQueryUI.

Gravity acts to pull all of the nodes into the center of the view.

Charge is the force acting in between the individual nodes. The Charge Scaling slider applies a proportional weighting to each node based on the number of links it has. Set at 0, all nodes have the default charge of -30.

The Node Scaling adjusts the size of the individual nodes proportional to the number of links it possesses.

Node scaling is very handy in identifying major influencers (the most highly connected) in the graph. Increasing the gravity and charge scaling together help impose greater structure to the graph display.

@jmacqueen
jmacqueen / README.md
Last active December 27, 2015 18:59
D3.js: Messy Random Graph with Force Layout

I have a particular interest in organizing graph layouts. This is a deliberately messy random starting point to experiment with organizational techniques.

If you want to interact with these D3.js gists without downloading them yourself, replace https://gist.github.com with http://bl.ocks.org to go to Mike Bostock's excellent website for running D3.js gists.

@jmacqueen
jmacqueen / README.md
Last active November 11, 2019 12:11
D3.js: Highlighting Data with CSS Animations

CSS animations are typically far more processor efficient than Javascript animations. Far more clever people than I have spent a lot of brainpower optimizing the animations natively in the browser. Whenever possible, I defer to their expertise.

The animation in use is a simple scale transform:

	@keyframes pulsar {
		from {
			fill: red;
		}
		to {

fill: red;

@jmacqueen
jmacqueen / README.md
Last active December 27, 2015 02:39
Basic Grunt config for working with the Bones Wordpress starter theme

A basic Grunt configuration for working with the Bones Wordpress Starter theme. To be expanded! Compiles and compresses Sass and uses rsync to update the local installation of Wordpress for testing so I can keep my MAMP installation free of extraneous files...and simply FTP over the final result if it checks out without putting uneccessary node_modules or .scss files on the server by mistake. This was pretty much put together because I kept mistakenly FTPing over my .sass-cache files like an idiot.

For this to work, the theme in development lives in 'src' inside the project directory so node_modules, .sass-cache, gruntfile.js, package.json and src are all together in the top-level directory.

project folder
  .sass-cache
  gruntfile.js
  node_modules
 package.json