Filtering With D3js

_.md

[ Launch: Tributary inlet ] b281ad089f4f99ca5bc1 by markarios

config.json

{"description":"Filtering With D3js","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},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.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/6i8m46o.png"}

inlet.js

var data = [ {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
  {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
  {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}]

//////////////////////////////////////////
// 	define color scale
//////////////////////////////////////////

var colorscale = d3.scale.ordinal()
	.domain(["tab","visa","cash","reset"])
	.range(["#8dd3c7","#ffffb3","#bebada","#fb8072"]);

function render(data,category) {
  
//////////////////////////////////////////
// 	define canvas
//////////////////////////////////////////
  
  var canvas = d3.select("svg").append("g")
		.attr("transform","translate(100,20)")

//////////////////////////////////////////
// 	bind data to row
//////////////////////////////////////////
  
	row = canvas
		.selectAll("g")
		.data(data);
  
//////////////////////////////////////////
// 	enter, update, exit pattern
//////////////////////////////////////////

	row.enter().append("g");
	row.exit().remove();
  
	row.append("rect")
    .on("click",function(){return } ); 
  
	row.append("text");
  
	row.select("rect")
		.attr({
			width: function(d) { return d.total},
			height: "44px",
			y: function(d,i) { return 50*i},
			fill: function(d) {
			return colorscale(d.type);
          }
        });
  
	row.select("text")
    .html(function(d){return d.type;})
    .attr("y", function(d,i){ return  27+ 50*i;})
    .attr("x",function(d){ return d.total - 13*d.type.length})
    .style("font-size","22px");
  
//////////////////////////////////////////
// filter
//////////////////////////////////////////
  
  if(category !== undefined) {
	row.filter(function(d,i){ return d.type !== category})
	.attr("display","none");
  }
}

render(data,"tab");