Draw Tableau Polygons on Custom Background Image

This a tool for creating a CSV of custom polygons for use in Tableau. It outputs a CSV file in a correct format, for use with data blending.

Usage:

  1. Choose an image file using the Choose File button. The image must be in the same folder as this HTML file on your computer
  2. Click in the image to create the points in your polygon. The tool will draw a line between each point
  3. DO NOT DRAW A POINT TO COMPLETE YOUR SHAPE! Either Right-Click or press the "Complete Polygon and Name" button at the bottom
  4. When you Complete a Polygon, give it a name. This should match up with a field from the other data you want to blend onto the polygons
  5. Draw all the polygons you want, following steps 2-4 above.
  6. Once you've drawn all the polygons, press the "Output Polygons" button. You'll then see the correct Background Image settings for Tableau and a list of points in CSV format
  7. Copy the list of points (including the headers) over into a text file and save it as a .csv
  8. You can go back and add more after your initial output. Just press "Output Polygons" again and the output at the end will update.
  9. Use the "Background Image Settings in Tableau" area as correct values when you go to Maps->Background Images->Add Image in Tableau Desktop
  10. This menu will appear below the selected image file. Output will be in an overlay window near top of image. Datapoints are in pixels.

Select Line Color:

Undo goes back one point

Right-clicking will also complete out the polygon

Instructions from this point

  1. Copy the list of points (including the headers) over into a text file and save it as a .csv
  2. Use the "Background Image Settings in Tableau" area as correct values when you go to Maps->Background Images->Add Image in Tableau Desktop
  3. Change the Marks card type to "Polygon".
  4. Put SUM(X) on the Columns shelf. Put SUM(Y) on the Rows shelf.
  5. Put the "Identifier" field on Detail on the Marks card. Put "Path ID" on Path. Now you should see your polygons
  6. Right click on the x-axis and set the axis to fixed: Start = 0 , End = Right Value from drawing tool output
  7. Right click on the y-axis and set the axis to fixed: Start = 0 , End= Top Value from drawiong tool output
  8. Hide the headers for the x and y axes via right-click

Background Image Settings in Tableau

X Field
X
Left
Right

Y Field
Y
Bottom
Top

CSV Output - Copy All to CSV File