After last week’s Angular+Svg+Html blog entry, here’s another version of the same US States incarceration rates data. Bar-charts in SVG this time.

Here it is running in this page:

Again, it’s interactive. You can sort alphabetically, or by rate. It’s the SVG rectangles that Angular is mutating, and the DOM (in modern browsers) just makes that view correctly.

You really want to view the source, because as always, I’ve done a low-JavaScript usage of Angular. I greatly prefer that style and recommend it.

Snafus

Two ng-repeat loops

I have to do two ng-repeat loops - one for the rectangles, and one for the text written (at 90 degrees) in the rectangles:

If you’re new to Angular, note how little SVG is being used for a multi-bar chart :)

I had to change the JSON data :-(

The nature of the data, has to change from the last blog entry, so that ordering can be supported. It is an array now:

$scope.states = [
	{ name: "Louisiana", "inc" : 1619},
	{ name: "Alabama", "inc" : 735}
];

And in the previous blog entry, it was a dictionary:

$scope.states = {
	"la": {"inc" : 1619},
	"al": {"inc" : 735}
};

This is because of this issue in Angular. It is marked as “won’t fix” which I disagree with for the record. At least the workaround offered, I believe should be in the framework by default.

May 14, 2016

Updated for Angular 1.5.5