Book Review: Mastering D3.js

Mastering D3.js Cover photo

Image borrowed from

Mastering D3.js

I’ve finally finished it. The delay for the book review was due to time constraints and was completely unrelated to the quality of the book. D3.js is an increasingly popular JavaScript library for creating data visualizations. Mastering D3.js takes you a step further than just creating charts and graphs. In this book, you’ll learn how to create reusable charts to be used in larger projects.

Who is Mastering D3.js For?

If you haven’t visited PacktPub for this information already, this book is for users with some experience with the charting library D3.js. If you do not have experience, PacktPub carries a few titles such as Data Visualization with D3.js Cookbook and Data Visualization with d3.js that you can refer to first before reading this book.

Things to Look Forward to in Mastering D3.js

Mastering D3.js covers a number of topics that can be used to really enhance a project. This book goes beyond just some D3 charts; Mastering D3.js provides examples of implementing D3.js into Backbone and Node.js applications for interactive and real-time charts. The combination of numerous accessor methods, Node.js and Backbone integration, and creating a charting package is very useful for creating a separate component that can be implemented in future projects.

The dashboard chapter was really good in my opinion. In applications with a lot of data on users for example, dashboards can be a great way to display the data. This book covers some best practices when designing dashboards and also gives some direction on furthering your knowledge on data visualizations.

Some of the more advanced topics include the use of maps and different types of projection. Another is using real-time data which includes Node.js, Backbone, Socket.IO, and the twitter streaming API. the tutorial will bring you through both the server and client side of creating the real time data visualization application.

Things that could have been done better

I think the book was well written but there were a few things that could have made it even better. Unless you’re just skimming the book for a quick tutorial on how to accomplish a feature, the source code is pretty much necessary for following along with the examples. Also, the source code was not exactly the most friendly to run easily locally on your machine. A lot of the source could have been produced in a similar way to Data Visualization with D3.js Cookbook where it could be seen running locally just by launching it in your browser.


If you plan on using multiple data visualizations in a project or one complex data visualization in multiple projects this book is definitely an asset. If you’ve purchased or are thinking of purchasing the book from somewhere other than PacktPub, contact them for the source files, they will definitely help going through the examples. If you don’t have prior experience with D3.js or are just looking for some data visualization examples to work off of I would recommend Data Visualization with D3.js Cookbook.

Posted in Book Review, Javascript, Web Development Tagged with: , , , , ,

Upcoming Book Review: Mastering D3.js

Mastering D3.js Cover photo

Image borrowed from

I’ve got to hand it to the folks at PacktPub, they’re helping me create content for my blog. Not that I don’t have plenty to share, I just needed a little push to get things going again.

Pablo Navarro has written a new book called Mastering D3.js. To help spread the word about Mastering D3.js, PacktPub has asked me to review it. I’m very interested in what this book has to offer and excited to share my experience with my readers.

What is D3.js?

D3.js is a JavaScript library for binding  data to html elements and generating data visualizations. There are a ton of examples of how to create charts with D3.js on their homepage. Mastering D3.js however, focuses more on the implementation of D3.js as a reusable component to use within projects. More information on what the book covers can be found on PacktPub’s Mastering D3.js page.

Tell me what you want to know about Mastering D3.js!

If there is anything specific you would like to know about Mastering D3.js, please let me know, either by leaving a comment or sending me an email. I hope to have the book read by next week.

Check out PacktPub’s Christmas Countdown

PacktPub is giving away a free ebook every day until Christmas. Unfortunately I missed almost the first two weeks but i’ve been checking back every day since I found out to claim my free ebook.

Posted in Book Review, HTML/CSS, Javascript, Web Design, Web Development Tagged with: , , , ,

PacktPub’s Buy One Get One Free Until March 26th!

PacktPub's Buy One Get One Free Offer

PacktPub Publishes 2000 Titles!

PacktPub was published 2000 titles since 2004. With this accomplishment they have created a Buy One, Get One Free offer on their entire library of eBooks. This offer is only valid until March 26th though, so act quick. The offer is automatically applied during checkout.

Learning Dart

Learning Dart is Packt Publishing’s 2000th published title. I had seen some articles on Dart in the past but never really looked into it. After a little research it sounds pretty impressive. Dart is free, open source, and another amazing product of Google’s developers. I can’t comment on the book yet but I’ll definitely get it shortly.

Looking for More Deals?

Subscribe to Packt Publishing’s newsletter. There are a variety of newsletters you can subscribe to. Check out the link at the bottom of this post for more info.

Need Help Deciding on a Book?

Earlier this year I mentioned another sale PacktPub had, and I cleaned up. I haven’t had time to go through all the books I had purchased but I’ve been working my way through a few. Top of my list, Mastering Web Application Development with AngularJS. This is the first book listed when sorted by popularity and I know why. Its good. Like really good. I haven’t gotten through the entire book yet due to my thesis becoming a bottomless pit, but as soon as I’m done writing my thesis I’ll be back on top of it.

What Makes Mastering Web Application Development with Angular JS So Good?

The way it’s written, the examples, the content included, the list goes on. I’ve seen many tutorial videos on how to use features of Angular JS, but not many explain why. This book gives plenty of examples of Angular JS features with real world reason why you would use Angular JS to accomplish it. Interested in Angular JS? Get it.

Packt Publishing Buy One, Get One Free

Learning Dart

Mastering Web Application Development with Angular JS

Packt Publishing Newsletter

Posted in Book Review, News, Tips, Web Development Tagged with: , , , ,

Book Review: Instant IntroJs

Instant Intro.Js Book Cover

Instant IntroJs is Short and Sweet

Being an “Instant” book from Packt Publishing this book is fairly short. But that’s the point. This book quickly dives into how to setup IntroJs and a more efficient way to include it in your project. Instant IntroJs also shows you how to include it in frameworks such as Rails and PHP’s Yii framework as well as give you the code to do so. I wasn’t even aware IntroJs had method chaining capabilities until I read this book. The multipage example was nice and simple and should be very useful for people looking to use IntroJs. Instant IntroJs also shows you how to compile the library if you needed to make your own modifications.

Multipage Example

The multipage example in Instant IntroJs was a bit different than I had planned out what it would be in my head, and better. It’s really easy to implement and should be useful for showing off new features.

Options, Actions and more…

There are sections in the book that display and provide detail of actions and options used in IntroJs. This is really handy for those who aren’t aware of IntroJs’s capabilities.

Know What You’re Buying

The book is only 48 pages. I’m not going to rant on how people rate things but this is a quick guide to IntroJs and I feel it does a pretty good job on showing you how to use it. If you’re not familiar with the library and not the best at Javascript or HTML programming this will help you implement IntroJs.


The book was pretty good. It quickly gives you the necessities for implementing Introjs into your project. Have a look at the table of contents provided by Packt Publishing for a precise look at the book’s contents. Follow the link below to find the book.

Instant IntroJs:

If you just want to see a basic implementation, check out my post:
Enhancing User Experience with IntroJs

Posted in Book Review, HTML/CSS, Javascript, Web Design, Web Development Tagged with: , , , , , ,

Upcoming Book Review: Instant IntroJs

Instant Intro.Js Book Cover

Over the next few days, I will be reviewing a book!

Remember my post on IntroJs? That was just a simple demo of it working. I’ve decided to have a bit of a deeper look so I picked up a book called Instant IntroJs and I’m going to see what else I can learn about it.

Multi-Page Intros with IntroJs

The overview for Instant Intro.Js says it goes over multi-page intros. I didn’t even know you could do that with Intro.Js. This will be a big hit though for helping some less tech savvy users.

Learn to Customize the IntroJs Library

In my opinion this is something that is very important in most libraries. It must be relatively easy to customize the library. I’m hoping Instant IntroJs will show me how to navigate around the library easily.

I’m not going to list all of the contents of Instant IntroJs, but for a detailed list and more information, follow the link below.

Instant IntroJS


If you haven’t already seen this posted in a few spots, Packt Publishing is having a sale on all their ebooks. 5$ each! I’m at least getting a few for sure. So you can expect more reviews.

One last thing…

If there is anything specific you would like me to review about the book please let me know. And I’m always open to constructive criticism so if you think my review lacks something, tell me.

Posted in HTML/CSS, Javascript, Web Design, Web Development Tagged with: , , , , ,

Programming Tips for the Inexperienced Programmer

Picture of PHP source


I’d just like to say I don’t consider myself perfect, I’m just offering tips to those who are starting programming. I’m going to use some (sort of) real examples I’ve come across while going through previous developers source, so if anyone gets offended, sorry, and I hope you’ve improved.

Tips for Comments

Not many programmers do enough commenting, it kind of sucks, I know. I’m even guilty occasionally when I need to complete something quickly. So here’s a programming tip for comments.

When you do comment, make sure it’s worth the time. Don’t explain what the following line of code is doing unless it’s incredibly cryptic. Instead, explain why you have the following line/block of code in there.


//if urgency is urgent
if($urgency == 'urgent')

Real example… Even if I hadn’t had years of programming experience I would still know what that if statement was there for. Something better…

//change the text color if the post was urgent
if($urgency == 'urgent')

Maybe not the best example but you get the point. In most cases the person reading the source later in an applications life will have some programming experience. This means they know what simple statements are doing, don’t waste your time on them.

Variable Name Tips

Programming tip for variable names – use human readable variable names. If you start abbreviating variable names you’ll run out pretty quickly. That and it’s impossible to know what it’s supposed to be. Don’t be lazy, you’ve probably got crazy fast typing skills, whats a few more characters?


$result = mysql_query($q);
$cda = mysql_fetch_row($result);

$ar = $cda[0];
$t = $cda[1];
$l = $cda[2];
$a = $cda[3];
$tn = $cda[4]; 

Take a guess what’s in the query, result, array, etc… Can’t even guess without seeing the query really.

A table of CDs was queried returning the artist, title, length, album, and track number respectively. It’s pretty obvious what you can rename those variables to, which leads into my next tip.

Database Queries and their Results

Here’s a programming tip that will make your code much more readable. When doing database queries, describe the results in the variable name instead of using $result, which is used for a lot of database connectivity examples. $result is used to describe what is being stored in the variable, in a database connection example it fits perfectly, in production code, not so much. A fellow programmer will know the query command will return a result into the specified variable.

Building off the example above…


$queryAllCDs = "SELECT * FROM CD";
$cdCollection = mysql_query($queryAllCDs);
$CD = mysql_fetch_row($cdCollection);

$artist = $CD[0];
$title = $CD[1];
$length = $CD[2];
$album = $CD[3];
$trackNumber = $CD[4]; 

But wait, we can make it even better.

$CD = mysql_fetch_assoc($cdCollection);

$artist = $CD['artist'];
$title = $CD['title'];
$length = $CD['length'];
$album = $CD['album'];
$trackNumber = $CD['trackNumber']; 

Now the above code is a little unnecessary and it’s a bit obvious, right? Good. Typically you would not create a new variable just to change it’s name but the example is supposed to show you how much more readable you can make your code with a few minor tweaks. Like the following two for loops.

while($newRow = mysql_fetch_row($result))
  echo $newRow[1].'<br>';

And now for the better one..

while($CD = mysql_fetch_assoc($cdCollection))
  echo $CD['title'].'<br>';

Redundant Code

If you doing the same thing in multiple places, create a function. Typically if you’ve done something twice already, there’s a good chance you’ll have to do it again. And what happens when you need to modify it? For instance, pretend mysql_escape_string() and similar functions don’t exist and you want to escape single quotes for your MySQL database. Then you’re company switches to MSSQL!


$artist = str_replace("'", "''", $_POST['artist']);
$title = str_replace("'", "''", $_POST['title']);


function escapeSingleQuotes($value)
  return str_replace("'", "''", $value);

$artist = escapeSingleQuotes($_POST['artist']);
$title = escapeSingleQuotes($_POST['title']);

So now when the variables need single quotes escaped differently due to a new database, we just change the function.

I guess that’s enough for now, I’ll probably have more programming tips again soon. Happy coding everyone!

And if you’d like to contribute leave a comment.

Posted in PHP, Tips, Web Development Tagged with: , , , ,

Twitter Bootstrap Infinite Menu – Associative Array Edition

Twitter Bootstrap Infinite Menu - Associative Array Edition

Finally, An Infinite Bootstrap Menu for Associative Arrays

Sorry it took so long, I’ve been busy as usual. This is the same infinite menu I posted before but now using an associative array instead of an array of objects. I’ve gotten a few requests for it so I’ve modified the previous script to make it easier for those who aren’t using frameworks to do database queries.

What’s different from the last Twitter Bootstrap Infinite Menu?

Not much, if you compare the scripts I’ve changed the array of menu items to just an associative array to create the infinite menu compatible with bootstrap and all variables are accessed as associative arrays instead of objects.

Still having issues?

Download the following zip of a working example of this menu for a MySQL database. Input your database credentials in the top of the source of index.php and providing you’ve got the correct info in your database it will work fine. If you need help debugging it let me know.

Working MySQL Bootstrap Infinite Menu

Note: the command is deprecated in PHP 5.5, please use the alternative for whatever database connection approach you’ve chosen.

Anything else?

I’m hoping this will help users get their twitter bootstrap infinite menus working correctly. If you’re having trouble send me a comment and I’ll get back to you.

Link to the Object Array Twitter Bootstrap Infinite Menu

This Menu In Action

Zipped Infinite Menu Source Files

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  <!-- Twitter Bootstrap CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">

    <!-- Start Dynamic Nav -->
	  <div class="navbar navbar-inverse">
      <div class="navbar-inner navbar-inverse">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          <a class="brand" href="#">Title</a>
          <div class="nav-collapse collapse navbar-responsive-collapse">
            <ul class="nav">

              $menu_items = array(
                array('id'=>'1', 'name'=>'Home', 'parent_menu_id'=>'0'),
                array('id'=>'2', 'name'=>'Products', 'parent_menu_id'=>'0'),
                array('id'=>'3', 'name'=>'About', 'parent_menu_id'=>'0'),
                array('id'=>'4', 'name'=>'Contact', 'parent_menu_id'=>'0'),
                array('id'=>'5', 'name'=>'Apparel', 'parent_menu_id'=>'2'),
                array('id'=>'6', 'name'=>'Shirts', 'parent_menu_id'=>'2'),
                array('id'=>'7', 'name'=>'Pants', 'parent_menu_id'=>'2'),
                array('id'=>'8', 'name'=>'Hats', 'parent_menu_id'=>'5'),
                array('id'=>'9', 'name'=>'Gloves', 'parent_menu_id'=>'5'),
                array('id'=>'10', 'name'=>'Ballcaps', 'parent_menu_id'=>'8'),
                array('id'=>'11', 'name'=>'Beanies', 'parent_menu_id'=>'8'),
                array('id'=>'12', 'name'=>'Wool', 'parent_menu_id'=>'11'),
                array('id'=>'13', 'name'=>'Polyester', 'parent_menu_id'=>'11'),
                array('id'=>'14', 'name'=>'', 'parent_menu_id'=>'4'),

                global $menuItems;
                global $parentMenuIds;
                //create an array of parent_menu_ids to search through and find out if the current items have an children
                foreach($menu_items as $parentId)
                  $parentMenuIds[] = $parentId['parent_menu_id'];
                //assign the menu items to the global array to use in the function
                $menuItems = $menu_items;

                //recursive function that prints categories as a nested html unorderd list
                function generate_menu($parent)
                        $has_childs = false;

                        //this prevents printing 'ul' if we don't have subcategories for this category
                        global $menuItems;
                        global $parentMenuIds;
                        //use global array variable instead of a local variable to lower stack memory requierment
                        foreach($menuItems as $menuItem)
                            if ($menuItem['parent_menu_id'] == $parent)
                                //if this is the first child print '<ul>'
                                if ($has_childs === false)
                                  //don't print '<ul>' multiple times
                                  $has_childs = true;
                                  if($parent != 0)
                                    echo '<ul class="dropdown-menu">';

                                if($menuItem['parent_menu_id'] == 0 && in_array($menuItem['id'], $parentMenuIds))
                                  echo '<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">' . $menuItem['name'] . '<b class="caret"></b></a>';
                                else if($menuItem['parent_menu_id'] != 0 && in_array($menuItem['id'], $parentMenuIds))
                                  echo '<li class="dropdown-submenu"><a href="#">' . $menuItem['name'] . '</a>';
                                  echo '<li><a href="#">' . $menuItem['name'] . '</a>';

                                //call function again to generate nested list for subcategories belonging to this category
                                echo '</li>';
                        if ($has_childs === true) echo '</ul>';
    <!-- End Dynamic Nav -->
          </div><!-- /.nav-collapse -->
      </div><!-- /navbar-inner -->
		<script src=""></script>
    <script src="js/bootstrap.min.js"></script>
Posted in HTML/CSS, PHP, Twitter Bootstrap, Web Development Tagged with: , , , ,

Filtering HTML Data With Angular JS

Filtering HTML Data with Angular JS

I was trying to figure out why i would use something like Angular JS because I never really saw the need for manipulating page data that often…

So I Decided to Learn Angular JS

I looked through the examples on the Angular JS homepage but they weren’t that interesting.

So what you can change text in a text box and the line beneath it. I could easily do that in plain javascript without including a framework to do so.

So I decided I better learn Angular JS before I dismissed it.

It’s Actually Really Awesome!

Mainly for it’s ability when templating and manipulating data in a JSON or object format, from what I’ve learned so far anyway.

Do you remember ng-grid I blogged about a while back? That was created with the help of Angular JS.

Have You Ever Had Tables You Wanted To Make Searchable?

If you’ve worked with enough data it needs a page sized table, I bet.

You’re in luck with Angular JS. Below is demo of a table I created that is easily searchable through a textbox.

Try out my Angular JS searchable table demo.

Below is the source from the example. notice how easy it is to add a filter to the table.

<!DOCTYPE html>
<html ng-app>
        <title>Angular JS Searchable Table Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src=""></script>
        <style type="text/css">
                border: 1px solid #000;
        <div>Search: <input type="text" ng-model="search">
        <div ng-controller="tableData">
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Student Number</th>
                <tr ng-repeat="student in class | filter:search">
            var tableData = function($scope)
                $scope.class = [
                    {fname: "Kyle", lname: "Hayhurst", studentNumber: "2094378591", specialization: "Web Development"},
                    {fname: "Sandy", lname: "Beach", studentNumber: "2094378545", specialization: "Game Design"},
                    {fname: "Bill", lname: "Ding", studentNumber: "2094378534", specialization: "Business"},
                    {fname: "John", lname: "Doe", studentNumber: "2094378595", specialization: "Software Development"},
                    {fname: "Jimmy", lname: "Hampton", studentNumber: "2094378234", specialization: "Web Design"}

It is important to note that I only used a table as an example but it can be used with any repeated element.

No download for this demo, everything is there in the source!

I will continue to move forward with Angular JS, it seems really cool.

Stay tuned for updates and if you’ve created anything cool with it send me a link I want to check it out!

Posted in HTML/CSS, Javascript, Tips, Web Development Tagged with: , , ,

Wicked CSS Transitions – ‘Magic’al Even…

Cool CSS Transitions with Magic

CSS3 Transitions Are Very Cool

CSS3 transitions can produce some really cool effects. Rotating, fading, resizing, you name and CSS3 has got it. Even some perspective effects can be created.

…But They’re a Pain to Deal With

The problem is the varying browser support mixed with poor examples and ending up with something that just doesn’t look that good. What if there were a library containing a bunch of pre-compiled transitions?

You’re in Luck! Introducing Magic

Magic is a library full of CSS3 transitions giving you the ability to easily add some cool interaction to your projects.

How does it work?

It’s just a bunch of CSS3 transitions, you simply add the class to the element you wish to manipulate and watch it go!

It is important to note that you cannot just add the class to the element ahead of time and expect to see the transition. The class can easily be added using jQuery of straight up javascript.

See the example on github for the jQuery version.

jQuery is not needed for this library however. This is a pure CSS3 transition library and if you want to see it in action with plain javascript check out my magic demo.

Can I use it in my next project?

Looks like it, at the moment there is no license associated with Magic CSS.

Below is the source for the example. Keep in mind since there is a 3 second timeout before the class is removed from the div you may find the transitions won’t appear correctly if clicked multiple times within that 3 seconds.

<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="magic.min.css">
        <style type="text/css">
                margin:200px auto;
        <script type="text/javascript">
            var transitions = new Array('magic','twisterInDown','twisterInUp','swap','puffIn','puffOut','swashOut','swashIn','foolishOut','foolishIn','holeOut');
            function addTransition()
                //generate a number from 0 to 10
                var randomNumber = Math.floor(Math.random()*11);
                //find the element we want to manipulate
                var theElement = document.getElementById("targetElement");
                //set the class attribute to "magictime {randomTransition}"
                theElement.className = 'magictime ' + transitions[randomNumber];
                //after 3 seconds remove the classes, some transitions make the div too small to see
                    theElement.className = '';
                    }, 3000);
        <div id="container">
            <div id="targetElement" onclick="addTransition();"><strong>HEY THERE!</strong></div>

For a complete list and demo of transitions check out magic’s authors’ page.

Here is the zip containing magic.min.css and the above source.

Posted in HTML/CSS, Javascript, Tips, Web Design, Web Development Tagged with: , , , , , ,

Internet Around the World – Project Loon

Project Loon - Internet for Everybody

Everybody Should Have Access to the Internet

That’s my belief anyway… I’m not saying the internet should be free for everyone because that’s just not realistic at this point.

There are too many money hungry corporations to let that happen. But, everyone should have the ability to access the internet.

The Information Superhighway

Not a bad name for it I guess. Over the years I’ve learned much of what I know today from the internet. Of course some of the information you must take with a grain of salt.

For the most part there is some good information out there. Just don’t take 95% of social media comments into consideration.

If it were not for the internet I’m not sure where I would be today. Most of my jobs I have worked my way into because I’ve gotten much experience due to learning from the internet.

Online education is becoming very popular and for good reason. There is a lot of great content and some even open source for corrections and clarity.

Just over a year ago I heard about Udacity. I was in the first batch of virtual students to take the Intro to Computer Science class.

Now I had already completed my 3-year diploma as a Computer Programmer Analyst and was/am currently attending university for a Bachelor of Computer Science but it was using Python so I decided to give it a whirl.

It was fantastic. It was a series of videos teaching you the fundamentals with tutorials and multiple choice questions at the end of each section. I will head back at some point for more.

Anywho, I’m getting a bit off topic, but this is why I think everyone should have access to the internet, knowledge.

Knowledge is Power

And with Project Loon, Google is spreading this power throughout the world. Project Loon is starting this month in New Zealand.

What is Project Loon?

Project Loon is Google’s attempt to allow everyone to connect to the internet through a series of weather balloons.

How Does Project Loon Work?

Project Loon is a series of solar powered weather balloons that work as access points as they fly over. The balloons move around by allowing the wind to push them and rising or failing to help change direction. The balloons then transmit your requests to the local ISP.

Will Project Loon Affect Airplanes?

No, planes typically fly below the 10km high mark. These weather balloons float around 20km in the stratosphere. Project Loon employees are also working with airspace officials during launch.

Thumbs up Google, great idea. I’ll definitely be following the progress of this project.

For more information check out the website: Project Loon

Posted in News Tagged with: , , , ,
%d bloggers like this: