PETA Kids Hurting Animals

PETA Kids Hurting Animals is a WordPress website, built entirely from scratch as the sole developer, that provides a way to track news stories about violent and cruel acts committed by young people against animals. The link between animal abuse and violence is very well-documented, and this website attempts to aggregate and illustrate data from both the United States and Canada.

The website features an interactive map where you can click on different US states and Canadian territories/provinces and see the local laws and news incidents. The map pulls data from a read-only internal API, built using the WordPress Rest API. As the sole developer, I had the ability to tackle this project however I wanted.

Loading US state information on clickSVG paths change fill color on hover. On-click, state information is loaded.

On page load, the US map is created first. An instance of a custom-written Map class is created. It makes use of the SimpleXMLElement class to parse through country SVG and set a custom class to any state/province Path that have reported animal cruelty incidents. The Paths with classes set will render with a darker teal fill color, otherwise the states/provinces that do not have any reported incidents as stored in the WordPress database as custom fields within each state/province Post will load as light teal. It then converts the XML resource back into a string so that it can be output as HTML. Writing this class was very fun and I learned about how to convert XML into objects that can be processed with normal property selectors and array iterators.

Loading Canada SVGRadio buttons switch countries.

Clicking between countries will switch the displayed SVG from USA to Canada. These events are handled through javascript. API calls are chained to one another via callbacks. The call to the custom REST API returns all of the incident information for all of the states or provinces/territories in the selected country, and a callback function grabs the contents of the appropriate PHP partial that contains the specific country SVG and converts the string into DOM nodes.

A lot of interesting JS and PHP work for an equally interesting website. Take a minute out of your day and check out some of the reported incidents.

Year: 2019