Line Charts

_.md

[ Launch: Tributary inlet ] 76dc99b561679d06517e by ramnathv

app.css

{}

config.json

{"description":"Line Charts","endpoint":"","display":"svg","public":true,"require":[{"name":"lodash","url":"https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"helper.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"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}},"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/ogyR4x0.png"}

inlet.coffee

initOpts = (width, height) ->
  opts = 
    margin: {top: 25, bottom: 20, left: 20, right: 20}
    width: width
    height: height
  opts.owidth =  opts.width + opts.margin.left + opts.margin.right
  opts.oheight = opts.height + opts.margin.top + opts.margin.bottom
  opts
  

      
O = initOpts(600, 282)

# Accessors
A =
  x: (d) -> d.x
  y: (d) -> d.y

# Scales  
S =
  x: d3.scale.linear().range([0, O.width])
  y: d3.scale.linear().range([O.height, 0])
  c: d3.scale.category10()

# Axes  
Ax =
  x: d3.svg.axis().scale(A.x).orient("bottom")
  y: d3.svg.axis().scale(A.y).orient("left")
  

# Create Data
N = 24
D1 = d3.range(N).map (i) -> {x: i, y: Math.abs(Math.random())*100}
D2 = d3.range(N).map (i) -> {x: i, y: Math.abs(Math.random())*30}
D3 = d3.range(N).map (i) -> {x: i, y: Math.abs(Math.random())*100}

D = [D1, D2]



S.x.domain d3.extent(_.flatten(D), A.x)
S.y.domain d3.extent(_.flatten(D), A.y)

Chain = (obj, config) ->
  Object.keys(config).reduce -> 
     (p, k) -> p[k](config[k])
    ,obj
    
Line = (S, A, config=false) -> 
  l = d3.svg.line()
    .x((d) -> S.x(A.x(d)))
    .y((d) -> S.y(A.y(d)))
    
  
Area = (S, A) -> d3.svg.area()
  .x((d) -> S.x(A.x(d)))
  .y0(O.height)
  .y1((d) -> S.y(A.y(d)))
  .interpolate("basis")
  
myline = Line(S, A).interpolate("basis")

console.log myline.interpolate()

svg = d3.select("svg")
  .attr({"width": O.width, "height": O.height})
  .append("g")
  .attr("transform", "translate(#{O.margin.left}, #{O.margin.top})")


lineSvg = svg.selectAll("path").data(D)
  

renderLine = (C, L) ->
  C.enter().append("path")
   .classed("line", true)
   .attr("d", L)
   .attr("fill", "none")
   .attr("stroke", (d, i) -> S.c(i))
    
renderArea = (C, L) ->
  C.enter().append("path")
   .classed("line", true)
   .attr("d", L)
   .attr("fill", (d, i) -> S.c(i))
    

    
renderLine(lineSvg, myline)


# console.log myline.interpolate()