Ziggy Jonsson ZJONSSON

This line chart is constructed from a CSV in the "Multi-Series Format" from Bureau of Labor Statistics Consumer Price Index data. The chart employs conventional margins and a number of D3 features:

d3.csv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.hcl - a perceptual color space
d3.extent, d3.min and d3.max - compute domains
d3.svg.axis - display axes
[d3.svg.line](https://github.com/mbostock/d3/wiki/SVG

d3.legend

d3.legend is a quick hack to add a legend to a d3 chart. Simply add a g and .call(d3.legend). Any elements that have a title set in the "data-legend" attribute will be included when d3.legend is called. Each title will appear only once (even when multiple items define the same data-legend) as the process uses a set based on a existing names, not an array of all items.

Color

By default the color in the legend will try to match the fill attribute or the stroke attribute of the relevant items. Color can be explicitly defined by attribute "data-legend-color"

Order

The order of items in the legend will be sorted using the top of the bounding box for each included item. The order can be explicitly defined by attribute "data-legend-pos"

See demo http://bl.ocks.org/4241973 for the original

Changes in this fork:

index.html : Original file looped through all nodes: point.each(function(d) { d.scanned = d.selected = false; }); This version only touches the nodes scanned by the quadtree (and the previous selection), resulting in faster response
quadtree.js : Experiment in internalizing the area (x1,x2,y1,y2) of each quadrant within each node-object

See original here

Client-side SSL

For excessively paranoid client authentication.

Using self-signed certificate.

Create a Certificate Authority root (which represents this server)

Organization & Common Name: Some human identifier for this server CA.

openssl genrsa -des3 -out ca.key 4096
openssl req -new -x509 -days 365 -key ca.key -out ca.crt

	<!DOCTYPE html>
	<html>
	<head>
	<title>Testing d3.js in Leaflet.js</title>

	<link rel="stylesheet" href="leaflet.css"></link>
	<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
	<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
	<style type="text/css">
	svg , g

	<!doctype html>

	<link rel="stylesheet" type="text/css" href="style.css" />

	<h1>Nutrient Scatterplot (WebGL-2D)</h1>
	<canvas id="chart"></canvas>
	<div id="controls">
	<span id="hover-food"></span><br/>
	X axis <select id="xaxis"></select><br/>
	Y axis <select id="yaxis"></select><br/>

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

	.arc {
	fill-opacity: .2;
	}

	.axis .fill {
	stroke: #aaa;

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

	.arc {
	fill-opacity: .2;
	}

	.axis .fill {
	stroke: #aaa;