Simple arrow experiment

_.md

[ Launch: Tributary inlet ] 10092899 by nim23

config.json

{"description":"Simple arrow experiment","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}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/DoXTHYU.png"}

inlet.js

var lineData = [ 
  { "x": 26,   "y": 60},  { "x": 26,  "y": 130},
  { "x": 48,  "y": 130}, { "x": 48,  "y": 60},
  { "x": 67,  "y": 60},  { "x": 38, "y": 1},
  { "x": 7,  "y": 60}, { "x": 26,  "y": 60}];


var xScale = d3.scale.linear()
.domain([0, d3.max(lineData, function(d){return d.x})])
		.range([0, 50]);

var yScale = d3.scale.linear()
.domain([0, d3.max(lineData, function(d){return d.y})])
		.range([0,50]);

var lineFunction = d3.svg.line()
.x(function(d){return xScale(d.x);})
.y(function(d){return yScale(d.y);});

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

svg.append('g')
	.append('path')
	.attr('d', lineFunction(lineData))
	.attr('storke-width', 2)
	.attr('stroke', 'red')
	.attr('fill', '#e6e6e6')
	.transition()
	.duration(2000)
	.attr('fill', 'red');