fogonwater

Glitchy D3.js map of the world. This combination of clipAngle with geo.mercator() sends things particularly crazy.

fogonwater

Notes on how I organise StatisticsNZ CSVs

This write-up details how I re-structure and organise StatisticsNZ CSVs. It makes no mention of how I handle particular data values and codes (e.g. datetimes, missing and confidential values). My practice changes a little between projects, but typically I end up with a structure along the following lines:

• I remove all footnotes and metadata.
• I separate data measured at different scales into different CSVs (e.g. meshblock data goes in a different file from area units).
• I remove all total rows.
• I rename all columns with concise but meaningful shortnames so they are easier refer to in code.
• I generate a JSON file containing key metadata and mappings between my shortnames and the original long fieldnames.

fogonwater

Quick demonstration of a way to visualise sports scores with area charts.

fogonwater

Visualisation articles and resources

Books

• Data Visualisation: A Handbook for Data Driven Design — Andy Kirk
• The Functional Art — Albert Cairo
• The Visual Display of Quantitative Information - Edward Tufte
• Visualize This: The FlowingData Guide to Design, Visualization, and Statistics — Nathan Yau

Websites

fogonwater

My d3.js starter template.

This is the little bit of scaffolding I typically use when starting a d3.js project. I typically separate the Javascript from the HTML, but it's included here for convenience. In addition to d3.js v4, this example uses:

• queue - https://github.com/d3/d3-queue "running asynchronous tasks with configurable concurrency" (now part of d3 v4).
• jetpack - https://github.com/gka/d3-jetpack "d3-jetpack is a set of nifty convenience wrappers that speed up your daily work with d3.js"
• starterkit - https://github.com/1wheel/d3-starterkit "snippets and conventions for starting a new d3 project without a fuss"

fogonwater

A d3.js starter template.

This is the little bit of scaffolding I typically use when starting a d3.js project. I typically separate the Javascript from the HTML, but it's included here for convenience. In addition to d3.js v4, this example uses the following additional libraries.

• queue - github.com/d3/d3-queue "running asynchronous tasks with configurable concurrency" (now part of d3 v4).
• jetpack - github.com/gka/d3-jetpack "d3-jetpack is a set of nifty convenience wrappers that speed up your daily work with d3.js"
• starterkit - github.com/1wheel/d3-starterkit "snippets and conventions for starting a new d3 project without a fuss"

Block here: bl.ocks.org/fogonwater/a299c3ea7f4f1fea6ee5eda061113430

fogonwater

//jetpack
!function(a,b){"undefined"!=typeof module&&module.exports?module.exports=b(require("d3")):"function"==typeof define&&define.amd?define(["d3"],b):a.d3=b(a.d3)}(this,function(a){function c(a){if("string"==typeof a){var e,c={},d=a.split(b);for(a=d.shift();e=d.shift();)"."==e?c.class=c.class?c.class+" "+d.shift():d.shift():"#"==e&&(c.id=d.shift());return c.id||c.class?{tag:a,attr:c}:a}return a}function d(b){var c=a.namespace||a.ns.qualify;return"function"==typeof b?b:(b=c(b)).local?function(){return this.ownerDocument.createElementNS(b.space,b.local)}:function(){return this.ownerDocument.createElementNS(this.namespaceURI,b)}}function e(a){return"function"==typeof a?a:function(){return this.querySelector(a)}}a.selection.prototype.translate=function(a){return this.attr("transform",function(b,c){return"translate("+["function"==typeof a?a.call(this,b,c):a]+")"})},a.transition.prototype.translate=function(a){return this.attr("transform",function(b,c){return"translate("+["function"==typeof a?a.call(this,b,c):

fogonwater

There are a couple of approaches to encoding elevation in geojson.

1. The value for a feature's coordinates key should an array of numbers, which are ordered easting, northing and (optionally) altitude. The array represents a position.
2. Alternatively, you can make the elevation value one of the feature's properties.

Both approaches are demonstrated below.

{
 "type": "Feature",

fogonwater

from __future__ import division
import math
from random import randint, choice

def distance(p1, p2):
    """ Euclidean distance """
    return math.hypot(p2[0] - p1[0], p2[1] - p1[1])

def step_towards(p1, p2, step_dist=5):
    """ Find point a specified distance between p1 & p2 """

fogonwater

license: mit