Tributary inlet

_.md

[ Launch: Tributary inlet ] 4637557 by BruceHubbard

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"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

//I try my best to explain how d3 is working it's magic below but if anything
// is unclear or could be explained better please tell me.
//
// Twitter: @brucehubbard
// Email: brucehubbard@gmail.com


//some sample data
//ADD SOME DATA HERE AND WATCH THE CHART ADJUST
var data = [1,2,3,4,5,6,7,8,9, 10, 11, 12, 23];

//height/width of our svg viewport and the amount of padding around it
//you can play around with these numbers and the graph should scale accordingly
var width = window.innerWidth * .55,
    height = window.innerHeight * .85,
    padding = 35;

//the svg element, hey this looks like jQuery
var svg = d3.select("svg")
			.attr('height', height)
			.attr('width', width);

//to build the graph and fit the data into the screen we need to 
//translate the data points to pixel locations in the graph.  The scale
//function(s) take a data domain (i.e. [0, 100]) and a desired output range
//like 0-width of the svg and it produces a function that when called with 
//a member of the data domain will return a value scaled to the desired range.
//
// an example would be a domain of [0,10] and a range of [0,50] if called:
//  scale(0) // 0
//	scale(1) // 5
//  scale(2) // 10
//  scale(10) // 50
//
// we are only using d3's linear scale in this example but many
// more exist (pow, log, ordinal, time, etc):

// For more info on scales see: https://github.com/mbostock/d3/wiki/Scales
//
// The d3.extent function below is a utility function that takes an array
// and returns the lowest and highest values as an array (i.e. [1,23]). The
// extent function can also take an additional param to tell d3 how to get the 
// data (in case of an array of objects).  
//
// See: https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_extent
var xscale = d3.scale.linear()
				.domain(d3.extent(data))
				.range([padding,width-padding]);

//to build an axis we just pass the scale to d3's axis function. Since
//the scale knows the domain of the graph the axis can be calculated 
//automagically from it
var xaxis = d3.svg.axis().scale(xscale);

//add an svg group element (g) and move it down to the bottom of the page
// (using translate(x,y)).  The .call(xaxis) adds the output of the axis 
//function to the g element.
svg.append('g')
		.attr('transform', 'translate(0,' + (height-padding) + ')')
		.call(xaxis);

//pretty much the same as the xscale
var yscale = d3.scale.linear()
				.domain(d3.extent(data))
				//since svg uses 0,0 as the top left corner we
				//need to flip the y-axis so we invert the range
				//by putting the height as the min and 0 (or padding in 
				// this case) as the max. d3 is smart enough to map it 
				//accordingly
				.range([height-padding, padding]);

//same as the xaxis except we use .orient("left") to make the axis vertical
var yaxis = svg.append('g')
				.attr('transform', 'translate(' + padding + ',0)')
				.call(d3.svg.axis().scale(yscale).orient("left"));

//Now that the graph is set up lets add some data points
//
//
//
//this example only uses "enter" which represents bound data that doesn't 
//have a UI element yet. Since we only render the graph once it's fine to just 
//use "enter" otherwise we'd need to handle the "exit" and update cases as well.
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); })
	.attr("cy", function(d) { return yscale(d); });