sfrdmn/bar_chart.js

## bar_chart.js
// If you rename your script, don't forget to change the <script> tag in the HTML file!!!

var	w = 800;					// width
var	h = 300; 					// height
var marginT = 0;
var marginL = 75;
var marginB = 10;
var marginR = 20;

// this is relavant to my data only.
var xData = "label"
var yData = "area"

// Here we add the SVG to the page
d3.select("body").insert("svg:svg", "div#description")
	.attr("width", w+marginL+marginR)
	.attr("height", h+marginT+marginB);


// Here we select the SVG and append a group to it. We call the group chart and shift it according to the margins.
// All our visual elements will go in chart.
var chart = d3.select("svg").append("svg:g")
		.attr("class", "chart")
		.attr("transform", "translate(" + marginL + "," + marginT + ")" );

// This adds our background.
chart.append("svg:rect")
		.attr("width", w )
		.attr("height", h )
		.attr("fill", "lavender" );

// Don't forget to change this to reference YOUR data
d3.csv( "data.csv", function(csv) {

	// This calculates the max value in our data
	var yMax = d3.max( csv.map( function(d) {
		return parseInt( d[yData] );
	}));

	// Our x 'scale function' for the x axis.
	// Takes a list of our labels and figures out how to divide them evenly across our chart
	var x = d3.scale.ordinal()
		.domain( csv.map( function(d) {
			return d[xData];
		}))
		.rangeRoundBands([0,w], .05);

	// Our y scale function. Just a normal scale function which sorts out our y values in relation to our chart height.
	// The '- 100' will prevent the bars from touching the top
	var y = d3.scale.linear()
		.domain([0,yMax])
		.range([0,h-100]);

	// Another scale function. This is for our y axis generator.
	var yAxisFunc = d3.scale.linear()
		.domain([0,yMax])
		.range([h,0]);

	// This generates the y axis. Mess with this to change the y axis.
	// To change the axis styling, look in the style.css file in the styles folder
	var yAxis = d3.svg.axis().scale(yAxisFunc).tickSize(4).ticks( 10 ).orient( "left" );

	// Figures out how tall each bar should be
	var barHeight = function(d,i) {
		return y(d[yData]);
	}

	// Finds the x position for each bar
	var xPos = function(d,i) {
		return x( d[xData] );
	}

	// Finds the y position for each bar
	var yPos = function(d,i) {
		return h - barHeight( d );
	}

	// Returns the label for each bar
	var textFunc = function(d,i) {
		return d[xData];
	}

	// This adds our y axis.
	// You should change the yAxis function up above if you want mess with the y axis
	chart.append("svg:g")
		.attr("class", "y axis" )
		.attr("transform", "translate(" + 0 + "," + 0 + ")")
		.call( yAxis );

	// Here we add all our bars
	// Mess around with this
	chart.append("svg:g")
		.attr("class","bar")
		.selectAll("rect.bars").data(csv)
		.enter().append("svg:rect")
		.attr("class", "bar")
		.attr("fill", "coral")
		.attr("x", xPos)
		.attr("height", 0 )
		.attr("y", h )
		.transition().duration(500)
		.delay( function(d,i) {
			return i * 200;
		})
		.attr("width", x.rangeBand() )
		.attr("y", yPos)
		.attr("height", barHeight );

	// Here we add our labels
	// Mess around with this
	chart.append("svg:g").attr("class", "labels")
		.selectAll("text").data(csv)
		.enter().append("svg:text")
		.attr( "y", yPos )
		.attr( "x", xPos )
		.attr( "text-anchor", "middle" )
		.attr( "dx", x.rangeBand()/2 )
		.attr( "dy", -3 )
		.text( textFunc );


	// Debugging console log stuff. This is really helpful. We should be using this more.
	console.log( "data: ", csv );
	console.log(
				"We want a list of our xaxis labels. We use map for that\n" +
				 "This is what comes out of that mapping thing: ",
				 csv.map( function(d) {
		         	return d[xData];
				 })
	);
	console.log( "ymax: " + yMax );
	console.log( "band width: " + x.rangeBand() );
})

## data.csv

          
            label
            area

            
              poleta
              689

            
              aurelio
              567

            
              autism
              543

            
              twenty
              459

            
              paul
              456

            
              andrew
              456

            
              lenny
              345

            
              karlsruhe
              342

            
              karl
              235

            
              SF 49ers
              94

            
              derek
              45

            
              christine
              34

            
              john
              23

            
              nice guy
              23

            
              naan
              21

## index.html
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bar Chart</title>
		<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
		<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.csv.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div id="title">
			<p>Values of Things</p>
			<div class="info">
				<p>Sean Fridman</p>
			</div>
		</div>

		<div id="description">
			This shows the how many somethings each thing has.
		</div>
	</body>
	<script type="text/javascript" src="bar_chart.js"></script>
</html>

## style.css
.axis {
	shape-rendering: crispEdges;
}

.axis text {
	fill: rgb(82,82,82);
	font-family: helvetica, arial, sans-serif;
	font-size: 10px;
}

.y.axis line {
	stroke: gray;
	stroke-width: 1;
	stroke-opacity: 1;
}

.y.axis path {
  fill: none;
  stroke: gray;
}

.labels {
	fill: slategrey;
	font-weight: bold;
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
}

#title {
	margin-top: 50px;
	margin-bottom: 25px;
	position: relative;
	left: 75px;
	color: rgb(82,82,82);
	font-size: 24px;
	font-family: georgia, serif;
	text-align: left;
	line-height: 0;
}

#title .info {
	font-size: 12px;
	color: gray;
}

#description {
	position: relative;
	left: 75px;
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	color: grey;
}
	// If you rename your script, don't forget to change the <script> tag in the HTML file!!!

	var w = 800; // width
	var h = 300; // height
	var marginT = 0;
	var marginL = 75;
	var marginB = 10;
	var marginR = 20;

	// this is relavant to my data only.
	var xData = "label"
	var yData = "area"

	// Here we add the SVG to the page
	d3.select("body").insert("svg:svg", "div#description")
	.attr("width", w+marginL+marginR)
	.attr("height", h+marginT+marginB);



	// Here we select the SVG and append a group to it. We call the group chart and shift it according to the margins.
	// All our visual elements will go in chart.
	var chart = d3.select("svg").append("svg:g")
	.attr("class", "chart")
	.attr("transform", "translate(" + marginL + "," + marginT + ")" );

	// This adds our background.
	chart.append("svg:rect")
	.attr("width", w )
	.attr("height", h )
	.attr("fill", "lavender" );

	// Don't forget to change this to reference YOUR data
	d3.csv( "data.csv", function(csv) {

	// This calculates the max value in our data
	var yMax = d3.max( csv.map( function(d) {
	return parseInt( d[yData] );
	}));

	// Our x 'scale function' for the x axis.
	// Takes a list of our labels and figures out how to divide them evenly across our chart
	var x = d3.scale.ordinal()
	.domain( csv.map( function(d) {
	return d[xData];
	}))
	.rangeRoundBands([0,w], .05);

	// Our y scale function. Just a normal scale function which sorts out our y values in relation to our chart height.
	// The '- 100' will prevent the bars from touching the top
	var y = d3.scale.linear()
	.domain([0,yMax])
	.range([0,h-100]);

	// Another scale function. This is for our y axis generator.
	var yAxisFunc = d3.scale.linear()
	.domain([0,yMax])
	.range([h,0]);

	// This generates the y axis. Mess with this to change the y axis.
	// To change the axis styling, look in the style.css file in the styles folder
	var yAxis = d3.svg.axis().scale(yAxisFunc).tickSize(4).ticks( 10 ).orient( "left" );

	// Figures out how tall each bar should be
	var barHeight = function(d,i) {
	return y(d[yData]);
	}

	// Finds the x position for each bar
	var xPos = function(d,i) {
	return x( d[xData] );
	}

	// Finds the y position for each bar
	var yPos = function(d,i) {
	return h - barHeight( d );
	}

	// Returns the label for each bar
	var textFunc = function(d,i) {
	return d[xData];
	}

	// This adds our y axis.
	// You should change the yAxis function up above if you want mess with the y axis
	chart.append("svg:g")
	.attr("class", "y axis" )
	.attr("transform", "translate(" + 0 + "," + 0 + ")")
	.call( yAxis );

	// Here we add all our bars
	// Mess around with this
	chart.append("svg:g")
	.attr("class","bar")
	.selectAll("rect.bars").data(csv)
	.enter().append("svg:rect")
	.attr("class", "bar")
	.attr("fill", "coral")
	.attr("x", xPos)
	.attr("height", 0 )
	.attr("y", h )
	.transition().duration(500)
	.delay( function(d,i) {
	return i * 200;
	})
	.attr("width", x.rangeBand() )
	.attr("y", yPos)
	.attr("height", barHeight );

	// Here we add our labels
	// Mess around with this
	chart.append("svg:g").attr("class", "labels")
	.selectAll("text").data(csv)
	.enter().append("svg:text")
	.attr( "y", yPos )
	.attr( "x", xPos )
	.attr( "text-anchor", "middle" )
	.attr( "dx", x.rangeBand()/2 )
	.attr( "dy", -3 )
	.text( textFunc );


	// Debugging console log stuff. This is really helpful. We should be using this more.
	console.log( "data: ", csv );
	console.log(
	"We want a list of our xaxis labels. We use map for that\n" +
	"This is what comes out of that mapping thing: ",
	csv.map( function(d) {
	return d[xData];
	})
	);
	console.log( "ymax: " + yMax );
	console.log( "band width: " + x.rangeBand() );
	})
	label	area
	poleta	689
	aurelio	567
	autism	543
	twenty	459
	paul	456
	andrew	456
	lenny	345
	karlsruhe	342
	karl	235
	SF 49ers	94
	derek	45
	christine	34
	john	23
	nice guy	23
	naan	21
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Bar Chart</title>
	<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
	<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.csv.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<div id="title">
	<p>Values of Things</p>
	<div class="info">
	<p>Sean Fridman</p>
	</div>
	</div>

	<div id="description">
	This shows the how many somethings each thing has.
	</div>
	</body>
	<script type="text/javascript" src="bar_chart.js"></script>
	</html>
	.axis {
	shape-rendering: crispEdges;
	}

	.axis text {
	fill: rgb(82,82,82);
	font-family: helvetica, arial, sans-serif;
	font-size: 10px;
	}

	.y.axis line {
	stroke: gray;
	stroke-width: 1;
	stroke-opacity: 1;
	}

	.y.axis path {
	fill: none;
	stroke: gray;
	}

	.labels {
	fill: slategrey;
	font-weight: bold;
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	}

	#title {
	margin-top: 50px;
	margin-bottom: 25px;
	position: relative;
	left: 75px;
	color: rgb(82,82,82);
	font-size: 24px;
	font-family: georgia, serif;
	text-align: left;
	line-height: 0;
	}

	#title .info {
	font-size: 12px;
	color: gray;
	}

	#description {
	position: relative;
	left: 75px;
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	color: grey;
	}