D3 Basics

_.md

[ Launch: Jason Test ] 8da7744ab1eb9456929f by axelson
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"D3 Basics","endpoint":"","display":"svg","public":true,"require":[{"name":"d3","url":"http://d3js.org/d3.v3.min.js"}],"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/Dxzwtrg.png","fullscreen":false,"ajax-caching":true}

inlet.js

var data = [{r: 37, x: 239, y: 50},
            {r: 10, x: 60, y: 176},
            {r: 42, x: 90, y: 279}];

d3.select("svg").selectAll("circle")
    .data(data)
  .enter().append("circle")
  .attr('cx', function(data) { return data.x; })
  .attr('cy', function(d,i) { return d.y; })
  .attr('style', 'fill: steelblue;')
  .attr('r', function(d) { return d.r; });
//<circle cx="123" cy="37" style="fill: steelblue;"
// r="44"></circle>