Learning

_.md

[ Launch: Learning ] 351656e8d604fbcf0f02 by feedthebayer

config.json

{"description":"Learning","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},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.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,"inline-console":false,"thumbnail":"http://i.imgur.com/LMmtE8J.png"}

inlet.js

var svg = d3.select('svg');

var dataset = [ 22, 7, 5, 26, 11, 8, 25, 14, 23, 19,
                14, 11, 35, 29, 11, 13, 12, 17, 18, 10,
               18, 18, 15.01995008, 9 ];

var xScale = d3.scale.linear()
					 .domain([0, dataset.length])
				     .range([10, tributary.sw-10]);					
var yScale = d3.scale.linear()
					 .domain([0, d3.max(dataset)])
				     .range([tributary.sh-10, 50]);

var xAxis = d3.svg.axis()
				  .scale(xScale)
				  .orient("top");

var yAxis = d3.svg.axis()
				  .scale(yScale)
				  .orient("right");

svg.selectAll('circle')
  .data(dataset)
  .enter()
  .append('circle')
  .attr({
    fill: 'purple',
    r:  function(d,i) { return Math.sqrt((d*10)/3.14); },
    cx: function(d,i) { return xScale(i); },
    cy: function(d,i) { return yScale(d); }
   });

svg.selectAll('text')
  .data(dataset)
  .enter()
  .append('text')
  .text(function(d,i) { return d; })
   .attr({
     'text-anchor': 'middle',
     'font-size': function(d) { return 7 + d/5.89486464 + 'px'; },
     x: function(d,i) { return xScale(i); },
     y: function(d,i) { return yScale(d) - Math.sqrt(d) -6; }
   });

svg.append("g")
   .attr("class", "axis")
   .attr("transform", "translate(0," + (tributary.sh - 10) + ")")
   .call(xAxis);

svg.append("g")
   .attr("class", "axis")
   .attr("transform", "translate(2,0)")
   .call(yAxis);

style.css

.axis path,
.axis line {
  fill: none;
  stroke: red;
  shape-rendering: crispEdges;
}

.axis text {
  font-size: 14px;
}