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.
# read data and replace dots in names with underscores | |
obesity = read.csv( | |
'http://www.stat.berkeley.edu/classes/s133/data/obesity.csv', | |
stringsAsFactors = F | |
) | |
names(obesity) = gsub("\\.", "_", names(obesity)) | |
# add column with two letter state names and | |
obesity = plyr::mutate(obesity, | |
State = str_trim(State), |
<!doctype HTML> | |
<meta charset = 'utf-8'> | |
<html> | |
<head> | |
<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script> | |
<script src='http://d3js.org/topojson.v1.min.js' type='text/javascript'></script> | |
<script src='http://datamaps.github.io/scripts/datamaps.all.min.js' type='text/javascript'></script> | |
<style> |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
margin: 0; | |
} | |
path.line { |
<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> | |
<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> |
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/
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.
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: