Martin Raifer tyrasd

download the source data

 wget http://fred.dev.openstreetmap.org/density/tiles.13
 wget http://fred.dev.openstreetmap.org/density/tiles.16

convert to simple, gnuplot-readable text format

 sed 's/\([0-9]*\) z=\([0-9]*\) x=\([0-9]*\) y=\([0-9]*\)/\3 \4 \1/' < tiles.13 > tiles.13.txt
 sed 's/\([0-9]*\) z=\([0-9]*\) x=\([0-9]*\) y=\([0-9]*\)/\3 \4 \1/' < tiles.16 > tiles.16.txt

This is a more wordy, narrative accompaniment to my pretty bare presentation about d3 that I gave to the jQuery DC Meetup.

What is d3?

Not a chart library (though you can make charts with it)
Not a map library (though you can make maps with it)

Which is to say, d3 can be used for building things, but the 'atomic parts' are lower-level than bar graphs or projections or so on. This is a powerful fact. It also means that d3 is a good basis for simple interfaces, like Vega.js, that make its power accessible in other ways.

Not a compatibility layer (it doesn't work with bad browsers)

Booting Up A Development Server

Open a console. Terminal.app on Macs, your shell or whatever on PCs.

Python is easiest:

python -m SimpleHTTPServer 8000

Then go to http://localhost:8000/ in a web browser.

In which I begrudglingly compare MapCSS and CartoCSS because people keep asking.

I hate this kind of writing - it's annoying to try to describe one bit of software versus another, and this can and will fall out of date every time that somebody makes a big change to their library. But people want it, or whatever, so here it is.

Since CartoCSS and Cascadenik are weird cousins, the big difference is between them and MapCSS.

Let's see, differences:

CartoCSS is designed for Mapnik. That is, it tries to expose every possible Mapnik style option and ability, and supports every Mapnik datasource.
MapCSS is designed for OSM. That is, it makes it easy to style based on OpenStreetMap data types, tags, and so on.

	<!DOCTYPE html>
	<!-- this document under WFTPL -->
	<!-- this document shows data from various sources (OSM data under ODbL, data from province of Bolzano / Italy (unknown licence) -->
	<html>
	<head>
	<title>compare osm with province BZ data</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	#! /usr/bin/python2
	# vim: fileencoding=utf-8 encoding=utf-8 et sw=4

	import sys
	import os
	import xml.etree.cElementTree as ElementTree
	import string
	import math

	def contains(poly, pos):

	<!DOCTYPE html>
	<meta charset="utf-8">
	<title></title>
	<style>

	body {
	font: 10px sans-serif;
	background:#000;
	width:500px;
	margin:0 auto;

	from pylab import *

	def cface(ax, x1,x2,x3,x4,x5,x6,x7,x8,x9,x10,x11,x12,x13,x14,x15,x16,x17,x18):
	# x1 = height of upper face
	# x2 = overlap of lower face
	# x3 = half of vertical size of face
	# x4 = width of upper face
	# x5 = width of lower face
	# x6 = length of nose
	# x7 = vertical position of mouth

	import SimpleHTTPServer
	class CORSHTTPRequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
	def send_head(self):
	"""Common code for GET and HEAD commands.

	This sends the response code and MIME headers.

	Return value is either a file object (which has to be copied
	to the outputfile by the caller unless the command was HEAD,
	and must be closed by the caller under all circumstances), or

	//Gruber wrote this regex for matching URLs, but it took a small amount of massage to use it in JavaScript. So here.
	//Sauce: http://daringfireball.net/2010/07/improved_regex_for_matching_urls

	var p = /\b((?:https?:\/\/\|www\d{0,3}[.]\|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+\|\(([^\s()<>]+\|(\([^\s()<>]+\)))\))+(?:\(([^\s()<>]+\|(\([^\s()<>]+\)))\)\|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/i;
	p.exec('party fun www.twitter.com yay') //winning.