Engine Works

Under the hood of Alteryx: tips, tricks and how-tos.
StephenW
Alteryx Alumni (Retired)
Written in collaboration with @MacRo

 

If you haven't had a chance, please checkout the Decision 2016 Presidential Election application. The app predicts who the winning candidate will be within a given U.S. neighborhood, as well as breaks down the outcome by demographics such as age, education, income, and race. Data from SurveyMonkey and the blending, spatial, predictive and Gallery API functions in Alteryx are used to create predictions that are beautifully displayed with help from Carto and Tableau. This post will walk through the architecture used to accomplish this.



Architecture.png
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figure 1: High-level architecture of the app
 

Starting with the Frontend . . .

 
The landing page contains four key functional pieces of the app:
  1. Text input field connected to the Google Places API
  2. Button that executes the Alteryx Gallery API call
  3. Embedded Carto choropleth map displaying county level voter preference
  4. Embedded Tableau dashboard with aggregated national results

MainPage_Annotated.png
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figure 2: Annotated screenshot of the landing page - shown before running the app
 
The Google Places API was used to provide address suggestions and geocode the address. When an address is selected, the Google Places API responds with a JSON object containing details for the address.

 

GoogleAPI_JSON.PNG
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figure 3: JSON response from Google Places API

 

executeApp.PNG
 
 
 
 
 
 
 
 
 
 
Figure 4: Clicking the FIND ME button triggers a JavaScript function to run, which sends the stringified JSON object and calls an Alteryx Gallery API method that runs the Election Analytic App.

 

Moving to the Backend . . .

 

Prediction Dataset

The foundation of the app is a prediction dataset. A generalized, boosted regression model was created using SurveyMonkey tracking poll data, historical election results, economic, and demographic data sets found in the data package. Look for an upcoming blog post that will detail the modeling process for the prediciton dataset.
 

Data Preparation Workflow

The preparation workflow ingests the prediction dataset and re-structures it to support the visualizations in Carto and Tableau. Two datasets, census tract and county, are uploaded to Carto using the Publish to Carto connector. The ability to output to a Tableau Data Extract (TDE) is used for the Tableau Public dashboards; which requires data to be in TDE format. Two TDEs were created - a granular, census tract version and a nationally aggregated version.
 

Carto Maps

Three maps were created using Carto. A national choropleth map was created to show voter preference at the county level without any county outlines - this is the initial map on www.alteryx.com/election. Another county level map was created with two layers. The first layer is a choropleth map showing voter preference. The second layer shows a yellow border around the county containing the address entered. A similar map was created at the census tract level.
 

Tableau Dashboards

Two Tableau dashboards were created. The census tract TDE was used to create a dashboard that allowed for excluding all but one census tract. The other dashboard showed nationally aggregated results. Both the national and local dashboards were built with Tableau Desktop 10.0 and published to Tableau Public.
 

HTML Output Page

Both Tableau and Carto provide the ability to embed a visualization within another webpage.

Tableau_EmbedCode.PNG
Figure 5: For Tableau, we used an embedded URL to display the dashboard within an iframe on the output page
 

Carto_EmbedCode.PNG
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figure 6: For Carto, we used the CARTO.js library to create and dynamically filter the map within the output page
 

Analytic App

The Election Analytic App, hosted on the Alteryx Gallery, ingests the latitude and longitude provided by the Google JSON object. Using the latitude and longitude, the address census tract and adjoining census tracts are identified. Knowing the set of census tracts we want to display, the app ingests the HTML output page discussed above.  With the RegEx tool, the HTML/JS code for Tableau and Carto is updated to show only data that's relevant to the address entered. Once the page code has been updated, it's written out and displayed in an iframe on the election app website.

checkAppStatus.PNG
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figure 7: JavaScript code used to check the status of the app and embed the HTML output into the page
 

Summary

The Decision 2016 Presidential Election app used many features of the Alteryx Analytics Platform. The prediction dataset was created using the predictive, spatial, and data blending capabilities of Alteryx Designer. The prediction dataset also made use of the Alteryx Strategic Analytics Data Sets; specifically, the U.S. Census and American Community Survey datasets. The extensible nature of Alteryx Designer was highlighted through the integration with Carto and Tableau. Last but certainly not least, the Gallery and Gallery API were critical in providing custom results based on user input.
 
Have additional questions on the technical details? Please comment below and we'll be happy to answer.
Stephen Wagner
Product Manager, Technology Alliances

Stephen Wagner is a Product Manager, Technology Alliances with a passion for enabling users to take full advantage of the Alteryx platform. Stephen’s background includes analyzing sales, marketing, and operational data for a Fortune 50 retailer, as well as data visualization development as an Analytics Consultant.

Stephen Wagner is a Product Manager, Technology Alliances with a passion for enabling users to take full advantage of the Alteryx platform. Stephen’s background includes analyzing sales, marketing, and operational data for a Fortune 50 retailer, as well as data visualization development as an Analytics Consultant.