Sunday, 01 April 2012 at 11:18 am

In part 1 of this series of post, I showed you how to graph a simple bar graph. In this post, I will show you how to use Chrome's developer tools to better debug your code. The javascript console in developer tools is an extremely powerful resource that allows you access to access and run javascript within the browser. You can even run all your code in the console to render a figure if you choose to. 

To turn on the developer tools in Chrome, click the wrench icon in the upper right hand corner of the browser window -> tools -> developer tools. Your browser will now have a new partition in the bottom showing the developer tools. The two most useful feature in the developer tools are the 'Elements' and 'Console' tabs.


Elements

The elements tab allows developers access to information on all DOM objects on the page. This applies to all svg objects such as text, rectangles, paths. It also gives details on css stylings and attributes. It is much more than just looking at the source of a HTML page because it shows you elements that have been added/modified since the loading of the page. 

This is an important tool in debugging your graphs because it can tell you why your graph is rendering improperly. You will be able to see whether it is a mistake in your code, resulting in an error in javascript execution or an error in your styling declarations.


Console

Probably the most useful feature is the javascript console. This console works just like any other programming consoles (python, R). Typing the name of a previously declared variable will print out the variable contents. Furthermore, you can define/redefine variables/functions and execute functions. You can essentially start out with a blank HTML page and execute all your javascript through the console and instantly see the effects of the javascript code.

Taking the code of the previous blog post of a simple bar chart, create a blank html file with some defined CSS stylings:

<html>
<head>
<script type="text/javascript" src="d3.v2.js"></script>
<style>
.fig {
font-family:Arial;
font-size:10pt;
color:darkgray;
}
</style>
</head>
<body>
</body>
</html>

Open this blank .html page. You should see nothing display in your browser. Open up the javascript console and enter the following code sequentially to see how the browser builds the bar chart step by step: 

  1. Input the data in JSON format:
    de = [{'count': 728, 'name': 'sample0'}, {'count': 824, 'name': 'sample1'}, {'count': 963, 'name': 'sample2'}, {'count': 927, 'name': 'sample3'}, {'count': 221, 'name': 'sample4'}, {'count': 574, 'name': 'sample5'}, {'count': 733, 'name': 'sample6'}, {'count': 257, 'name': 'sample7'}, {'count': 879, 'name': 'sample8'}, {'count': 620, 'name': 'sample9'}];
    At this point the variable 'de' will contain the JSON formatted data. You can type 'de' into the console to view the data at any time.
  2. Append a new svg element to the body and define a new scale:
    var mySVG = d3.select("body")
    .append("svg")
    .attr("width", 500)
    .attr("height", 500)
    .style('position','absolute')
    .style('top',50)
    .style('left',40)
    .attr('class','fig');
    var heightScale = d3.scale.linear()
    .domain([0, d3.max(de,function(d) { return d.count;})])
    .range([0, 400]);
    Since the SVG element has nothing drawn on it and has no styling, it will not appear as anything in the browser. However, if you check the element's tab of the developer's tools, you should now see a SVG element tag in the body of the document
  3. Append the y and x axis labels:
    mySVG.selectAll(".xLabel")
    .data(de)
    .enter().append("svg:text")
    .attr("x", function(d,i) {return 113 + (i * 22);})
    .attr("y", 435)
    .attr("text-anchor", "middle")
    .text(function(d,i) {return d.name;})
    .attr('transform',function(d,i) {return 'rotate(-90,' + (113 + (i * 22)) + ',435)';});

    mySVG.selectAll(".yLabel")
    .data(heightScale.ticks(10))
    .enter().append("svg:text")
    .attr('x',80)
    .attr('y',function(d) {return 400 - heightScale(d);})
    .attr("text-anchor", "end")
    .text(function(d) {return d;});
    You should now see the x and y axis labels on the screen and the corresponding DOM elements in the developer tools.
  4. Add the y axis lines and bars:
    mySVG.selectAll(".yTicks")
    .data(heightScale.ticks(10))
    .enter().append("svg:line")
    .attr('x1','90')
    .attr('y1',function(d) {return 400 - heightScale(d);})
    .attr('x2',320)
    .attr('y2',function(d) {return 400 - heightScale(d);})
    .style('stroke','lightgray');

    var myBars = mySVG.selectAll('rect')
    .data(de)
    .enter()
    .append('svg:rect')
    .attr('width',20)
    .attr('height',function(d,i) {return heightScale(d.count);})
    .attr('x',function(d,i) {return (i * 22) + 100;})
    .attr('y',function(d,i) {return 400 - heightScale(d.count);})
    .style('fill','lightblue');
    Now you should see the entire bar chart reproduced through the console only. You can look at any of the added elements by calling their variable names, ie myBars will call the rectangle svg elements, or you can look at their styling through the elements tab.


What's next

The console is an incredibly powerful tool for debugging and viewing your javascript. Using it will dramatically speed up your development. In the next few weeks, I'll post more entries on:








Search

Categories


Archive