Tableau's polygon mark type allows you to create interactive mappings -- we've seen stadiums, localized maps, floorplans and retail planograms all built out as vizes. But plotting out the X and Y coordinates can be a task -- there are a few techniques, but unless you have access to Vizio or another tool for drawing, there's a lot of manual guesswork.

 

Attached to this blog post is a completely browser based tool (tested in Firefox and Chrome) for directly drawing polygons onto an image. At the end it outputs a CSV file with all the vertices and the correct settings for the Background Image dialog. You do have to download it to your own computer -- that's the only way for the browser to have access to your local files (yes HTML5 exists but...)

 

Polygon Mapper snapshot.png

 

 

Installation Instructions

 

  1. Extract the attached file "polygon_mapper_safe.zip" to a folder on your computer
  2. Rename “jquery.svg.txt” to “jquery.svg.js” . Say yes if Windows asks if you are really sure
  3. Rename “jquery-1.10.2.min.txt” to “jquery-1.10.2.min.js” . Say yes if Windows asks if you are really sure
  4. Put whatever image you want to map over into the extract folder. Image must be in the same folder as the html and js files.
  5. Open up the polygon_mapper.html file in Firefox or Safari (haven’t tested in IE)
  6. Follow the instructions on the page. Click on points on the page to draw the lines of your polygon. The tool fills the line from point to point. You don't have to connect the last point back to the first -- just right-click to complete it. Then give the polygon a name that you can blend to from another data source.
  7. Load the CSV in Tableau, set up your background image and blend data against it

 

How It Works

 

All of the functional code is in the polygon_mapper.html, with full commenting. The drawing library is jQuery SVG , on top of a standard jQuery library. The main challenge is finding the relative placement of the mouse compared to the image itself. A web browser calculates all distances from Top and Left. The Left calculations are unchanged for Tableau (assuming we start at 0 on the X-axis), but Tableau calculates Y distances from the bottom rather than the top.

     // relX/Y is the "real place" on the image; i.e. without any other page spacing affecting it
               mouse_x = e.pageX;
               mouse_y = e.pageY;
               var relX = e.pageX - parentOffset.left;
               var relY = e.pageY - parentOffset.top;
               
               // Tableau goes from bottom to top (starting at 0), so y-axis is the height minus distance from top
               tableau_x = relX;
               tableau_y = img_height - relY;

 

From that point on we keep two distinct arrays -- one for the SVG drawing using Top values, and one for the Tableau polygons using 0-starting Y values. Display is this separate from the Tableau output -- the tool draws the final line to the original vertex, but we don't generate a row for that Vertex since Tableau handles the closing of the polygon automatically.