timeline.js

_.md

[ Launch: timeline.js ] 8467469 by samzhang111

config.json

{"description":"timeline.js","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":true,"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,"thumbnail":"http://i.imgur.com/oZmtM3H.png"}

inlet.js

var tabledata = [
	[1, 2, 3],
	[4, 5, 6],
	[7, 8, 9]  
];



var width = tributary.sw/10;
var height = tributary.sh/10;

var array = [1, 2, 3, 11, 5];
var svg = d3.select("svg");

var yaxis_offset = 193;

var xaxis_offset = 682;

var yscale_factor = 31
var yheight = d3.max(array)*yscale_factor;

var xscale = d3.scale.linear()
	.domain([0, array.length])
	.range([0, array.length*100]);

var yscale = d3.scale.linear()
	.domain([0, d3.max(array)])
	.range([yheight, 0]);

var barenter = function(d, i) {
  d3.select(this).attr({
    height: d*yscale_factor,
    width: 25,
    y: yscale(d),
    x: xscale(i), // 32+i*26,
    "fill": "#3402FF",
    "fill-opacity":0.474646520518414,
    "stroke-opacity": 0
  });
}


var keyfn = function(data) {
	return data;
}

svg	.append("g")
	.attr("class", "barchart")
	.attr('transform', 'translate(' + yaxis_offset + "," + (xaxis_offset-yheight) + ")")
	.selectAll("rect")
	.data(array, keyfn).enter()
	.append("rect")
	.attr("class", "bar")
	.each(barenter);

var xaxis = d3.svg.axis()
	.tickFormat(d3.format('d'))
	.tickSize(0, 0)
	.scale(xscale);

var yaxis = d3.svg.axis()
	.tickFormat(d3.format('d'))
	.tickSize(0, 0)
	.orient('left')
	.scale(yscale);

svg.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(' + yaxis_offset + "," + xaxis_offset + ")")
	.call(xaxis);

svg.append('g')
	.attr('class', 'y axis')
	.attr('transform', 'translate(' + yaxis_offset + "," + (xaxis_offset-yheight) + ")")
	.call(yaxis);
/*
setInterval(function() {
	var i = Math.floor(Math.random()*5);
	var rects = d3.selectAll('rect').data([array[i]], keyfn);
  
	rects.transition()
    	.attr("fill", "#3402FF");
	rects.exit()
    	.transition()
    	.attr("fill", "grey");
  
}, 1002);
*/

style.css

.axis {
	stroke: #000000;
    fill: none;
}

.x > .tick > text {
	font-size: 75px;
	fill: #000000;
  	font-family: Helvetica Neue;
  	font-weight: 361
}

.y > .tick > text {
	font-size: 10px;
	fill: #000000;
  	font-family: Helvetica Neue;
  	font-weight: 361
}