ccmonster

_.md

[ Launch: ccmonster ] 5816489 by enjalot

config.json

{"description":"ccmonster","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"visits.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/jNhjHWP.png"}

inlet.js

var visit_data = tributary.visits
var width = tributary.sw;
var height = tributary.sh;
var margin = {top: 5, right: 5, bottom: 5, left: 5};
var parseDate = d3.time.format("%Y-%m-%d").parse;
 
var    entries = d3.values(visit_data);
 
    var x = d3.time.scale()
        .range([0, width]);
 
    var y = d3.scale.linear()
        .range([height, 0]);
 
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
 
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
 
    var area = d3.svg.area()
        .x(function(d) { return x(parseDate(d.date)); })
        .y0(height)
        .y1(function(d) { return y(d.visits); });
 
    var svg = d3.select("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        console.log('visits', visit_data);
 
      x.domain(d3.extent(entries, function(d) {
        console.log('d', d);
        return parseDate(d.date); }));
      y.domain([0, d3.max(entries, function(d) { return d.visits; })]);
 
      svg.append("path")
          .datum(entries)
          .attr("class", "area")
          .attr("d", area);
 
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
 
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end");

    
    
    
    
    

style.css

path {
  fill: #0000ff;
  stroke: #fff;
  stroke-width: 4;
}

visits.json

[
    {
      "date": "2013-06-01",
      "visits": 5
    },
    {
      "date": "2013-06-02",
      "visits": 10
    },
    {
      "date": "2013-06-03",
      "visits": 12
    },
    {
      "date": "2013-06-04",
      "visits": 8
    },
    {
      "date": "2013-06-05",
      "visits": 3
    }
  ]