GitHub - LindsayDenotes/exploreMapPy: Interactive map of USA. Written with JavaScript, SVG, Python. Data is JSON. User clicks an SVG state shape, which triggers the display of that state's contact information in a text field below the map. Or, user selects a product type from the drop down menu causing the states that contain that selection to get filled white on the map. Events operate independently from each other, so user events can occur in any order; e.g., user can first select a product type, then can click on a highlighted or unhighlighted state. Compilation before runtime: JSON was generated from a Python script that read the contact data from Excel and wrote to a JSON file. For deployment on an asp.net server, one JSON file, one JavaScript file, and one HTML file containing inline SVG were uploaded to a directory on a secure web server. At run time: when user clicks on a state, an event handler function in the JavaScript gets the JSON object whose key matches the clicked element's ID. Similarly, when user selects a product type from the drop down menu, a second event handler function, on select, checks each item in all 52 objects' product type arrays. If a state shape element contains the same string that the user selected from the drop down menu, it is added to a jQuery collection containing the matched state shapes' IDs, which are then filled white.

My name is Lindsay Brown. When I worked as a Web Development Specialist at AASHTO (the American Association of State Highway and Transportation Officials), I developed this interactive map to empower state DOT employees and private industry manufacturers to retrieve product type and contact information about every state DOT.

I created and implemented this single page web application from concept through to implementation in order to reduce the high volume of phone call inquiries to AASHTO staff. Questions often entailed "Who should I talk to about my product? Do you have their phone number?" and "Which state DOTs will care whether or not my product gets certified by your program?" I conducted the survey to gather the relevant information from the 52 state DOTs and exported the results into an Excel worksheet.

This repository holds the code for the second version of the interactive map. I completed it in July 2015. Each state shape is a scalable vector graphic (SVG) group element with a unique ID that corresponds to a key in the JSON. There is click functionality as opposed to hover, and select functionality on a new drop down menu feature. The first version of the map had no drop down menu, forcing users to click on each of the 52 state shapes one-by-one to find out which state DOTs used a certain product type. Prior to the publication of my interactive map on ntpep.org, NTPEP's website had 15 or so separate static maps on separate web pages to convey the product usage information, but without the contact information. The map puts all that information in one, user-friendly interactive visual graphic.

The map is archived on my WordPress blog: denotetoday.com.