eesur

Play with rendering hexagons based on image colour mean values

Based/forked on code from Hexbin Heightmap

eesur

same as previous block using force layout, but using rect instead of circle

love how it starts pulsating when large

eesur

based of this really nice example: pusher.com/dynamic-graphs-with-d3-js/

data generated in this format, looping over red, green, blue and incrementing the id:

render([{
    id: 1,
    color: 'red'
}, {
 id: 2,

eesur

The area of each country using a circle at the countries centroid, based of County Circles bl.ock

Red dot is Japan

ISO 3166-1 codes

eesur

'A Bubble Chart is a multi-variable graph that resembles a combination of a Scatter plot and a Proportional Area Chart.' This example is split into a quadrant colouring the circles depending on the quadrant they fall into.

More info on Bubble Chart Chart built on d3fc

eesur

Constructing d3.rgb(r, g, b) using d3.svg.arc() to compare darker, normal and brighter variations

Sources:

• Data Visualisation with d3.js, Swizec Teller
• rgb.brighter([k])
• rgb.darker([k])

eesur

Simple example using W javascript library for responsive development with d3.js

Test by changing browser dimensions or rotating mobile. The rectangle remains the 1:4 ratio of the viewport.

eesur

Just two simple questions to prioritise tasks, using Eisenhower’s strategy matrix.

"Using the decision matrix, you will separate your actions based on four possibilities.

• Urgent and important (tasks you will do immediately)
• Important, but not urgent (tasks you will schedule to do later)
• Urgent, but not important (tasks you will delegate to someone else)
• Neither urgent nor important (tasks that you will eliminate)

The great thing about this matrix is that it can be used for broad productivity plans (“How should I spend my time each week?”) and for smaller, daily plans (“What should I do today?”)"

eesur

I needed some simple yes/no buttons that could be dropped into a prototype UI.

These toggle boolean yes and no buttons can be added into DOM as reusable UI elements. They can be passed custom click events.

Call the function and pass in container/selection as the argument:

var myButtons = noYesBtns('#some-id');

eesur

Web Audio API to apply music frequency as the data to fuel the visualisation – based on Gary Smith's terrific post.