The Information Details content type can be used to display data dashboards built in Tableau along with text to tell a story through data. If you have a mixture of visuals with short pieces of text, it’s recommended that you use the Information Details visual story subtype so you can take full advantage of text wrapping around larger data visualizations.
If you want to add a Tableau visualization to an Information Details page, it’s important to first format the data dashboard properly in the Tableau software. This enables you to embed a data visualization in a responsive, flexible environment. The size of the data visualization will change as the screen size changes based on the device you use.
Tableau has a feature where for a single dashboard you can create different device layouts — phone, tablet and desktop. The text wrapping feature for data visualizations on Information Details pages is designed to be used with that functionality. You also need to set your dashboard layouts to have a flexible width in Tableau. If you don’t do this, and you use fixed dashboard widths instead, it may cause problems with text wrapping on an Information Details page.
Here’s how we recommend setting up your visualization in Tableau so it has device layouts and a flexible width:
Create a Dashboard and add your worksheet(s) to the Dashboard. (Note: We do not recommend using Stories because they do not support device layouts.)
In the Dashboard settings, add a desktop, tablet, and phone layout
In each layout under “Size”, select “Fit width.”
Pick a height — it doesn’t have to be the same in each layout
After you publish the data visualization online (for example, to Tableau Public), we recommend testing the visualization at extreme sizes to make sure parts of it aren’t cut off at smaller screens. Make sure:
Your desktop layout is OK when resized to 801 pixels wide
Your tablet layout is OK when resized to 501 pixels wide
Your phone layout is OK when resized to 280 pixels wide
Mass.gov will display desktop, phone, or tablet layout based on the size at which the visualization is being embedded on the page.
Under the Content tab, choose the “Add Tableau Visualization” button in the Section Content field. This will open several fields that allow you to control how your visualization looks on the page.
Enter the URL of your Tableau visualization in the Visualization URL field. To get the URL:
In Tableau Public click on share
Copy the link URL
Paste the link URL into a separate document and remove everything after, and including, the “?.” For example: https://public.tableau.com/views/Samplevisualizations/Sample1
Paste the link into the Visualization URL field in the CMS
In the Administrative title, say what your visualization shows. This optional field will only be visible to you and to other authors to help you identify the visualization.
You can also enter a caption that will appear below the visualization in the Caption field. The caption is limited to 500 words. The caption is optional, but it's one of the main ways you can provide a text description of the visualization (including as a text alternative for people using screen readers, who may not be able to access the Tableau visualization). The caption can also be used to:
Elaborate on details about what appears in the Tableau visualization
Cite the source of the data
Provide a link to more information about the data, a glossary, or a web page where visitors can dig deeper into the data
Next, choose the Display size. This controls the size of the visualization on the page, relative to the size of the screen. In other words, the actual size will vary based on the size of the screen the page is being viewed on. The options are:
Small: Up to 400 pixels wide, phone layout
Medium: Up to 600 pixels wide, phone and tablet layout
Large: Up to 850 pixels wide, all 3 layouts
X-Large: Up to 1,200 pixels wide, all 3 layouts. Always uses the full width of the page.
Alignment lets you choose whether the visualization is aligned to the left or right side of the page.
If you want to wrap text around the visualization, check the box in the Wrapping field, then click on the “Add rich text” button, and enter the text you want to wrap around the data visualization. The text will only wrap if there is room, so it’s best to choose a Large or smaller Display size.