Test SVG

_.md

[ Launch: Test SVG ] 4744486 by jspschool

config.json

{"description":"Test SVG","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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}

inlet.js

var dataset = [ 5, 10, 15, 20, 25 ];

var w = 500;
var h = 500;

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

svg.attr({width:w, height:h});

svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr({
     cx:function(d,i){
       return (i*50)+25;
     },
     cy:h/10,
     r:function(d){
   		return d;  
     },
     fill:"yellow",
     stroke:"orange",
     "stroke-width":function(d){
    	return d/2; 
     }
     
   });


var dataset2 = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var barPadding = 1;

svg.selectAll("rect")
   .data(dataset2)
   .enter()
   .append("rect")
   .attr({
     x:function(d,i){
      return i * (w / dataset2.length); 
     },
     y:100,
     width:w/dataset2.length-barPadding,
     height:100
  
  });