Skip to content

Instantly share code, notes, and snippets.

Created September 30, 2014 17:02
Show Gist options
  • Save anonymous/a81febac88e9fe98a689 to your computer and use it in GitHub Desktop.
Save anonymous/a81febac88e9fe98a689 to your computer and use it in GitHub Desktop.
A Pen by Secret Sam.
<div id="year"></div>
<div id="ds"></div>
<div id="history"></div>
data = [{
n: "T",
d: "2014-09-01",
s: 10092
}, {
n: "T",
d: "2014-09-08",
s: 10192
}, {
n: "T",
d: "2014-09-15",
s: 12092
}, {
n: "T",
d: "2014-09-22",
s: 13092
}, {
n: "P",
d: "2014-09-01",
s: 9222
}, {
n: "P",
d: "2014-09-08",
s: 10222
}, {
n: "P",
d: "2014-09-15",
s: 13222
}, {
n: "P",
d: "2014-09-22",
s: 17222
}, {
n: "Q",
d: "2014-09-01",
s: 3222
}, {
n: "Q",
d: "2014-09-08",
s: 4222
}, {
n: "Q",
d: "2014-09-15",
s: 5252
}, {
n: "Q",
d: "2014-09-22",
s: 7322
}, {
n: "S",
d: "2014-09-01",
s: 18723
}, {
n: "S",
d: "2014-09-08",
s: 19823
}, {
n: "S",
d: "2014-09-15",
s: 19923
}, {
n: "S",
d: "2014-09-22",
s: 29823
}]
parser = d3.time.format("%Y-%m-%d").parse
data.forEach (d) ->
d.ts = parser(d.d)
ndx = crossfilter data
yeardim = ndx.dimension dc.pluck('ts')
group1 = yeardim.group().reduceSum dc.pluck('s')
dsdim = ndx.dimension dc.pluck('n')
group2 = dsdim.group().reduceSum dc.pluck('s')
group3 = yeardim.group().reduceSum dc.pluck('s')
yearChart = dc.pieChart '#year'
yearChart.width(300).height(300).dimension(yeardim).group(group1).innerRadius(80)
yearChart.label (ds) ->
"#{ds.key.getFullYear()}-#{ds.key.getMonth()+1}-#{ds.key.getDate()}"
dsChart = dc.pieChart "#ds"
dsChart.width(300).height(300).dimension(dsdim).group(group2)
.innerRadius(90)
console.log 'all', group3.all()
lineChart = dc.lineChart "#history"
_min = d3.min group3.all(), (d) ->
d.key
_max = d3.max group3.all(), (d) ->
d.key
lineChart.width(600).height(400).dimension(yeardim)
.group(group3).elasticY(true).renderDataPoints(true)
.x(d3.time.scale().domain([_min, _max]))
.brushOn(false)
.margins(top: 20, right: 10, bottom: 20, left: 50)
console.log 'min', _min, 'max', _max
#dsChart.on "filtered", (datum) ->
# console.log "filtered", datum.filters(), yeardim.top(Infinity)
dc.renderAll()
#ds {
margin-left: 2em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment