eesur

var data = [
    { // 0
        ref: 'h1', // top horizontal line
        x1: 0, y1: 0, // use 0 for start, 0.5 for midway, and 1 for end 
        x2: 1, y2: 0,
    },
    { // 1
        ref: 'h2', // mid horizontal line
        x1: 0, y1: 0.5,
        x2: 1, y2: 0.5,

eesur

// x and y of each triangle point
var trianglePoints = [
    [75, 0],
    [0, 150],
    [150, 150]
];

var w = +d3.select('svg').attr('width')
var h = +d3.select('svg').attr('height')

eesur

var svg = d3.select('svg'),
    width = +svg.attr('width'),
    height = +svg.attr('height'),
    radius = 32

var circles = d3.range(9).map(function () {
    return {
        x: Math.round(Math.random() * (width - radius * 2) + radius),
        y: Math.round(Math.random() * (height - radius * 2) + radius)
    }

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()

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

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

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

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 out textures.js on paths

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