Fort Lauderdale Budget Data with Dygraphs

For those of you that don’t know,

• Danvk maintains an awesome open-source JavaScript charting library called Dygraphs.
• Open Gov built a financial transparency portal for The City of Fort Lauderdale.
• This is the tutorial from a Code for Fort Lauderdale meeting on April 1, 2015.

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

This 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.

	g = new Dygraph(
	// containing div
	document.getElementById("graphdiv"),
	// CSV or path to a CSV file.
	"Fort Lauderdale Data Snapshot-Reoriented.csv"
	);

view raw

index.js

hosted with ❤ by GitHub

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.

	g = new Dygraph(
	// containing div
	document.getElementById("graphdiv"),
	// CSV or path to a CSV file.
	"Fort Lauderdale Data Snapshot-Reoriented.csv",
	{
	title: 'Fort Lauderdale Budget Data'
	}
	);

view raw

index.js

hosted with ❤ by GitHub

 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.

	g = new Dygraph(
	// containing div
	document.getElementById("graphdiv"),
	// CSV or path to a CSV file.
	"Fort Lauderdale Data Snapshot-Reoriented.csv",
	{
	title: 'Fort Lauderdale Budget Data',
	width: 800,
	height: 480,
	}
	);

view raw

index.js

hosted with ❤ by GitHub

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”.

	g = new Dygraph(
	// containing div
	document.getElementById("graphdiv"),
	// CSV or path to a CSV file.
	"Fort Lauderdale Data Snapshot-Reoriented.csv",
	{
	title: 'Fort Lauderdale Budget Data',
	width: 800,
	height: 480,
	axes: {
	y: {
	axisLabelFormatter: function(x) {
	return numeral(x).format('($ 0.00 a)');
	},
	valueFormatter: function(x) {
	return numeral(x).format('($ 0.00 a)');
	},
	}
	},
	}
	);

view raw

index.js

hosted with ❤ by GitHub

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.

	g = new Dygraph(
	// containing div
	document.getElementById("graphdiv"),
	// CSV or path to a CSV file.
	"Fort Lauderdale Data Snapshot-Reoriented.csv",
	{
	title: 'Fort Lauderdale Budget Data',
	width: 800,
	height: 480,
	axisLabelWidth: 100,
	axes: {
	y: {
	axisLabelFormatter: function(x) {
	return numeral(x).format('($ 0.00 a)');
	},
	valueFormatter: function(x) {
	return numeral(x).format('($ 0.00 a)');
	},
	}
	},
	}
	);

view raw

index.js

hosted with ❤ by GitHub

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.

	g = new Dygraph(
	// containing div
	document.getElementById("graphdiv"),
	// CSV or path to a CSV file.
	"Fort Lauderdale Data Snapshot-Reoriented.csv",
	{
	title: 'Fort Lauderdale Budget Data',
	width: 800,
	height: 480,
	axisLabelWidth: 100,
	axes: {
	y: {
	axisLabelFormatter: formatLikeCurrency,
	valueFormatter: formatLikeCurrency,
	}
	},
	}
	);
	function formatLikeCurrency(x) {
	return numeral(x).format('($ 0.00 a)');
	};

view raw

index.js

hosted with ❤ by GitHub

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.

	g = new Dygraph(
	// containing div
	document.getElementById("graphdiv"),
	// CSV or path to a CSV file.
	"Fort Lauderdale Data Snapshot-Reoriented.csv",
	{
	title: 'Fort Lauderdale Budget Data',
	width: 800,
	height: 480,
	axisLabelWidth: 100,
	hideOverlayOnMouseOut: false,
	axes: {
	y: {
	axisLabelFormatter: formatLikeCurrency,
	valueFormatter: formatLikeCurrency,
	}
	},
	}
	);
	function formatLikeCurrency(x) {
	return numeral(x).format('($ 0.00 a)');
	};

view raw

index.js

hosted with ❤ by GitHub

Step 7 – Styling

Styling 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.

	#graphdivlegend {
	float: right;
	}
	#graphdiv {
	float: left;
	}
	#graphdivlegend > span {
	display: block;
	}

view raw

index.css

hosted with ❤ by GitHub

	<html>
	<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<link href="index.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined-dev.js"></script&gt;
	<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script&gt;
	</head>
	<body>
	<div id="graphdiv"></div>
	<div id="graphdivlegend"></div>
	<script src="index.js"></script>
	</body>
	</html>

view raw

index.html

hosted with ❤ by GitHub

	g = new Dygraph(
	// containing div
	document.getElementById("graphdiv"),
	// CSV or path to a CSV file.
	"Fort Lauderdale Data Snapshot-Reoriented.csv",
	{
	title: 'Fort Lauderdale Budget Data',
	width: 800,
	height: 480,
	axisLabelWidth: 100,
	labelsDiv: "graphdivlegend",
	axes: {
	y: {
	axisLabelFormatter: formatLikeCurrency,
	valueFormatter: formatLikeCurrency,
	}
	},
	}
	);
	function formatLikeCurrency(x) {
	return numeral(x).format('($ 0.00 a)');
	};

view raw

index.js

hosted with ❤ by GitHub

Step 8 – Profit

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