Skip to content

Instantly share code, notes, and snippets.

@jeffcatania jeffcatania/_.md

Last active Aug 29, 2015
Embed
What would you like to do?
test
{"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}
<svg id="dasArea"></svg>
<table id="derTable" />
<div id="content">
<label for="typeFilterControl">Type</label>
<select id="dasFilter" />
</div>
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()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.