Tributary inlet

_.md

[ Launch: Tributary inlet ] 5187083 by BruceHubbard

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

/*
 The numbers of orders I've placed on Amazon.com over the years.
 
 Fast delivery + low prices = take my money!

 Formatting of scales could be better but I threw this together in 
   5 minutes (not exaggerating)
   
 Bruce Hubbard
 @brucehubbard
 [email protected]
 
 */

var data = [
  {year: 2001, orders: 1}, 
  {year: 2002, orders: 1}, 
  {year: 2003, orders: 3}, 
  {year: 2004, orders: 4}, 
  {year: 2005, orders: 13}, 
  {year: 2006, orders: 10}, 
  {year: 2007, orders: 14}, 
  {year: 2008, orders: 15}, 
  {year: 2009, orders: 19}, 
  {year: 2010, orders: 55}, 
  {year: 2011, orders: 59}, 
  {year: 2012, orders: 84},
  //2013 is projected based on current orders
  {year: 2013, orders: 115}];

var width = window.innerWidth * .55,
    height = window.innerHeight * .85,
    padding = 45;

var svg = d3.select("svg")
			.attr('height', height)
			.attr('width', width);

var xscale = d3.scale.linear()
				.domain(d3.extent(data, function(year) { return year.year; }))
				.range([padding,width-padding]);
var xaxis = d3.svg.axis()
				.scale(xscale)
				.tickFormat(function(d) {return d});
				//had to add a tickFormat because d3 by default
				//was formatting the years with commas (2,012)

svg.append('g')
		.attr('transform', 'translate(0,' + (height-padding) + ')')
		.call(xaxis);

var yscale = d3.scale.linear()
				.domain(d3.extent(data, function(year) { return year.orders; }))
				.range([height-padding, padding]);

var yaxis = svg.append('g')
				.attr('transform', 'translate(' + padding + ',0)')
				.call(d3.svg.axis().scale(yscale).orient("left"));

var line = d3.svg.line()
    .x(function(d) { return xscale(d.year); })
    .y(function(d) { return yscale(d.orders); });

svg.append("path")
      .datum(data)
      //.attr("fill", "none")
	  //.attr("stroke", "#000")
      .attr("d", line);

svg.selectAll("circle")
	.data(data)			//the meat of the example. Binds ui elems with data
	.enter()			//returns an arraylike object containing data that isn't 
						// bound to the UI
	.append("circle")	// add ui elem and bind it to each data object
	.attr("r", 10)		// set an attribute (again jQuery like)
	//using the scale objects above to properly place the circles in the graph
	.attr("cx", function(d) { return xscale(d.year); })
	.attr("cy", function(d) { return yscale(d.orders); });

style.css

path {
  fill: none;
  stroke: black;
}

text {
  font-size: 15px;
}