milroc

I had wanted to play with the Gooey Effect for some time. I decided to use React for this so I rewrote some of the code from the below forks.

Once the rewrite was complete, I played with some numbers and found this interesting aesthetic effect. The spinner I think is rather compelling. Would probably do a couple more iterations on it before I considered using it in a product though.

The things that are important to take note of in the rewrite is how you use could refs to manage what portion of the UI is handled with d3 and what is managed with React.

forked from sxywu's block: Gooey Circle Effect with Colors

milroc

I had wanted to play with the Gooey Effect for some time. I decided to use React for this so I rewrote some of the code from the below forks.

Once the rewrite was complete, I played with some numbers and found this interesting aesthetic effect. The spinner I think is rather compelling. Would probably do a couple more iterations on it before I considered using it in a product though.

The things that are important to take note of in the rewrite is how you use could refs to manage what portion of the UI is handled with d3 and what is managed with React.

forked from sxywu's block: Gooey Circle Effect with Colors

milroc

Built with blockbuilder.org

forked from anonymous's block: fresh block

forked from anonymous's block: fresh block

forked from anonymous's block: fresh block

milroc

license: gpl-3.0

milroc

Just a quick example of how I use React + d3 now a days.

milroc

This is an implentation of the Bubble Cursor, which was originally introduced by Tovi Grossman and Ravin Balakrishnan at CHI 2005.

milroc

# Code for slides:

# 1. Avoid code in your slides, if you have 10 slides and more
# than 2 have code in it, you are making people do a diff review
# while you babble on in front of them...

# 2. Explain the hard concepts with anecdotes, or visuals.

# 3. Code on slides should be taken with MUCH more care to comprehension
# than code in your repository, imagine if you only had 3 seconds

milroc

// micro example for the d3.js day 1 course taught by @vicapow
// https://github.com/mbostock/d3/wiki/Selections#control
// is part of the API to look at
// most of this code is about readability
// the performance should be congruent through all options
// roughly

var circles = d3.selectAll('.circles').data([3, 2, 1, 0]);

// option one

milroc

Source: American Community Survey, 2011 5-Year Estimate

This map was inspired by a similar map found on Wikipedia. I wasn’t wild about the diverging color scale, so I thought it would be a fun challenge to recreate.

Finding the shapefiles was easy; I used the U.S. National Atlas 1:1,000,000 scale dataset, conveniently packaged in my U.S. Atlas repository. I reprojected the shapefiles to the California Albers projection using ogr2ogr:

ogr2ogr \
    -f 'ESRI Shapefile' \
    -t_srs 'EPSG:3310' \

milroc

/*!
 * EventEmitter v4.2.7 - git.io/ee
 * Oliver Caldwell
 * MIT license
 * @preserve
 */
(function(){"use strict";function t(){}function r(t,n){for(var e=t.length;e--;)if(t[e].listener===n)return e;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var e=t.prototype,i=this,s=i.EventEmitter;e.getListeners=function(n){var r,e,t=this._getEvents();if(n instanceof RegExp){r={};for(e in t)t.hasOwnProperty(e)&&n.test(e)&&(r[e]=t[e])}else r=t[n]||(t[n]=[]);return r},e.flattenListeners=function(t){var e,n=[];for(e=0;e<t.length;e+=1)n.push(t[e].listener);return n},e.getListenersAsObject=function(n){var e,t=this.getListeners(n);return t instanceof Array&&(e={},e[n]=t),e||t},e.addListener=function(i,e){var t,n=this.getListenersAsObject(i),s="object"==typeof e;for(t in n)n.hasOwnProperty(t)&&-1===r(n[t],e)&&n[t].push(s?e:{listener:e,once:!1});return this},e.on=n("addListener"),e.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},e.once=n("addOnceListener"),e.defineE