path-expt-1

_.md

[ Launch: punch-card ] 428e45d5a70b9b5c3b4e by jdutta
[ Launch: split-donut ] c2012b3b494c15cbc2a7 by jdutta
[ Launch: split-donut ] 80ed144d7ce9ebc365cb by jdutta

config.json

{"description":"path-expt-1","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart_data.csv":{"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},"main.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/C2gpSLF.gif"}

inlet.js

// Experiment with paths


// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
  xScale: [0, 352],
  yScale: [0, 169],
  radiusScale: [5, 22],
  colorRange: ['#00dde5', '#5786fe']
};

function genData(n) {
  var data = [];
  var px = 0, py = 0;
  for (var i=0; i<n; i++) {
    px += Math.round(Math.random() * 70);
    py = Math.round(Math.random() * 200);
    data.push({
      x: px,
      y: py
    });
  }
  return data;
}

var data = genData(12);
//console.log(data);
drawChart(data);

function drawChart(data) {
  var svg = d3.select('svg');
  var gRoot = svg.append('svg:g')
                .attr('transform', 'translate(105, 127)');
  
  //*
  var line = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate('step');
  //*/
  
  /*
  var line = d3.svg.line.radial()
    .radius(function (d) { return Math.sqrt(d.x*d.x + d.y*d.y); })
    .angle(function (d, i) { return Math.atan(d.y/(d.x||1)); })
  //*/
  
  gRoot.append('svg:path')
    .datum(data)
  .attr('d', line);
  
}

main.css

path {
  fill: none;
  stroke: green;
  stroke-width: 2px;
}