Drew Bollinger drewbo

How to create D3 visualizations that resize and scale well

When creating the SVG, add this bit of D3:

.attr("id","chart")
.attr("viewBox","0 0 960 500")
.attr("perserveAspectRatio","xMinYMid")

Then later in the code, add this bit of jQuery:

Mapping the Streets of Ireland With R and ggplot2

Earlier today an interesting article about plotting the streets of france appeared in my feed. What Simon does in his blog post is essentially read OSM street-lines-data for France and displays it in what I find to be a rather traditional and elegant way.

The first thing I immediately though of was: "I'd love to see this for Ireland". As an OSX user, it took a few tricks to get the article replicated for Ireland therefore I've decided to share my notes.

Should you wish to replicate this for your country, here are some notes I've taken.

Get The Data

Context

The observer deployment data from the 2014 Afghanistan runoff elections was provided in various forms (excel, word) and saved as xlsx files (so the work is visible) and then csvs with minimal editing. That data is all read into R and joined with the updated polling center data to create the TileMill source data (as a csv).

For manual edits, I added the new name information into rosetta_fix.csv and the new name/spatial information (calculated from iec_runoff_polling_centers_en_jun2014-geojson_cl.csv") to district_centroid.csv.

All the extra lat/long calculations were saved as extracentroidcalc.xlsx.

FEFA

Select Multiple

experimenting with multiple selections

A Pen by Drew on CodePen.

License.

	(defn zp "Zero Pad numbers - takes a number and the length to pad to as arguments"
	[n c]
	(loop [s (str n)]
	(if (< (.length s) c)
	(recur (str "0" s))
	s)))

	// Zero Pad a number in Javascript
	// Takes e.g. zp(42,5) -> "00042"

	var zp = function(n,c) {
	var s = String(n);
	if (s.length< c) { return zp("0" + n,c) }
	else { return s } };

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

	.circle {
	fill: steelblue;
	}

	</style>
	<div class="d3" id="foo"></div>