Reusable Pattern Experiments 1

_.md

[ Launch: Tributary inlet ] dcd2f7bca766e54ce46e by ramnathv

app.css

.axis path,
.axis line {
  fill: none;
  stroke: #aaa
}

.axis text {
  font-size: 10px;
}

.line {
  fill: none;
}

.area {
  fill: steelblue;
  opacity: 0.3
}

config.json

{"description":"Reusable Pattern Experiments 1","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"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},"app.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/LB9DOh4.png"}

inlet.coffee

data = [{x: "A", y: 1}, {x: "B", y: 10}, {x: "C", y: 3}, {x: "D", y: 10}]

# Reusable Bar Chart Code
# Primitives are redefined to be
# S -> Scales
# A -> Accessors
# O -> Options (width, height, margin)
BarG = (S, A) ->
  that = this
  @G =
    x: (d) -> S.x A.x d
    y: (d) -> S.y A.y d
    width: S.x.rangeBand()
    height: (d) -> S.y.range()[0] - S.y A.y d
    fill: (d, i) -> S.c(i) 
  chart = (selection) ->
    selection.each (data) ->
      d3.select(this).selectAll("rect")
        .data(data).enter()
        .append("rect")
        .attr that.G
  chart
  
LineG = (S, A) ->
  that = this
  d_ = d3.svg.line()
    .x((d) -> S.x(A.x(d)) + S.x.rangeBand()/2)
    .y((d) -> S.y A.y d)
  @G =
    d: d_
    stroke: "darkblue"
    "stroke-width": 2
  exports = (selection) ->
    selection.each (data) ->
      d3.select(this).append("path")
        .attr("class", "line")
        .datum(data)
        .attr that.G
  exports
  
AreaG = (S, A) ->
  that = this
  @G = d3.svg.area()
    .x((d) -> S.x A.x d)
    .y0(S.y(0))
    .y1((d) -> S.y A.y d)
    .interpolate("basis")
  exports = (selection) ->
    selection.each (data) ->
      d3.select(this).append("path")
        .attr("class", "area")
        .datum(data)
        .attr("d", that.G)
  exports

Axis = (S) ->
  that = this
  exports = (selection) ->
    selection.each (data) ->
      xAxis = d3.svg.axis().scale(S.x).orient("bottom").tickSize(0)
      d3.select(this).append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0, #{S.y.range()[0]})")
       .call(xAxis)
  exports


  
O =
  margin: {top: 20, bottom: 20, left: 32, right: 20}
  width: 391
  height: 121
  
W = O.width + O.margin.left + O.margin.right
H = O.height + O.margin.top + O.margin.bottom

A =
  x: (d) -> d.x
  y: (d) -> d.y
  
S =
  x: d3.scale.ordinal().rangeRoundBands([0, O.width], 0.1).domain data.map(A.x)
  y: d3.scale.linear().range([O.height, 0]).domain [0, d3.max(data, A.y)]
  c: (d, i) -> "steelblue"
  

divs = d3.select("#display")
  .selectAll("div")
    .data([data, data, data]).enter()
  .append("div")
    .attr("class", "chart")
    
chart = divs.append("svg")
  .attr({width: W, height: H})
  .append("g")
  .attr("transform", "translate(#{O.margin.left}, #{O.margin.top})")

chart.call(BarG(S, A, O))

S1 =
  x: d3.scale.ordinal().rangePoints([0, O.width], 0.1).domain data.map(A.x)
  y: d3.scale.linear().range([O.height, 0]).domain [0, d3.max(data, A.y)]



myLine = AreaG(S, A)
chart.call(myLine)


xAxis = Axis(S)

chart
  .filter((d, i) -> i is 2)
  .call(xAxis)