Skip to content

Instantly share code, notes, and snippets.

@Leehro
Created March 28, 2013 14:57
Show Gist options
  • Save Leehro/5263797 to your computer and use it in GitHub Desktop.
Save Leehro/5263797 to your computer and use it in GitHub Desktop.
Simple d3bugging
<!DOCTYPE html>
<meta charset="utf-8">
<style></style>
<body>
<div id="bar-demo"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// now moving onto books read per year
// set up an array of the data
var data = [{year: 2006, books: 54},
{year: 2007, books: 43},
{year: 2008, books: 41},
{year: 2009, books: 37},
{year: 2010, books: 58},
{year: 2011, books: 52},
{year: 2012, books: 23},
{year: 2013, books: 2}];
// Overall layout
var barWidth = 40; // width of the bar, duh
var width = (barWidth + 10) * data.length; // total width
var height = 200;
// scale
// scaling for x. Input will be an index into the data Array
// output will be from 0 to width
var x = d3.scael.linear().domain([0, data.length]).range([0,width]);
// scaling for y. scale from [0-max(books)] to [0-height]
var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.books; })]).
rangeRound([0,height]);
// now set up the canvas
// append it to the empty div and make it width and height
var barDemo = d3.select("#bar-demo").append("svg:svg").attr("width",width).attr("height",height + 30);
barDemo.selectAll("rect"). // select all the rects in the svg
data(data). // set the data source to data
enter(). // magic?
append("svg:rect"). // make a new rect (bar)
attr("x", function(datum, index) { return x(index); }). // x-position of the bar
attr("y", function(datum) { return height - y(datum.books); }). // y-position of the bar. Remember + goes down the page
attr("height", function(datum) { return y(datum.books); }). // height of the bar
attr("width", barWidth). // every bar has the same width
attr("fill", "#2d578b"); // ok for now but this is a good candidate for CSS?
// now we will add text
barDemo.selectAll("text").
data(data). // setup the data source
enter().
append("svg:text").
attr("x", function(datum, index) { return x(index) + barWidth; }). // x-position the text at the end of the bar for now
attr("y", function(datum) { return height - y(datum.books); }). // y-position the text at the top of the barDemo
attr("dx", -barWidth/2). // slide the x back to center it
attr("dy", "1.2em"). // slide the y down into the bar
attr("text-anchor", "middle"). // anchor the middle of the text to the specified x,y coordinate
attr("style", "font-size: 12; font-family: Helvetica, sans-serif").
text(function(datum) { return datum.books; }). // the text we want to show is the number of books
attr("fill", "white");
// now add the y-axis
barDemo.selectAll("text.yAxis").
data(data).
enter().
append("svg:text").
attr("x", function(datum, index) { return x(index) + barWidth; }).
attr("y", height). // the y-coordinate of the axis labels is just the height - bottom of the graph up to now
attr("dx", -barWidth / 2). // center the x
attr("text-anchor", "middle").
attr("style", "font-size: 12; font-family: Helvetica, sans-serif").
text(function(datum) { return datum.year; }). // text should be the year
attr("transform", "translate(0, 18)"). // since we didnt change the height, translate
attr("class", "yAxis"); // makes it so that text.yAxis finds this
// next steps would be to move onto custom vis
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment