Angular Inside SVG Inside HTML

svg embedded inside html, appears to simply extend the grammar of html, and perfectly co-exists in the dom. angular can latch on to that and work with it.

i tool a svg map of the states of the usa from wikipedia and embedded it in a html page. i added angular and bound incarceration data from another wikipedia page and made that a json model for angular to consume.

click here to see the result as stand alone .

yes you can interact with it. one view shows a blue with increasing darkness for incarceration rates. the other one has green to show below us average incarceration rates, and red to show above average rates. i’m not a statistician though, and the luminosity calculations could be off.

pictures, for those that can’t view the link:

compare to the wikipedia picture – the hues/luminosity for which appear off. louisiana vs oklahoma is an example: