Elijah Meeks emeeks

d3.svg.legend provides for a simple legend that can be displayed horizontally or vertically and accepts a few different d3 scale types.

	path,circle,rect,polygon,ellipse,line {
	vector-effect: non-scaling-stroke;
	}
	svg, canvas {
	top: 0;
	}
	#d3MapZoomBox {
	position: absolute;
	z-index: 10;
	height: 100px;

	path,circle,rect,polygon,ellipse,line {
	vector-effect: non-scaling-stroke;
	}
	svg, canvas {
	top: 0;
	}
	#d3MapZoomBox {
	position: absolute;
	z-index: 10;
	height: 100px;

	path,circle,rect,polygon,ellipse,line {
	vector-effect: non-scaling-stroke;
	}
	svg, canvas {
	top: 0;
	}
	#d3MapZoomBox {
	position: absolute;
	z-index: 10;
	height: 100px;

	path,circle,rect,polygon,ellipse,line {
	vector-effect: non-scaling-stroke;
	}
	svg, canvas {
	top: 0;
	}
	#d3MapZoomBox {
	position: absolute;
	z-index: 10;
	height: 100px;

	<?xml version="1.0" encoding="UTF-8"?>
	<gexf xmlns="http://www.gexf.net/1.2draft" version="1.2" xmlns:viz="http://www.gexf.net/1.2draft/viz" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd">
	<meta lastmodifieddate="2014-03-04">
	<creator>Gephi 0.8.1</creator>
	<description></description>
	</meta>
	<graph defaultedgetype="directed" mode="static">
	<attributes class="node" mode="static">
	<attribute id="startyr" title="startyr" type="integer"></attribute>
	<attribute id="title" title="title" type="string"></attribute>

	d3.sketchy = {};

	d3.sketchy.circle = function(selection) {

	var r = 5, c = [0,0], w = 2, fillColor = "red", strokeColor = "black";

	function d3_sketchyCircle(selection) {
	selection.append("circle").attr("class", "sketchy").attr("r", r).attr("cx", c[0]).attr("cy", c[1]).style("fill", fillColor)

	r = r * 1.5;

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>D3 Touch 1</title>
	<meta charset="utf-8" />
	</head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>
	body, html {
	width:100%;
	height:100%;

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>D3 Visualizing Rotation</title>
	<meta charset="utf-8" />
	</head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
	<style>
	body, html {
	width:100%;

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

	body {
	font-family: sans-serif;
	color: #000;
	text-rendering: optimizeLegibility;
	}