jhubley/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## ftgreenetrees.csv

          
            num
            x
            y
            name
            genus
            species
            img

            
              1
              40.692222
              -73.975278
              Ginkgo
              Ginkgo
              biloba
              ginkgo.png

            
              2
              40.6925
              -73.975278
              Northern Red Oak
              Quercus
              rubra
              northernredoak.png

            
              3
              40.692222
              -73.975833
              Black Locust
              Robinia
              pseudoacacia
              blacklocust.png

            
              4
              40.692222
              -73.975833
              Japanese Zelkova
              Zelkova
              serrata
              zelkova.png

            
              5
              40.692222
              -73.975833
              Honey Locust
              Gleditsia
              triacanthos
              honeylocust.png

            
              6
              
              
              Hackberry
              Celtis
              occidentalis
              hackberry.png

            
              7
              40.691389
              -73.978611
              Mulberry
              Morus
              
              mulberry.png

            
              8
              
              
              Callery Pear
              Pyrus
              calleryana
              callerypear.png

            
              9
              
              
              London Plane
              Platanus
              acerfolia
              londonplane.png

            
              10
              
              
              Horse Chestnut
              Aesculus
              hippocastanum
              horsechestnut.png

            
              11
              
              
              Norway Maple
              Acer
              platanoides
              norwaymaple.png

            
              12
              
              
              Black Pine
              Pinus
              thunbergii
              blackpine.png

            
              13
              
              
              Silver Linden
              Tilia
              tomentosa
              silverlinden.png

            
              14
              
              
              Japanese Pagoda
              Sophora
              japonica
              japanesepagoda.png

            
              15
              
              
              American Elm
              Ulmus
              americana
              americanelm.png

            
              16
              
              
              American Linden
              Tilia
              americana
              americanlinden.png

            
              17
              
              
              Siberian Elm
              Ulmus
              pumila
              siberianelm.png

            
              18
              
              
              Tulip Tree
              Liriodendron
              tulipifera
              tuliptree.png

            
              19
              40.691111
              -73.975
              Goldenrain Tree
              Koelreuteria
              paniculata
              goldenrain.png

            
              20
              40.690278
              -73.976389
              White Ash
              Fraxinus
              americana
              whiteash.png

            
              21
              40.690556
              -73.976667
              Amur Cork Tree
              Phellodendron
              amurense
              amurcork.png

            
              22
              40.690556
              -73.976667
              Black Cherry
              Prunus
              serotina
              blackcherry.png

            
              23
              
              
              Green Ash
              Faxinus
              pennsylvanica
              greenash.png

            
              24
              
              
              Crabapple
              Malus
              
              crabapple.png

            
              25
              
              
              Hornbeam
              Carpinus
              caroliniana
              hornbeam.png

            
              26
              
              
              Bur Oak
              Quercus
              macrocarpa
              buroak.png

            
              27
              40.689925
              -73.975048
              Osage Orange
              Maclura
              pomifera
              osageorange.png

            
              28
              40.68999
              -73.974882
              Pin Oak
              Quercus
              palustris
              pinoak.png

            
              29
              40.690039
              -73.974758
              Eastern White Pine
              Pinus
              strobus
              easternwhitepine.png

            
              30
              
              
              Sycamore Maple
              Acer
              pseudoplatanus
              sycamoremaple.png

            
              31
              
              
              Himalayan Pine
              Pinus
              wallichiana
              himalayanpine.png

            
              32
              40.689722
              -73.973611
              Magnolia
              Magnolia
              
              magnolia.png

            
              33
              40.689722
              -73.973611
              Sugar Maple
              Acer
              saccharum
              sugarmaple.png

            
              34
              40.690278
              -73.973611
              European Beech
              Fagus
              sylvatica
              europeanbeech.png

            
              35
              40.690278
              -73.973889
              English Elm
              Ulmus
              minor
              englishelm.png

            
              36
              
              
              Ornamental Cherry
              Prunus
              serrulata
              ornamentalcherry.png

            
              37
              
              
              Red Bud
              Cercis
              canadensis
              redbud.png

            
              38
              
              
              Copper Beach
              Fagus
              sylvatica
              copperbeech.png

            
              39
              
              
              Willow Oak
              Quercus
              phellos
              willowoak.png

## index.html
<!DOCTYPE html>
<head>
<title>A D3 Map, points plotted with canvas instead of SVG</title>
<style>

body {
  margin: 0;
}

#container {
  position: relative;
  overflow: hidden;
	z-index: 0;
}

#map{
	width:100%;
	height:100%;
}

#points{
	width:100%;
	height:100%;
	position:relative;
	z-index:100;
}

.layer{
	position:absolute;
	z-index:-10;
}

.tile {
	pointer-events: none;
	position: absolute;
	width: 256px;
	height: 256px;
}

.info {
  position: absolute;
  bottom: 0px;
  left: 0px;
	padding: 20px;
	background: #000;
	color: #fff;
	width: 100%;
	height: 18px;
	z-index: 1000;
	font-family:Helvetica, Arial, sans-serif;
	font-size:16px;
}

.credit{
	position:absolute;
  bottom: 0px;
  right: 0px;
	padding: 9px 20px;
	color:#fff;
	font-family:Helvetica, Arial, sans-serif;
	font-size:13px;
	z-index: 1000;
}

.credit a{
	text-decoration:none;
	color:#ddd;
}

</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.tile.v0.min.js"></script>
</head>
<body>
<div id="container">
	<div class="layer"></div>
	<div id="map">
		<canvas>
			<div id="points"></div>
		</canvas>
	</div>
	<div class="credit"><p>Data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> Tiles &copy; <a href="http://cartodb.com/attributions">CartoDB</a></p></div>
</div>
  <script type='text/javascript'>

/* global variables and initial canvas space set up*/

width = Math.max(960, window.innerWidth),
height = Math.max(500, window.innerHeight),
prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);

d3.csv("ftgreenetrees.csv", function(error, dataset) { createMap(dataset) });

var tile = d3.geo.tile()
    .size([width, height]);

var projection = d3.geo.mercator()
.scale((1 << 24) / 2 / Math.PI)
.translate([-width / 2, -height / 2]); // just temporary

var zoom = d3.behavior.zoom()
    .scale(projection.scale() * 2 * Math.PI)
    .scaleExtent([1 << 9, 1 << 25])
    .translate(projection([-73.975536, 40.691674]).map(function(x) { return -x; }))
    .on("zoom", zoomed);

var container = d3.select("#container")
    	.style("width", width + "px")
    	.style("height", height + "px")
			.call(zoom)
	    .on("mousemove", mousemoved);

var base = d3.select('#map');

var chart = d3.select('canvas')
			.attr("class", "layer")
      .attr('width', width)
      .attr('height', height);

var context = chart.node().getContext('2d');

var locations = d3.select('#points');

var layer = d3.select('.layer');

var info = base.append("div")
    .attr("class", "info");

zoomed();

function createMap(dataset) {

  var dataBinding = locations.selectAll("points.arc")
    .data(dataset)

  		.enter()
      .append("points")
      .classed("arc", true)
      .attr("x", function(d) {return projection([d.y,d.x])[0]})
      .attr("y", function(d) {return projection([d.y,d.x])[1]})
      .attr("radius", 8)
      .attr("fillStyle", "#ff0000")
  drawCanvas();
}

function drawCanvas() {

	var elements = locations.selectAll("points.arc");
  	elements.each(function(d) {
    var node = d3.select(this);

    context.beginPath();
		context.arc(node.attr("x"), node.attr("y"), node.attr("radius"), 0, 2 * Math.PI);
		context.fillStyle = node.attr("fillStyle");
    context.fill();
    context.closePath();
	})
}

function reDraw() {
	context.clearRect(0, 0, width, height);
	drawCanvas();
}

function zoomed() {
  var tiles = tile
      .scale(zoom.scale())
      .translate(zoom.translate())
      ();

  projection
      .scale(zoom.scale() / 2 / Math.PI)
      .translate(zoom.translate());

	d3.selectAll("points.arc")
			.attr("x", function(d) {return projection([d.y,d.x])[0]})
      .attr("y", function(d) {return projection([d.y,d.x])[1]})
			reDraw();

  var image = layer
      .style(prefix + "transform", matrix3d(tiles.scale, tiles.translate))
    .selectAll(".tile")
      .data(tiles, function(d) { return d; });

  image.exit()
      .remove();

  image.enter().append("img")
      .attr("class", "tile")
      .attr("src", function(d) { return "http://" + ["a", "b", "c"][Math.random() * 3 | 0] + ".basemaps.cartocdn.com/light_all/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
      .style("left", function(d) { return (d[0] << 8) + "px"; })
      .style("top", function(d) { return (d[1] << 8) + "px"; });
}

function mousemoved() {
  info.text(formatLocation(projection.invert(d3.mouse(this)), zoom.scale()));
}

function matrix3d(scale, translate) {
  var k = scale / 256, r = scale % 1 ? Number : Math.round;
  return "matrix3d(" + [k, 0, 0, 0, 0, k, 0, 0, 0, 0, k, 0, r(translate[0] * scale), r(translate[1] * scale), 0, 1 ] + ")";
}

function prefixMatch(p) {
  var i = -1, n = p.length, s = document.body.style;
  while (++i < n) if (p[i] + "Transform" in s) return "-" + p[i].toLowerCase() + "-";
  return "";
}

function formatLocation(p, k) {
  var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
  return (p[1] < 0 ? format(-p[1]) + " S" : format(p[1]) + " N") + " "
       + (p[0] < 0 ? format(-p[0]) + " W" : format(p[0]) + " E");
}


</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
num	x	y	name	genus	species	img
1	40.692222	-73.975278	Ginkgo	Ginkgo	biloba	ginkgo.png
2	40.6925	-73.975278	Northern Red Oak	Quercus	rubra	northernredoak.png
3	40.692222	-73.975833	Black Locust	Robinia	pseudoacacia	blacklocust.png
4	40.692222	-73.975833	Japanese Zelkova	Zelkova	serrata	zelkova.png
5	40.692222	-73.975833	Honey Locust	Gleditsia	triacanthos	honeylocust.png
6			Hackberry	Celtis	occidentalis	hackberry.png
7	40.691389	-73.978611	Mulberry	Morus		mulberry.png
8			Callery Pear	Pyrus	calleryana	callerypear.png
9			London Plane	Platanus	acerfolia	londonplane.png
10			Horse Chestnut	Aesculus	hippocastanum	horsechestnut.png
11			Norway Maple	Acer	platanoides	norwaymaple.png
12			Black Pine	Pinus	thunbergii	blackpine.png
13			Silver Linden	Tilia	tomentosa	silverlinden.png
14			Japanese Pagoda	Sophora	japonica	japanesepagoda.png
15			American Elm	Ulmus	americana	americanelm.png
16			American Linden	Tilia	americana	americanlinden.png
17			Siberian Elm	Ulmus	pumila	siberianelm.png
18			Tulip Tree	Liriodendron	tulipifera	tuliptree.png
19	40.691111	-73.975	Goldenrain Tree	Koelreuteria	paniculata	goldenrain.png
20	40.690278	-73.976389	White Ash	Fraxinus	americana	whiteash.png
21	40.690556	-73.976667	Amur Cork Tree	Phellodendron	amurense	amurcork.png
22	40.690556	-73.976667	Black Cherry	Prunus	serotina	blackcherry.png
23			Green Ash	Faxinus	pennsylvanica	greenash.png
24			Crabapple	Malus		crabapple.png
25			Hornbeam	Carpinus	caroliniana	hornbeam.png
26			Bur Oak	Quercus	macrocarpa	buroak.png
27	40.689925	-73.975048	Osage Orange	Maclura	pomifera	osageorange.png
28	40.68999	-73.974882	Pin Oak	Quercus	palustris	pinoak.png
29	40.690039	-73.974758	Eastern White Pine	Pinus	strobus	easternwhitepine.png
30			Sycamore Maple	Acer	pseudoplatanus	sycamoremaple.png
31			Himalayan Pine	Pinus	wallichiana	himalayanpine.png
32	40.689722	-73.973611	Magnolia	Magnolia		magnolia.png
33	40.689722	-73.973611	Sugar Maple	Acer	saccharum	sugarmaple.png
34	40.690278	-73.973611	European Beech	Fagus	sylvatica	europeanbeech.png
35	40.690278	-73.973889	English Elm	Ulmus	minor	englishelm.png
36			Ornamental Cherry	Prunus	serrulata	ornamentalcherry.png
37			Red Bud	Cercis	canadensis	redbud.png
38			Copper Beach	Fagus	sylvatica	copperbeech.png
39			Willow Oak	Quercus	phellos	willowoak.png
	<!DOCTYPE html>
	<head>
	<title>A D3 Map, points plotted with canvas instead of SVG</title>
	<style>

	body {
	margin: 0;
	}

	#container {
	position: relative;
	overflow: hidden;
	z-index: 0;
	}

	#map{
	width:100%;
	height:100%;
	}

	#points{
	width:100%;
	height:100%;
	position:relative;
	z-index:100;
	}

	.layer{
	position:absolute;
	z-index:-10;
	}

	.tile {
	pointer-events: none;
	position: absolute;
	width: 256px;
	height: 256px;
	}

	.info {
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 20px;
	background: #000;
	color: #fff;
	width: 100%;
	height: 18px;
	z-index: 1000;
	font-family:Helvetica, Arial, sans-serif;
	font-size:16px;
	}

	.credit{
	position:absolute;
	bottom: 0px;
	right: 0px;
	padding: 9px 20px;
	color:#fff;
	font-family:Helvetica, Arial, sans-serif;
	font-size:13px;
	z-index: 1000;
	}

	.credit a{
	text-decoration:none;
	color:#ddd;
	}

	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.geo.tile.v0.min.js"></script>
	</head>
	<body>
	<div id="container">
	<div class="layer"></div>
	<div id="map">
	<canvas>
	<div id="points"></div>
	</canvas>
	</div>
	<div class="credit"><p>Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> Tiles © <a href="http://cartodb.com/attributions">CartoDB</a></p></div>
	</div>
	<script type='text/javascript'>

	/* global variables and initial canvas space set up*/

	width = Math.max(960, window.innerWidth),
	height = Math.max(500, window.innerHeight),
	prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);

	d3.csv("ftgreenetrees.csv", function(error, dataset) { createMap(dataset) });

	var tile = d3.geo.tile()
	.size([width, height]);

	var projection = d3.geo.mercator()
	.scale((1 << 24) / 2 / Math.PI)
	.translate([-width / 2, -height / 2]); // just temporary

	var zoom = d3.behavior.zoom()
	.scale(projection.scale() * 2 * Math.PI)
	.scaleExtent([1 << 9, 1 << 25])
	.translate(projection([-73.975536, 40.691674]).map(function(x) { return -x; }))
	.on("zoom", zoomed);

	var container = d3.select("#container")
	.style("width", width + "px")
	.style("height", height + "px")
	.call(zoom)
	.on("mousemove", mousemoved);

	var base = d3.select('#map');

	var chart = d3.select('canvas')
	.attr("class", "layer")
	.attr('width', width)
	.attr('height', height);

	var context = chart.node().getContext('2d');

	var locations = d3.select('#points');

	var layer = d3.select('.layer');

	var info = base.append("div")
	.attr("class", "info");

	zoomed();

	function createMap(dataset) {

	var dataBinding = locations.selectAll("points.arc")
	.data(dataset)

	.enter()
	.append("points")
	.classed("arc", true)
	.attr("x", function(d) {return projection([d.y,d.x])[0]})
	.attr("y", function(d) {return projection([d.y,d.x])[1]})
	.attr("radius", 8)
	.attr("fillStyle", "#ff0000")
	drawCanvas();
	}

	function drawCanvas() {

	var elements = locations.selectAll("points.arc");
	elements.each(function(d) {
	var node = d3.select(this);

	context.beginPath();
	context.arc(node.attr("x"), node.attr("y"), node.attr("radius"), 0, 2 * Math.PI);
	context.fillStyle = node.attr("fillStyle");
	context.fill();
	context.closePath();
	})
	}

	function reDraw() {
	context.clearRect(0, 0, width, height);
	drawCanvas();
	}

	function zoomed() {
	var tiles = tile
	.scale(zoom.scale())
	.translate(zoom.translate())
	();

	projection
	.scale(zoom.scale() / 2 / Math.PI)
	.translate(zoom.translate());

	d3.selectAll("points.arc")
	.attr("x", function(d) {return projection([d.y,d.x])[0]})
	.attr("y", function(d) {return projection([d.y,d.x])[1]})
	reDraw();

	var image = layer
	.style(prefix + "transform", matrix3d(tiles.scale, tiles.translate))
	.selectAll(".tile")
	.data(tiles, function(d) { return d; });

	image.exit()
	.remove();

	image.enter().append("img")
	.attr("class", "tile")
	.attr("src", function(d) { return "http://" + ["a", "b", "c"][Math.random() * 3 \| 0] + ".basemaps.cartocdn.com/light_all/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
	.style("left", function(d) { return (d[0] << 8) + "px"; })
	.style("top", function(d) { return (d[1] << 8) + "px"; });
	}

	function mousemoved() {
	info.text(formatLocation(projection.invert(d3.mouse(this)), zoom.scale()));
	}

	function matrix3d(scale, translate) {
	var k = scale / 256, r = scale % 1 ? Number : Math.round;
	return "matrix3d(" + [k, 0, 0, 0, 0, k, 0, 0, 0, 0, k, 0, r(translate[0] * scale), r(translate[1] * scale), 0, 1 ] + ")";
	}

	function prefixMatch(p) {
	var i = -1, n = p.length, s = document.body.style;
	while (++i < n) if (p[i] + "Transform" in s) return "-" + p[i].toLowerCase() + "-";
	return "";
	}

	function formatLocation(p, k) {
	var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
	return (p[1] < 0 ? format(-p[1]) + " S" : format(p[1]) + " N") + " "
	+ (p[0] < 0 ? format(-p[0]) + " W" : format(p[0]) + " E");
	}


	</script>
	</body>
	</html>