A map of some trees in Fort Greene Park, showing Mapbox vector tiles in the background, with tree coordinates plotted on top. Tree coordinates are loaded in with data(). Tree location data gathered by me. I used Mike Bostock's vector tile example as a starting point.
This is basically the same as my last block, except the circles are drawn using canvas instead of SVG. Helpful method for large datasets, to avoid performance issues. The data binding method here comes from this great article by Irene Ros.
This example shows the points, which represent coffee shops near my apartment, maintaining their scale as one zooms in and out. There are also tooltips on mouseover, using d3.tip.
A map of Iditarod routes over the years. The routes are drawn using svg.line, and scale as you zoom. The dots have tooltips. Using vector tiles as a base.
Time lapse. Data is totally without meaning. There's not even a y axis. A basic template, needs to be cleaned up a bit.
data from http://www.nysm.nysed.gov/gis/
relief map of US from http://pubs.usgs.gov/of/1999/of99-011/online.html
border of US from natural earth file
my boundary file's a little off
<!DOCTYPE html> | |
<html> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
<body> | |
<script src="http://d3js.org/d3.v3.js"></script> | |
<script type="text/javascript"> | |
svg = d3.select("body").append("svg") | |
var w = 2000, |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
#boroughs { | |
stroke: none; | |
stroke-width: 0px; | |
fill: #ddd; | |
opacity:.9; | |
position:absolute; |
Options All | |
Order deny,allow |