Lopez Hugo hugolpz

This gist is a first try to keep a clean minimal D3js reusable module under my hands. It also include the witty margin conventions, an some frequently seen data usages. Code to cut further.

References

Specifics:

Mike Bostocks, Margin conventions
Mike Bostocks, Towards Reusable Charts
Christophe Viau The D3 Reusable API. (@d3visualization)
Tom Simmons An OHLC Chart Component for D3js

World tour using Wikipedia Map guidelines, more precisely the soon to come new globe locator convention. Inspired from Jason Davies world tour, merged into my localisator code.

V.2 Change log

This code is a second wave of customization.

Base: Own made Wikiatlas localisator and some of Jason Davies codes.
Dependencies: Migration to topojson v.1.0
CSS: migration to Wikipedia map guidelines and internalize to svg

d3.svg.legend provides for a simple legend that can be displayed horizontally or vertically and accepts a few different d3 scale types.

This gist is a starting point to code a function buiding wikiatlas keys. It also gather helpful resources to learn and code further. Collaborative and versionned coding, fork, can be done on Codio.

We dream of...

Ideally, the function should take as input :

the range [zmin, zmax] (?),
an array for positives values [0, 50 200, 500, <zmax>],
an array for negative values [, -200, -100, -50, 0]

This project aim to illustrate with code the similarities and differences between .data() and .datum(). Feel free to fork and add other parallel examples, where .data() and .datum() do the same work with different syntaxes.

.data() and .datum()'s generated elements are taggued and get collored accordingly using CSS class) :

.data:hover  { fill: #B10000; opacity: 1; } /*  data = RED   */
.datum:hover { fill: #00B100; opacity: 1; } /*  datum= GREEN */

Syntax

A complete, automatic and flexible orthographic localisator for Wikipedia maps.

var bb = { "item":"India", "W": 67.0, "N":37.5, "E": 99.0, "S": 5.0 }, 
localisator("body", 200, bb.item, bb.W, bb.N, bb.E, bb.S);

It take as input :

a JS selector: a target html element's selector such as "body", "#hook", to be appended to,

D3js try for elegant map out of OSM data.

Proof of concept of grayscale image recolored directly via D3js color scale. Wikimaps colors used.

Source: The source image is a global heightmap from the Shuttle Radar Topography Mission, released as part of NASA’s Blue Marble collection at 8km resolution. The topography data is stored in a simple 130KB black&white, 8-bit PNG. In it, darker values represent lower elevations (sea floor), lighter values represent higher elevations (mountains).

Colors are read out of the image using the Canvas API.

Data properties:

[0,255]: there are 8 bits per channel, values range thus is [0-255].
0: the [deepest depression below sea level](http://en.wikipedia.org/wiki/List_of_plac

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Interpolating Geodata</title>
	<meta charset="utf-8" />
	</head>
	<style>
	html,body {
	height: 100%;
	width: 100%;
	margin: 0;

	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<title>Download SVG</title>
	<style type="text/css">
	#download{
	cursor: pointer;
	text-decoration: none;
	color: black;