bianchimro/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#example{
    background:#ccc;
}
</style>

<body>

<svg id="example"></svg>
<button id="but">click me</button>
<button id="but2">click me too</button>
<button id="but3">do not forget me</button>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
function barChart(){

    var width = 800;
    var height = 300;
    var barWidth = 'auto';
    var barStyle = function(selection){
        return selection;
    };

    var textStyle = function(selection){
        return selection;
    };

    var x = function(datum, index){
        return datum.x;
    };
    var y = function(datum, index){
        return datum.y;
    };

    //not used right now
    var categoryBarChart = false;
    var xLabels = true;


    barCharter.x = function(value){
        if(!arguments.length) return x;
        x = value;
        return barCharter;
    }

    barCharter.y = function(value){
        if(!arguments.length) return y;
        y = value;
        return barCharter;
    }

    barCharter.barStyle = function(value){
        if(!arguments.length) return barStyle;
        barStyle = value;
        return barCharter;
    }

    // this would be nice ....
    //barCharter.barStyle = getterSetter('barStyle');


    barCharter.textStyle = function(value){
        if(!arguments.length) return textStyle;
        textStyle = value;
        return barCharter;
    }

    barCharter.barWidth = function(value){
        if(!arguments.length) return barWidth;
        barWidth = value;
        return barCharter;
    }

    barCharter.height = function(value){
        if(!arguments.length) return height;
        height = value;
        return barCharter;
    }

    barCharter.width = function(value){
        if(!arguments.length) return width;
        width = value;
        return barCharter;
    }


    barCharter.categoryBarChart = function(value){
        if(!arguments.length) return categoryBarChart;
        categoryBarChart = value;
        return barCharter;
    }


    function barCharter(selection){
        selection.each(function(d, i){

            var minX = d3.min(d, function(datum){ return datum.x });
            var maxX = d3.max(d, function(datum){ return datum.x });
            var xScale = d3.scale.linear().range([0, width]).domain([minX, maxX]);
            var num = d.length;

            var s = d3.select(this);
            s.transition()
                .attr("height", height)
                .attr("width", width);


            var bars = s.selectAll("rect").data(d);
            bars.enter()
                .append("svg:rect").call(updateBars, xScale, num)
                .call(updateBars, xScale, num);
            bars.exit().remove();
            bars.call(updateBars, xScale, num);

            var labels = s.selectAll("text").data(d);
            labels.enter()
                .append("svg:text")
                .call(updateLabels, xScale, num);
            labels.exit().remove();
            labels.call(updateLabels, xScale, num);

        });
        return selection;
    }


    function updateLabels(selection, scale, num){

        if(barWidth == 'auto') realBarWidth = width/num;
        else realBarWidth = barWidth;


        var trans = selection.transition();
        trans
            .attr("x", function(datum, index){ return scale(x(datum)) })
            .attr("y", function(datum, index){ return height - y(datum) })
            .attr("font-size", 10)
            .text(function(datum, index){ return y(datum) })
            .call(textStyle, realBarWidth);

        return selection;
    }


    function updateBars(selection, scale, num){

        if(barWidth == 'auto') realBarWidth = width/num;
        else realBarWidth = barWidth;

        var trans = selection.transition();
        trans
            .attr("x", function(datum, index){ return scale(x(datum))})
            .attr("y", function(datum, index) { return height - y(datum) })
            .attr("height", function(datum) { return y(datum) })
            .attr("width", realBarWidth)
            .call(barStyle);

        return selection;

    }

    return barCharter;
}


</script>

<script>

var data = [
    { 'x': 10, 'y': 100 },
    { 'x': 20, 'y': 140 },
    { 'x': 30, 'y': 140 },
    { 'x': 40, 'y': 190 },
    { 'x': 50, 'y': 100 },
    { 'x': 60, 'y': 120 },
    { 'x': 70, 'y': 140 },
    { 'x': 80, 'y': 110 }
];

var barStyle = function(selection){
    selection
        .attr("fill", function(datum, index){
                return d3.rgb(255,Math.random()*100, Math.random()*222);
            });
    return selection;
};


var barStyle2 = function(selection){
    selection
        .attr("fill", function(datum, index){
                return d3.rgb(Math.random()*100, Math.random()*222, 255);
            });
    return selection;
};

var textStyle = function(selection){
    selection
        .attr("fill", "red")
        .attr("font-size", "12px");
    return selection;
};

var ourChart = barChart().width("400").barWidth('auto').textStyle(textStyle);

var changeData = function(){
    var ex = Math.random()*140;
    var last = data[data.length - 1];
    data.push({ x:last.x+10, y:ex });
    data.splice(0,1);
};

//animation function. refreshes the chart
var testAnimate = function(){
    var ix =0;
    var x = setInterval(function(){
        changeData();

        //updating chart
        d3.select("#example")
            .datum(data)
            .call(ourChart);

        if(++ix > 30) {
            clearInterval(x);
            d3.select("#but").attr("disabled", null);
        }
    }, 200);
};


//event handlers for button clicks
d3.select("#but")
    .on('click', function(){
        d3.select(this).attr("disabled", "disabled");
        testAnimate();
});

d3.select("#but2")
    .on('click', function(){
        d3.select("#example")
        .datum(data)
        .call(ourChart.barStyle(barStyle2));
});

d3.select("#but3")
    .on('click', function(){
        d3.select("#example")
        .datum(data)
        .call(ourChart.barStyle(barStyle));
});


//bootstrap our chart!
d3.select("#example")
    .datum(data)
    .call(ourChart);


</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	#example{
	background:#ccc;
	}
	</style>

	<body>

	<svg id="example"></svg>
	<button id="but">click me</button>
	<button id="but2">click me too</button>
	<button id="but3">do not forget me</button>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>
	function barChart(){

	var width = 800;
	var height = 300;
	var barWidth = 'auto';
	var barStyle = function(selection){
	return selection;
	};

	var textStyle = function(selection){
	return selection;
	};

	var x = function(datum, index){
	return datum.x;
	};
	var y = function(datum, index){
	return datum.y;
	};

	//not used right now
	var categoryBarChart = false;
	var xLabels = true;


	barCharter.x = function(value){
	if(!arguments.length) return x;
	x = value;
	return barCharter;
	}

	barCharter.y = function(value){
	if(!arguments.length) return y;
	y = value;
	return barCharter;
	}

	barCharter.barStyle = function(value){
	if(!arguments.length) return barStyle;
	barStyle = value;
	return barCharter;
	}

	// this would be nice ....
	//barCharter.barStyle = getterSetter('barStyle');


	barCharter.textStyle = function(value){
	if(!arguments.length) return textStyle;
	textStyle = value;
	return barCharter;
	}

	barCharter.barWidth = function(value){
	if(!arguments.length) return barWidth;
	barWidth = value;
	return barCharter;
	}

	barCharter.height = function(value){
	if(!arguments.length) return height;
	height = value;
	return barCharter;
	}

	barCharter.width = function(value){
	if(!arguments.length) return width;
	width = value;
	return barCharter;
	}


	barCharter.categoryBarChart = function(value){
	if(!arguments.length) return categoryBarChart;
	categoryBarChart = value;
	return barCharter;
	}


	function barCharter(selection){
	selection.each(function(d, i){

	var minX = d3.min(d, function(datum){ return datum.x });
	var maxX = d3.max(d, function(datum){ return datum.x });
	var xScale = d3.scale.linear().range([0, width]).domain([minX, maxX]);
	var num = d.length;

	var s = d3.select(this);
	s.transition()
	.attr("height", height)
	.attr("width", width);


	var bars = s.selectAll("rect").data(d);
	bars.enter()
	.append("svg:rect").call(updateBars, xScale, num)
	.call(updateBars, xScale, num);
	bars.exit().remove();
	bars.call(updateBars, xScale, num);

	var labels = s.selectAll("text").data(d);
	labels.enter()
	.append("svg:text")
	.call(updateLabels, xScale, num);
	labels.exit().remove();
	labels.call(updateLabels, xScale, num);

	});
	return selection;
	}


	function updateLabels(selection, scale, num){

	if(barWidth == 'auto') realBarWidth = width/num;
	else realBarWidth = barWidth;


	var trans = selection.transition();
	trans
	.attr("x", function(datum, index){ return scale(x(datum)) })
	.attr("y", function(datum, index){ return height - y(datum) })
	.attr("font-size", 10)
	.text(function(datum, index){ return y(datum) })
	.call(textStyle, realBarWidth);

	return selection;
	}



	function updateBars(selection, scale, num){

	if(barWidth == 'auto') realBarWidth = width/num;
	else realBarWidth = barWidth;

	var trans = selection.transition();
	trans
	.attr("x", function(datum, index){ return scale(x(datum))})
	.attr("y", function(datum, index) { return height - y(datum) })
	.attr("height", function(datum) { return y(datum) })
	.attr("width", realBarWidth)
	.call(barStyle);

	return selection;

	}

	return barCharter;
	}


	</script>

	<script>

	var data = [
	{ 'x': 10, 'y': 100 },
	{ 'x': 20, 'y': 140 },
	{ 'x': 30, 'y': 140 },
	{ 'x': 40, 'y': 190 },
	{ 'x': 50, 'y': 100 },
	{ 'x': 60, 'y': 120 },
	{ 'x': 70, 'y': 140 },
	{ 'x': 80, 'y': 110 }
	];

	var barStyle = function(selection){
	selection
	.attr("fill", function(datum, index){
	return d3.rgb(255,Math.random()100, Math.random()222);
	});
	return selection;
	};


	var barStyle2 = function(selection){
	selection
	.attr("fill", function(datum, index){
	return d3.rgb(Math.random()100, Math.random()222, 255);
	});
	return selection;
	};

	var textStyle = function(selection){
	selection
	.attr("fill", "red")
	.attr("font-size", "12px");
	return selection;
	};

	var ourChart = barChart().width("400").barWidth('auto').textStyle(textStyle);

	var changeData = function(){
	var ex = Math.random()*140;
	var last = data[data.length - 1];
	data.push({ x:last.x+10, y:ex });
	data.splice(0,1);
	};

	//animation function. refreshes the chart
	var testAnimate = function(){
	var ix =0;
	var x = setInterval(function(){
	changeData();

	//updating chart
	d3.select("#example")
	.datum(data)
	.call(ourChart);

	if(++ix > 30) {
	clearInterval(x);
	d3.select("#but").attr("disabled", null);
	}
	}, 200);
	};


	//event handlers for button clicks
	d3.select("#but")
	.on('click', function(){
	d3.select(this).attr("disabled", "disabled");
	testAnimate();
	});

	d3.select("#but2")
	.on('click', function(){
	d3.select("#example")
	.datum(data)
	.call(ourChart.barStyle(barStyle2));
	});

	d3.select("#but3")
	.on('click', function(){
	d3.select("#example")
	.datum(data)
	.call(ourChart.barStyle(barStyle));
	});




	//bootstrap our chart!
	d3.select("#example")
	.datum(data)
	.call(ourChart);



	</script>