Helmut Drewes drewes

PostgreSQL & PostGIS Cheatsheet

This is a collection of information on PostgreSQL and PostGIS for what I tend to use most often.

A box-and-whisker plot uses simple glyphs that summarize a quantitative distribution with five standard statistics: the smallest value, lower quartile, median, upper quartile, and largest value. This summary approach allows the viewer to easily recognize differences between distributions. Data from the Michelson–Morley experiment. Implementation contributed by Jason Davies. This example periodically randomizes the values to demonstrate transitions.

Designed by Stephen Few, a bullet chart “provides a rich display of data in a small space.” A variation on a bar chart, bullet charts compare a given quantitative measure (such as profit or revenue) against qualitative ranges (e.g., poor, satisfactory, good) and related markers (e.g., the same measure a year ago). Layout inspired by Stephen Few. Implementation based on work by Clint Ivy, Jamie Love of N-Squared Software and Jason Davies. The "update" button randomizes the values slightly to demonstrate transitions.

Another T score bulleT

After finishing this chart I found Jerome Cukier brilliant blog post: d3: scales, and color. I wish I could have read it before I started the first line of code.

This bulleT chart is a variant based on mbostock's bullet with Miso's d3.chart.js

Leonardo’s advice recalling Cennino’s approach: "The painter ought first to exercise his hand by coping drawings by good masters..."

This demonstrates dragging from HTML to SVG elements, which can be tricky because of the differences between SVG and HTML DOMs. JQueryUI has a nice API for handling drag and drop, including defining the appearance of a dragged object and providing start, drag, and stop events. Unfortunately, JQueryUI's "drop" does not work at all on SVG elements inside the SVG tag, although it does appear to work on the SVG tag itself.

To get over this limitation, we create a custom Drag/Drop manager, and use the start, drag, and stop events for the dragged elements in conjunction with mouseover and mouseout events on the SVG elements to determine whether or not a "drop" has been dropped on a legal SVG element.

Mouseover to see flights originating at the specified airport. The cool thing about this technique is that the interaction requires zero JavaScript — it’s all done in CSS using the :hover state to toggle visibility of an airport’s associated outgoing flight routes.

The map shows traffic accidents recorded in Oslo, Norway, for the year 2013.

The Leaflet Markercluster plugin is wonderful. Since the markerclusters are divIcons you can put whatever you want inside them using the iconCreateFunction. I wanted my clusters to reveal more information than just the marker count and figured a pie chart would do the job. So I told the iconCreateFunction to do some D3 magic and this is the result.

The example is a bit more complicated than necessary due to how my dataset is structured. But if you take a look at the defineClusterIcon() function you'll see that I use d3.nest() to build a dataset for the pie chart based on a given property from all the cluster's children. Then I pass this dataset over to the bakeThePie() function together with instructions on how to style the chart. The function returns svg markup which in turn is placed inside the divIcon.

Feel free to suggest improvements.

	from odoo import models, fields, api
	from json_field import JsonField

	class Person(models.Model):
	_name = 'example.person'
	_description = 'Person with json details'

	details = JsonField() # a json object represented as dict / list / python primitives

	#!/usr/bin/env node

	// This plugin replaces text in a file with the app version from config.xml.

	var wwwFileToReplace = "js/build.js";

	var fs = require('fs');
	var path = require('path');

	var rootdir = process.argv[2];

	html,body,#wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
	}

	.chart {
	font-family: Arial, sans-serif;
	font-size: 12px;
	}

Helmut Drewes drewes

PostgreSQL & PostGIS Cheatsheet

TOC

Another T score bulleT

This bulleT chart is a variant based on mbostock's bullet with Miso's d3.chart.js