For those of you that don’t know,

Even though this data may not have been a perfect fit, I struggled with the 0 to visualized portion of Dygraphs longing for more basic and easy to follow examples. I have chopped up this tutorial into easy to follow steps and made it available on github. It’s a great way to learn about city data and data visualization using javascript.

Step 0 – Plain Jane

Step0-PlainJaneThis represents the starting point for the tutorial. Reorienting the data was omitted here but can be learned from comparing the reoriented file with the raw file in the data folder. Applying meaning to the data can be difficult at this stage. Basic javascript, dygraphs reference and scrubbed data are included but not much else.

Step 1 – Adding a Title


To add the title, we pass in the options parameter to the dygraphs constructor using the below javascript. Notice the options parameter is a json object and properties are case-sensitive.

 Step 2 – Resize


After adding the title, the graph looks cramped. We can alter the height and width parameters to fix this as the below gist illustrates.

Step 3 – Formatting Currency


The scientific notation on the left (y-axis) and on the values makes sense, but isn’t terribly readable. Fortunately, we can beautifully format currency with a great library called numeral.js. You can see it in action below. This turns “$10e+7” into “$10 m”.

Step 4 – Set Axis Label Width


The below javascript changes improve the readability of our left(y-axis) values by giving them some room to breath. Below we set the axisLabelWidth property to 100.

Step 5 – Refactor

Our astute readers and developers will notice the identical code that formats the currency for the axisLabelFormatter and
valueFormatter. For consistency’s and stability’s sake, we need to rectify this situation. In our case, we create and use a single function called formatLikeCurrency.

Step 6 – Debugging Tip

As you work through dygraphs, for debugging it can be helpful to use the hideOverlayOnMouseOut property. This prevents the chart corresponding to the mouse position to stay visible until making another selection. Consider moving between other sites, text editor, e-mail and folder/file viewer. It’s important to keep your frustration to a minimum.

Step 7 – Styling

Step7-StylingStyling creates a better visualize experience for anyone using or viewing your data. Fortunately, we easily style the visualizations generated with dygraphs using CSS. First we need to configure our class structure that will be used by CSS selectors. Then, we tell dygraphs the correct class to put the labels, that appear on mouse hover.

Step 8 – Profit

I hope that you learned something about dygraphs, Fort Lauderdale, data visualization or javascript.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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