bars

_.md

[ Launch: bars ] 4599576 by enjalot
[ Launch: bars ] 4599183 by enjalot

config.json

{"description":"bars","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"consumption.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"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,"fullscreen":false,"thumbnail":"http://i.imgur.com/653mm1d.png"}

consumption.json

 [
    [
      {
        "x": "Tue Jan 22 2013 01:00:00 GMT-0500 (EST)",
        "y": 100,
        "group": 1
      },
      {
        "x": "Tue Jan 22 2013 02:00:00 GMT-0500 (EST)",
        "y": 200,
        "group":1
      }
    ],
    [
      {
        "x": "Tue Jan 22 2013 01:00:00 GMT-0500 (EST)",
        "y": 100,
        "group": 2
      },
      {
        "x": "Tue Jan 22 2013 02:00:00 GMT-0500 (EST)",
        "y": 200,
        "group": 2
      }
    ]
]

inlet.coffee

dataSet = tributary.consumption
console.log(dataSet)

width = tributary.sw
height = tributary.sh - 116

svg = d3.select "svg"

x0 = d3.scale.ordinal()
  .rangeRoundBands([0, width], .08)
  .domain(d3.time.hours(d3.time.day.floor(new Date()), d3.time.day.ceil(new Date())))

colorScale = d3.scale.category20()
console.log(colorScale(1), colorScale(2))
x1 = d3.scale.ordinal()
  .domain([1,2]).rangeRoundBands([0, x0.rangeBand()])
  
y = d3.scale.linear()
  .range([height, 100])
  .domain(d3.extent(dataSet[0].concat(dataSet[1]), (d) -> d.y))
console.log("sup")
  
xAxis = d3.svg.axis()
  .scale(x0)
  .orient("bottom")
  .tickFormat(d3.time.format("%I%p"))
  .tickValues(x0.domain().filter (d,i) -> !(i % 3))
  
yAxis = d3.svg.axis()
  .scale(y)
  .ticks(5)
  .tickFormat(d3.format(".2s"))
  .orient("left")
  

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
 .call(xAxis)

svg.append("g")
   .attr("class", "y axis")
 .call(yAxis)

svg.selectAll(".group")
.data(dataSet)
  .enter()
.append("g")
  .attr("class", "g")
  #.attr("transform", (d,i) -> console.log(i, x1(i+1)); "translate(" + x1(i+1) + ",0)")
  .style("fill", (d,i) -> colorScale(i))
.selectAll("rect")
  .data((d) -> d)
   .enter()
 .append("rect")
   .attr("x", (d) -> x0(d.x) + x1(d.group))
   .attr("y", (d) -> height - y(d.y))
   .attr("width", x1.rangeBand())
   .attr("height", (d) -> y(d.y))
   
 .on "mouseover", (d) ->
   tooltip.transition()
          .duration(200)
          .style("opacity", .9)
   tooltip.html("<p>#{formatTooltipY(d.y)} at #{formatTooltipX(d.x)}</p>")
          .style("left", (d3.event.pageX + 20) + "px")
          .style("top",  (d3.event.pageY - 28) + "px")
 .on "mouseout", (d) ->
   tooltip.transition()
          .duration(200)
          .style("opacity", 0)
          
console.log "hey"