reusable circles

by Igor Cuckovic

HTML

<div>
    <div id="test">
        
<div>
    <div id="test1">

JavaScript

var data1 = [50, 45, 89, 44];
var data2 = [77, 44, 33, 55];

var circless = function () {
    //defaults
    var width = 320,
        height = 240;

    var my = function (selection) {
        // create svg
        selection.each(function (data) {
            var svg = d3.select(this).append("svg").attr({
                width: width,
                height: height
            });
            
            circles = svg.selectAll("circle")
                        .data(data)
                        .enter()
                        .append("circle")
                        .attr({
                            cx: function (d,i) {return i * 100 + 25},
                            cy: 150,
                            r: function (d,i) {return d / 2},
                            fill: "steelblue"
                        })
                

        });

    };

    my.width = function (value) {
        if (!value) {
            return width;
        }
        width = value;
        return my;
    };

    my.height = function (value) {
        if (!value) {
            return height;
        }
        height = value;
        return my;
    };

    return my;

};

var myCircle = circless().width(640).height(480);
myCircle.height(800);
//console.log(myCircle.height());
var myCircle1 = circless();
myCircle(d3.select("#test").datum(data1));

//myCircle1(d3.select("#test1").datum(data2)).width(640).height(320);

d3.select("#test1").datum(data2).call(myCircle1.width(700));