Elijah Meeks emeeks

An example of d3.svg.ribbon using Napoleon's March through Russia made famous by Minard's map. Dataset comes from Ben Schmidt's use of it in his excellent d3.trail layout.

The pattern for using d3.svg.ribbon with geodata is simply to factor the projection into the accessors:

projection = d3.geo.equirectangular().translate([-3300,7800]).scale(8000);
sizeScale = d3.scale.linear().domain([6000,340000]).range([1,10])

ribbon = d3.svg.ribbon()
 .x(function(d) {return projection([d.lon, d.lat])[0]})

An example of d3.svg.ribbon.

Drag the circles to see the underlying single svg:path element re-interpolated based on the changing position of the points and their radii that are used to generate it. This is a different way of generating areas than d3.svg.area and might prove more suitable for some applications.

	{
	"label": "Art Movements",
	"children": [
	{"label": "Renaissance",
	"children": [
	{"label": "Italian Renaissance",
	"start": 1275,
	"end": 1602},
	{"label": "Renaissance Classicism",
	"start": 1475,

	(function() {
	d3.layout.timeline = function() {
	var timelines = [];
	var dateAccessor = function (d) {return new Date(d)};
	var processedTimelines = [];
	var startAccessor = function (d) {return d.start};
	var endAccessor = function (d) {return d.end};
	var size = [500,100];
	var timelineExtent = [-Infinity, Infinity];
	var setExtent = [];

	(function() {
	d3.layout.timeline = function() {
	var timelines = [];
	var dateAccessor = function (d) {return new Date(d)};
	var processedTimelines = [];
	var startAccessor = function (d) {return d.start};
	var endAccessor = function (d) {return d.end};
	var size = [500,100];
	var timelineExtent = [-Infinity, Infinity];
	var setExtent = [];

	(function() {
	d3.layout.timeline = function() {
	var timelines = [];
	var dateAccessor = function (d) {return new Date(d)};
	var processedTimelines = [];
	var startAccessor = function (d) {return d.start};
	var endAccessor = function (d) {return d.end};
	var size = [500,100];
	var timelineExtent = [-Infinity, Infinity];
	var setExtent = [];

	(function() {
	d3.layout.timeline = function() {
	var timelines = [];
	var dateAccessor = function (d) {return new Date(d)};
	var processedTimelines = [];
	var startAccessor = function (d) {return d.start};
	var endAccessor = function (d) {return d.end};
	var size = [500,100];
	var timelineExtent = [-Infinity, Infinity];
	var setExtent = [];

	/global d3:false /
	/jshint unused:false/

	/**
	* Initiate the sketchy library
	* @constructor
	*/
	var d3sketchy = function(){

	/**

	<html>
	<head>
	<title>Cheap Sketchy</title>
	<meta charset="utf-8" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
	</head>
	<style>
	svg {
	height: 500px;
	width: 500px;