index.html

<div id="year"></div>
<div id="ds"></div>
<div id="history"></div>

Jtsqm.markdown

Jtsqm

A Pen by Anonasaurus Rex on CodePen.

License.

script.coffee

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()

style.css

#ds {
  margin-left: 2em;
}