Categories
Uncategorized

Creating a simple barplot – d3js

A working example can be found here.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Simple bar Graph</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>


<div id="theSVG"></div>

<script>

// the data that sets the height
// of the bars
var dataSet=[10,12,13,74,100]

// setting the height and width of the
// svg where it will be drawn
var h=100;
var w=500;

// start d3 and tell it to make a svg
// with the above attributes (height and width)
var svg=d3.select("#theSVG").append("svg")
			.attr("width",w)
			.attr("height",h);

// create the bars for the bar chart.
svg.selectAll("rect")
	// get the data from aboce
	.data(dataSet)
	// will repeat for each entry in data
	.enter()
	// and create a rectangle for each entry
	.append("rect")
	// set the height of the rectangle
	.attr("y",function(d){
		return h-d;
	})
	// set width of rectagles
	.attr("width",20)
	// draw each rectangle 21px to the right.
	.attr("x",function(d,i){
		return i*21;
	})
	// now we use the data to se the height
	.attr("height",function(d){
		return d;	
	})
	;

</script>


</body>
</html>

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s