test

_.md

[ Launch: test ] 1b36adb483631d2ed167 by nadbm
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var svg = d3.select("svg")

var height = 600;
var width = 1000;
var padding = 100;

var data = [
  { date: '2014-01-01', amount: 10 },
  { date: '2014-03-01', amount: 20 },
  { date: '2014-04-01', amount: 40 },
  { date: '2014-05-01', amount: 80 }
];
        
var y = d3.scale.linear()
  .domain([0, 80]) // 0 projects to 60 projects
  .range([height+padding, padding]); // Seems backwards because SVG is y-down


var x = d3.time.scale()
    .domain([
      new Date(Date.parse('2014-01-01')), // min date
      new Date(Date.parse('2014-06-01'))  // max date
    ])
    .range([padding, width - padding]);

svg.selectAll('circle')
	.data(data)
	.enter()
	.append('circle')
	.attr('r', function(d,i){return 15})
	.attr('cx', function(d,i){return x(new Date(Date.parse(d.date)));})
	.attr('cy', function(d,i){return y(d.amount);})
	.attr('fill', function(d,i) { return '#E5637C'});


//AXIS
var xAxis = d3.svg.axis()
  .scale(x)         // x is the d3.time.scale()
  .orient('bottom') // the ticks go below the graph
  .ticks(4);        // specify the number of tick

var yAxis = d3.svg.axis()
  .scale(y)         // x is the d3.time.scale()
  .orient('left') // the ticks go below the graph
  .ticks(4);        // specify the number of tick

svg.append('g')            // create a <g> element
  .attr('class', 'x axis') // specify classes
  .attr('transform', 'translate(0,'+(height+padding)+')')
  .call(xAxis);

svg.append('g')            // create a <g> element
  .attr('class', 'y axis') // specify classes
  .attr('transform', 'translate('+padding+',0)')
  .call(yAxis); 



function update() {
  var data2 = [
    { date: '2014-03-23', amount: 35 },
    { date: '2014-04-01', amount: 14 },
    { date: '2014-04-05', amount: 80 },
    { date: '2014-05-06', amount: 20 },
    { date: '2014-05-16', amount: 40 },
    { date: '2014-06-01', amount: 80 }
  ];
  var circles = svg.selectAll('circle')
    .data(data2);

  // When we enter, we just want to create the rect,
  

  // We configure the rects here so the values
  // apply to it applies to both new and existing
  // rects
  circles.enter()
      .append('circle')
  	  .attr('r', function(d,i){return 1})
      .transition() 
      .attr('r', function(d,i){return 15})
      .attr('cx', function(d,i){return x(new Date(Date.parse(d.date)));})
      .attr('cy', function(d,i){return y(d.amount);})
      .duration(1000)
      .attr('fill', function(d,i) { return '#E5637C'});
  
  circles.exit()
      .transition()
      .duration(750)
      .attr('r', function(d,i){return 1})
      .remove();
};
setTimeout(function() {update();} ,2000)