Mark DiMarco markmarkoh

Force layout test/experiment with images

Sources:

Example 'draw this chart' workflow

This is a d3.js visualization of US zip codes.

Original zip code dataset from Geocommons.

5MB shapefile with properties such as zipcode, state, name, population, area, more.

http://geocommons.com/overlays/54893 (Thank you Bill Greer)

This converts it nicely:

This example illustrates how to use the findPeaks API. You can download the library from https://github.com/efekarakus/d3-peaks.

The algorithm is based on "Improved peak detection in mass spectrum by incorporating continuous wavelet transform-based pattern matching" by Pan Du, Warren A. Kibbe and Simon M. Lin. The paper can be found here.

Centering bubbles with custom map data

Since the custom map data requires a AJAX request, all of the map plugins need to be instantiated in the done callback provided by Datamaps.

Demo app to go along with blog post about creating custom TopoJSON data here

http://datamaps.markmarkoh.com/using-custom-map-data-w-datamaps/

The Voronoi tessellation shows the closest point on the plane for a given set of points. This example updates the Voronoi diagram in response to mouse interaction! Colors by Cynthia Brewer; algorithm by Steven Fortune; implementation based on work by Nicolas Garcia Belmonte; interaction inspired by Raymond Hill.

	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://datamaps.github.io/scripts/datamaps.none.min.js"></script>

	<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
	<script>

	<script id='popup-template' type='text/x-handlebars-template'>
	{{{ popup_template }}}
	</script>
	<script>
	var chartParams = {{{ chartParams }}}
	chartParams.element = document.getElementById('{{chartId}}')

	{{# popup_template }}
	var tmplFn = Handlebars.compile(
	document.getElementById("popup-template").innerHTML.replace(/\"#!(.*?)!#\"/g, "\\$1")

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

	body {
	font: 10px sans-serif;
	margin: 0;
	}

	path.line {