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

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

love how it starts pulsating when large

eesur

Play with rendering hexagons based on image colour mean values

Based/forked on code from Hexbin Heightmap

eesur

Hexagonal world map, that draws based hexagons on the generated canvas map (comment out display: hidden, in css, to see the canvas rendering)

Reference sources:

• Rendering a map as canvas
• Hexbin Heightmap based from Heightmap

eesur

testing out textures.js on paths

eesur

dorling map with force layout and voronoi grid

Chart maps countries utilising longitude and latitude co-ordinates applied with a force network. Voronoi grid applied to improve the chart's interactive experience in selecting countries and prevent jumping/flashing. Note: Grid is invisible in production.

• View code on gitHub repo
• Based on Aaron Bycoffe’s Block

eesur

Testing solutions for saving svg that contains external styles

The colours of the circles are set via css classes (not inline via d3) Just the svg node is saved, whilst keeping the external css using saveSvgAsPng (all client side)

Note: You can drag the circles and the image save the current interaction/render

eesur

flashing heatmap (random data updating, every five seconds)—testing out the very useful and awesome tilegrams

eesur

var s = d3.select('#vis') //selection

var t = 0 // increment
var w = 960
var h = 400
var reps = 1500 // number of repetitions 
var colorRainbow = d3.scaleSequential()
    .domain([0, reps])
    .interpolator(d3.interpolateRainbow)

eesur

function drawLine(data, path1, path2) {
    // the line accessor function 
    var line = d3.line()
        .x(function (d) { return d.x; })
        .y(function (d) { return d.y; })
        .curve(d3.curveLinear)

    d3.select(path1)
        .datum(data)
        .transition()