enjalot/bar.js

## bar.js
//Simple d3.js barchart example to illustrate d3 selections

//other good related tutorials
//http://www.recursion.org/d3-for-mere-mortals/
//http://mbostock.github.com/d3/tutorial/bar-1.html


var w = 300
var h = 300


function bars(data)
{

    max = d3.max(data)

    //nice breakdown of d3 scales
    //http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/
    x = d3.scale.linear()
        .domain([0, max])
        .range([0, w])

    y = d3.scale.ordinal()
        .domain(d3.range(data.length))
        .rangeBands([0, h], .2)


    var vis = d3.select("#barchart")

    //a good written tutorial of d3 selections coming from protovis
    //http://www.jeromecukier.net/blog/2011/08/09/d3-adding-stuff-and-oh-understanding-selections/
    var bars = vis.selectAll("rect.bar")
        .data(data)

    //update
    bars
        .attr("fill", "#0a0")
        .attr("stroke", "#050")

    //enter
    bars.enter()
        .append("svg:rect")
        .attr("class", "bar")
        .attr("fill", "#800")
        .attr("stroke", "#800")


    //exit
    bars.exit()
        .remove()


    //apply to everything (enter and update)
    bars
        .attr("stroke-width", 4)
        .attr("width", x)
        .attr("height", y.rangeBand())
        .attr("transform", function(d,i) {
            return "translate(" + [0, y(i)] + ")"
        })

}


function init()
{

    //setup the svg
    var svg = d3.select("#svg")
        .attr("width", w+100)
        .attr("height", h+100)
    svg.append("svg:rect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("stroke", "#000")
        .attr("fill", "none")

    svg.append("svg:g")
        .attr("id", "barchart")
        .attr("transform", "translate(50,50)")


    //setup our ui
    d3.select("#data1")
        .on("click", function(d,i) {
            bars(data1)
        })
    d3.select("#data2")
        .on("click", function(d,i) {
            bars(data2)
        })
    d3.select("#random")
        .on("click", function(d,i) {
            num = document.getElementById("num").value
            bars(random(num))
        })


    //make the bars
    bars(data1)
}

## data.json
var data1 = [
    5,
    20,
    55,
    60,
    89
]

var data2 = [
    35,
    80,
    35,
    90,
    19,
    39,
    99
]

function random(n)
{
    val = []
    for(i = 0; i < n; i++)
    {
        val.push(Math.random() * 100)
    }
    return val
}

## index.html
<!DOCTYPE html>
<html>
 <head>
    <title>Bar Example</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="data.json"></script>
    <script type="text/javascript" src="bar.js"></script>

    <style type="text/css">
        #demo {
            float: left;
        }
        #vimeo {
            padding: 30px;
            float: left;
        }
    </style>
 </head>
 <body>

    <div id="demo">
        <div id="buttons">
        <button id="data1">Set Data to data 1</button>
        <button id="data2">Set Data to data 2</button>
        <br>
        <button id="random">Make Random Data</button>
        <input id="num" value=10></input>
        </div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg"></svg>
    </div>

    <script type="text/javascript">
        init();
    </script>

    <div id="vimeo">
    <iframe src="http://player.vimeo.com/video/33097206?title=0&amp;byline=0&amp;portrait=0" width="500" height="313" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/33097206">[dd3] Selections in d3.js with a simple bar chart</a> from <a href="http://vimeo.com/user4640702">Ian Johnson</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
    </div>

 </body>
</html>
	//Simple d3.js barchart example to illustrate d3 selections

	//other good related tutorials
	//http://www.recursion.org/d3-for-mere-mortals/
	//http://mbostock.github.com/d3/tutorial/bar-1.html


	var w = 300
	var h = 300


	function bars(data)
	{

	max = d3.max(data)

	//nice breakdown of d3 scales
	//http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/
	x = d3.scale.linear()
	.domain([0, max])
	.range([0, w])

	y = d3.scale.ordinal()
	.domain(d3.range(data.length))
	.rangeBands([0, h], .2)


	var vis = d3.select("#barchart")

	//a good written tutorial of d3 selections coming from protovis
	//http://www.jeromecukier.net/blog/2011/08/09/d3-adding-stuff-and-oh-understanding-selections/
	var bars = vis.selectAll("rect.bar")
	.data(data)

	//update
	bars
	.attr("fill", "#0a0")
	.attr("stroke", "#050")

	//enter
	bars.enter()
	.append("svg:rect")
	.attr("class", "bar")
	.attr("fill", "#800")
	.attr("stroke", "#800")


	//exit
	bars.exit()
	.remove()


	//apply to everything (enter and update)
	bars
	.attr("stroke-width", 4)
	.attr("width", x)
	.attr("height", y.rangeBand())
	.attr("transform", function(d,i) {
	return "translate(" + [0, y(i)] + ")"
	})

	}


	function init()
	{

	//setup the svg
	var svg = d3.select("#svg")
	.attr("width", w+100)
	.attr("height", h+100)
	svg.append("svg:rect")
	.attr("width", "100%")
	.attr("height", "100%")
	.attr("stroke", "#000")
	.attr("fill", "none")

	svg.append("svg:g")
	.attr("id", "barchart")
	.attr("transform", "translate(50,50)")


	//setup our ui
	d3.select("#data1")
	.on("click", function(d,i) {
	bars(data1)
	})
	d3.select("#data2")
	.on("click", function(d,i) {
	bars(data2)
	})
	d3.select("#random")
	.on("click", function(d,i) {
	num = document.getElementById("num").value
	bars(random(num))
	})


	//make the bars
	bars(data1)
	}
	var data1 = [
	5,
	20,
	55,
	60,
	89
	]

	var data2 = [
	35,
	80,
	35,
	90,
	19,
	39,
	99
	]

	function random(n)
	{
	val = []
	for(i = 0; i < n; i++)
	{
	val.push(Math.random() * 100)
	}
	return val
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bar Example</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="data.json"></script>
	<script type="text/javascript" src="bar.js"></script>

	<style type="text/css">
	#demo {
	float: left;
	}
	#vimeo {
	padding: 30px;
	float: left;
	}
	</style>
	</head>
	<body>

	<div id="demo">
	<div id="buttons">
	<button id="data1">Set Data to data 1</button>
	<button id="data2">Set Data to data 2</button>
	<br>
	<button id="random">Make Random Data</button>
	<input id="num" value=10></input>
	</div>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg"></svg>
	</div>

	<script type="text/javascript">
	init();
	</script>

	<div id="vimeo">
	<iframe src="http://player.vimeo.com/video/33097206?title=0&byline=0&portrait=0" width="500" height="313" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/33097206">[dd3] Selections in d3.js with a simple bar chart</a> from <a href="http://vimeo.com/user4640702">Ian Johnson</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
	</div>

	</body>
	</html>