Filtering With D3js

_.md

[ Launch: Filtering With D3js ] ed99485320ecdab83654 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},"style.css":{"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

//////////////////////////////////////////
// the red button needs to be made into a reset
//////////////////////////////////////////

  

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",undefined])
	.range(["#8dd3c7","#ffffb3","#bebada","#fb8072"]);

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

//////////////////////////////////////////
// 	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})
	.classed("hide","true");
  }
  

}



var userinterface = d3.select("svg").append("g")
	.classed("ui","true")
	.attr("transform","translate(141,645)");

var button = userinterface.selectAll("circle")
	.data(colorscale.domain())
	.enter()
	.append("circle")
	.attr("r",39)
	.attr("cy",40)
	.attr("cx",function(d,i) {return i*175})
	.attr("fill",function(d,i) {return colorscale(d)})
	.attr("id",function(d,i) {return d})

d3.select("circle#tab").on("click",function() {filter(data,"tab")});

d3.select("circle#visa").on("click",function() {filter(data,"visa")});

d3.select("circle#cash").on("click",function() {filter(data,"cash")});

style.css

g.hide {
   visibility: hidden;
}