test

_.md

[ Launch: test ] 5aa065d840cc0e5920f6 by jeffcatania
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"test","endpoint":"","display":"div","public":true,"require":[{"name":"crossfilter","url":"http://dc-js.github.io/dc.js/js/crossfilter.js"}],"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},"index.html":{"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

index.html

<svg id="dasArea"></svg>

<table id="derTable" />

<div id="content">
  <label for="typeFilterControl">Type</label>
  <select id="dasFilter" />
</div>

inlet.js

var svg = d3.select("#dasArea")



svg.append("rect")
.attr({
  width: 100,
  height: 100,
  x: 200,
  y: 62,
  fill: "#3BA360"
});


var payments = crossfilter([
  {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"}
]);

//var paymentsByTotal = payments.dimension(function(d) { return d.total; });
var dimPaymentsByType = payments.dimension(function(d) { return d.type; });


var PaymentTable = function() {
  return {
    construct: function(id, dimPaymentsByType, measurePaymentTotal) {
    var derTable = d3.select(id)
	var tr = derTable.selectAll("tr")
    .data()
       .enter().append("tr")

	tr.append("td")
	.html(function(d) { return d.key; })
	tr.append("td")
		.html(function(d) { return d.value; })

	tr.exit().remove();
	}
  }
}

var PaymentTypeFilterControl = function() {
  return {
    construct: function(id, dimPaymentsByType) {
      var dasFilter = d3.select(id);
      dasFilter.on("change", function(d) {
        dimPaymentsByType.filter(this.value);
        console.log(this.value);

      })
      console.log(id);
      var option = dasFilter.selectAll("option")
         .data(dimPaymentsByType.group().reduceCount().all())
      .enter().append("option")
      .attr("value", function(d) { return d.key })
      .html(function(d) {  return d.key; })
      
    }
  }
}

var measurePaymentTotal = dimPaymentsByType.group().reduceSum(function(d) { return d.total; }).all();
var filter = PaymentTypeFilterControl().construct("#dasFilter", dimPaymentsByType, measurePaymentTotal);
var pt = PaymentTable().construct("#derTable", dimPaymentsByType);


//var typeFilterControl = d3.select("#typeFilterControl")
//	.data()