test

_.md

[ Launch: test ] a40d6456dd01d78b6bd312963b1ccfa7 by deeperx
[ 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,"inline-console":true}

inlet.js

dataset = [
                [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
              ]
              
viewport = { width: 300, height: 300 }

padding = 20

xScale = d3.scaleLinear()
.domain([ 0, d3.max(dataset, function(d) { return d[0] }) ])
              .range([ padding, viewport.width - padding ])

yScale = d3.scaleLinear()
.domain([ 0, d3.max(dataset, function(d) { return d[1] }) ])
              .range([ viewport.height - padding, padding ])

rScale = d3.scaleLinear()
.domain([ 0, d3.max(dataset, function(d) { return d[1] }) ])
              .range([ 2, 15 ])
              .clamp(true)

svg = d3.select('body')
            .append('svg')
            .attr('width', viewport.width)
            .attr('height', viewport.height)

circles = svg.selectAll('circle')
                  .data(dataset)
                  .enter()
                  .append('circle')

circles
  .transition()
  .duration(function() { return Math.random(100) * 5000 })
  .attr('cx', function(d) { return xScale(d[0]); })
  .attr('cy', function(d) { return yScale(d[1]); })
  .attr('r', d => rScale(d[1]) )