{"id":194,"date":"2017-02-07T22:00:38","date_gmt":"2017-02-08T06:00:38","guid":{"rendered":"http:\/\/courses.haigarmen.com\/intd319\/?p=194"},"modified":"2017-02-09T10:11:21","modified_gmt":"2017-02-09T18:11:21","slug":"graphical-analysis-exploration","status":"publish","type":"post","link":"https:\/\/courses.haigarmen.com\/intd319\/graphical-analysis-exploration\/","title":{"rendered":"Graphical Analysis &#038; Exploration"},"content":{"rendered":"<h3>Introducing Tableau Public<\/h3>\n<p>In this tutorial\u00a0we will work with <a href=\"http:\/\/www.tableausoftware.com\/public\/\"><strong>Tableau Public<\/strong><\/a>, which allows you to create a wide variety of interactive charts, maps and tables and organize them into <strong>dashboards<\/strong> and <strong>stories<\/strong> that can be saved to the cloud and embedded on the web.<\/p>\n<p>The free Public version of the software requires you to save your visualizations to the open web. If you have sensitive data that needs to be kept within your organization, you will need a license for the <a href=\"http:\/\/www.tableau.com\/products\">Desktop<\/a> version of the software.<\/p>\n<p>Tableau was developed for exploratory graphical data analysis, so it is a good tool for exploring a new dataset \u2014 filtering, sorting and summarizing\/aggregating the data in different ways while experimenting with various chart types.<\/p>\n<p>Although Tableau was not designed as a publication tool, the ability to embed finished dashboards and stories has also allowed newsrooms and individual journalists lacking JavaScript coding expertise to create interactive online graphics.<\/p>\n<h3 id=\"the-data-we-will-use-today\">The data we will use today<\/h3>\n<p>Download the data for this session from <a href=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/data2.zip\">here<\/a>, unzip the folder and place it on your desktop. It contains the following file:<\/p>\n<ul>\n<li><code>nations.csv<\/code> Data from the <a href=\"http:\/\/data.worldbank.org\/indicator\/all\">World Bank Indicators<\/a> portal, which is an incredibly rich resource. Contains the following fields:\n<ul>\n<li><code>iso2c<\/code> <code>iso3c<\/code> Two- and Three-letter <a href=\"http:\/\/www.nationsonline.org\/oneworld\/country_code_list.htm\">codes<\/a> for each country, assigned by the <a href=\"http:\/\/www.iso.org\/iso\/home\/store\/catalogue_tc\/catalogue_detail.htm?csnumber=63545\">International Organization for Standardization<\/a>.<\/li>\n<li><code>country<\/code> Country name.<\/li>\n<li><code>year<\/code><\/li>\n<li><code>population<\/code> Estimated <a href=\"http:\/\/data.worldbank.org\/indicator\/SP.POP.TOTL\">total population<\/a> at mid-year, including all residents apart from refugees.<\/li>\n<li><code>gdp_percap<\/code> <a href=\"http:\/\/data.worldbank.org\/indicator\/NY.GDP.PCAP.PP.CD\">Gross Domestic Product per capita<\/a> in current international dollars, corrected for purchasing power in different territories.<\/li>\n<li><code>life_expect<\/code> <a href=\"http:\/\/data.worldbank.org\/indicator\/SP.DYN.LE00.IN\">Life expectancy at birth<\/a>, in years.<\/li>\n<li><code>population<\/code> Estimated <a href=\"http:\/\/data.worldbank.org\/indicator\/SP.POP.TOTL\">total population<\/a> at mid-year, including all residents apart from refugees.<\/li>\n<li><code>birth_rate<\/code> <a href=\"http:\/\/data.worldbank.org\/indicator\/SP.DYN.CBRT.IN\">Live births during the year per 1,000 people<\/a>, based on mid-year population estimate.<\/li>\n<li><code>neonat_mortal_rate<\/code> <a href=\"http:\/\/data.worldbank.org\/indicator\/SH.DYN.NMRT\">Neonatal mortality rate<\/a>: babies dying before reaching 28 days of age, per 1,000 live births in a given year.<\/li>\n<li><code>region<\/code> <code>income<\/code> World Bank <a href=\"http:\/\/siteresources.worldbank.org\/DATASTATISTICS\/Resources\/CLASS.XLS\">regions and income groups<\/a>, explained <a href=\"http:\/\/data.worldbank.org\/about\/country-and-lending-groups\">here<\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3 id=\"visualize-the-data-on-neonatal-mortality\">Visualize the data on neonatal mortality<\/h3>\n<h4 id=\"connect-to-the-data\">Connect to the data<\/h4>\n<p>Launch Tableau Public, and you should see the following screen:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_1.jpg\" alt=\"\" \/><\/p>\n<p>Under the <code>Connect<\/code> heading at top left, select <code>Text File<\/code>, navigate to the file <code>nations.csv<\/code> and <code>Open<\/code>. At this point, you can view the data, which will be labeled as follows:<\/p>\n<ul>\n<li>Text: <code>Abc<\/code><\/li>\n<li>Numbers: <code>#<\/code><\/li>\n<li>Dates: calendar symbol<\/li>\n<li>Geography: globe symbol<\/li>\n<\/ul>\n<p>You can edit fields to give them the correct data type if there are any problems:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_2.jpg\" alt=\"\" \/><\/p>\n<p>Once the data has loaded, click <code>Sheet 1<\/code> at bottom left and you should see a screen like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_3.jpg\" alt=\"\" \/><\/p>\n<h4 id=\"dimensions-and-measures:-categorical-and-continuous\"><a href=\"http:\/\/paldhous.github.io\/ucb\/2016\/dataviz\/week3.html#dimensions-and-measures:-categorical-and-continuous\" name=\"dimensions-and-measures:-categorical-and-continuous\"><\/a>Dimensions and measures: categorical and continuous<\/h4>\n<p>The fields should appear in the <code>Data<\/code> panel at left. Notice that Tableau has divided the fields into <code>Dimensions<\/code>and <code>Measures<\/code>. These broadly correspond to categorical and continuous variables. Dimensions are fields containing text or dates, while measures contain numbers.<\/p>\n<p>If any field appears in the wrong place, click the small downward-pointing triangle that appears when it is highlighted and select <code>Convert to Dimension<\/code> or <code>Convert to Measure<\/code> as required.<\/p>\n<h4 id=\"shelves-and-show-me\">Shelves and Show Me<\/h4>\n<p>Notice that the main panel contains a series of \u201cshelves,\u201d called <code>Pages,<\/code> <code>Columns<\/code>, <code>Rows<\/code>, <code>Filters<\/code> and so on. Tableau charts and maps are made by dragging and dropping fields from the data into these shelves.<\/p>\n<p>Over to the right you should see the <code>Show Me<\/code> panel, which will highlight chart types you can make from the data currently loaded into the <code>Columns<\/code> and <code>Rows<\/code> shelves. It is your go-to resource when experimenting with different visualization possibilities. You can open and close this panel by clicking on its title bar.<\/p>\n<h4 id=\"columns-and-rows:-x-and-y-axes\">Columns and rows: X and Y axes<\/h4>\n<p>The starting point for creating any chart or map in Tableau is to place fields into <code>Columns<\/code> and <code>Rows<\/code>, which for most charts correspond to the X and Y axes, respectively. When making maps, longitude goes in <code>Columns<\/code> and latitude in <code>Rows<\/code>. If you display the data as a table, then these labels are self-explanatory.<\/p>\n<h4 id=\"some-questions-to-ask-this-data\">Some questions to ask this data<\/h4>\n<ul>\n<li>How has the total number of neonatal deaths changed over time, globally, regionally and nationally?<\/li>\n<li>How has the neonatal death rate for each country changed over time?<\/li>\n<\/ul>\n<h4 id=\"create-new-calculated-variables\">Create new calculated variables<\/h4>\n<p>The data contains fields on birth and neonatal death rates, but not the total numbers of births and deaths, which must be calculated. From the top menu, select <code>Analysis&gt;Create Calculated Field<\/code>. Fill in the dialog box as follows (just start typing a field name to select it for use in a formula):<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_4.jpg\" alt=\"\" \/><\/p>\n<p>Notice that calculated fields appear in the <code>Data<\/code> panel preceded by an <code>=<\/code> symbol.<\/p>\n<p>Now create a second calculated field giving the total number of neonatal deaths:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_5.jpg\" alt=\"\" \/><\/p>\n<p>In the second formula, we have rounded the number of neonatal deaths to the nearest thousand using <code>-3<\/code>(<code>-2<\/code> would round to the nearest hundred, <code>-1<\/code> to the nearest ten, <code>1<\/code> to one decimal place, <code>2<\/code> to two decimal places, and so on.)<\/p>\n<p>Here we have simply run some simple arithmetic, but it\u2019s possible to use a wide variety of functions to manipulate data in Tableau in many ways. To see all of the available functions, click on the little grey triangle at the right of the dialog boxes above.<\/p>\n<h4>Understand that Tableau\u2019s default behaviour is to summarize\/aggregate data<\/h4>\n<p>As we work through today\u2019s exercise, notice that Tableau routinely summarizes or aggregates measures that are dropped into <code>Columns<\/code> and <code>Rows<\/code>, calculating a <code>SUM<\/code> or <code>AVG<\/code> (average or mean), for example.<\/p>\n<p>This behaviour <em>can<\/em> be turned off by selecting <code>Analysis<\/code> from the top menu and unchecking <code>Aggregate Measures<\/code>. However, I do not recommend doing this, as it will disable some Tableau functions. Instead, if you don\u2019t want to summarize <em>all<\/em> of the data, drop categorical variables into the <code>Detail<\/code> shelf so that any summary statistic will be calculated at the correct level for your analysis. If necessary, you can set the aggregation so it is being performed on a single data point, and therefore has no effect.<\/p>\n<h4>Make a series of treemaps showing neonatal deaths over time<\/h4>\n<p>A treemap allows us to directly compare the neonatal deaths in each country, nested by region.<\/p>\n<p>Drag <code>Country<\/code> and <code>Region<\/code> onto <code>Columns<\/code> and <code>Neonatal deaths<\/code> onto <code>Rows<\/code>. Then open <code>Show Me<\/code> and select the <code>treemap<\/code> option. The initial chart should look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_6.jpg\" alt=\"\" \/><\/p>\n<p>Look at the <code>Marks<\/code> shelf and see that the size and color of the rectangles reflect the <code>SUM<\/code> of <code>Neonatal deaths<\/code>for each country, while each rectangle is labeled with <code>Region<\/code> and <code>Country<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_6a.jpg\" alt=\"\" \/><\/p>\n<p>Now drag <code>Region<\/code> to <code>Color<\/code> to remove it from the <code>Label<\/code> and colour the rectangles by region, using Tableau\u2019s default qualitative colour scheme for categorical data:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_7.jpg\" alt=\"\" \/><\/p>\n<p>For a more subtle color scheme, click on <code>Color<\/code>, select <code>Edit Colors...<\/code> and at the dialog box select the <code>Tableau Classic Medium<\/code> qualitative color scheme, then click <code>Assign Palette<\/code> and <code>OK<\/code>.<\/p>\n<p>(Tableau\u2019s qualitative color schemes are well designed, so there is no need to adopt a ColorBrewer scheme. However, it is possible to edit colors individually as you wish.)<\/p>\n<p>Click on <code>Color<\/code> and set transparency to 75%. (For your assignment you will create a chart with overlapping circles, which will benefit from using some transparency to allow all circles to be seen. So we are setting transparency now for consistency.)<\/p>\n<p>The treemap should now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_8.jpg\" alt=\"\" \/><\/p>\n<p>Tableau has by default aggregated <code>Neonatal deaths<\/code> using the <code>SUM<\/code> function, so what we are seeing is the number for each country added up across the years.<\/p>\n<p>To see one year at a time, we need to filter by year. If you drag the existing <code>Year<\/code> variable to the <code>Filters<\/code>shelf, you will get the option to filter by a range of numbers, which isn\u2019t what we need:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_9.jpg\" alt=\"\" \/><\/p>\n<p>Instead, we need to be able check individual years, and draw a treemap for each one. To do that, select <code>Year<\/code>in the <code>Dimensions<\/code> panel and <code>Duplicate<\/code>.<\/p>\n<p>Select the new variable and <code>Convert to Discrete<\/code> and then <code>Rename<\/code> it <code>Year (discrete)<\/code>. Now drag this new variable to <code>Filters<\/code>, select 2014, and click <code>OK<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_10.jpg\" alt=\"\" \/><\/p>\n<p>The treemap now displays the data for 2014:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_11.jpg\" alt=\"\" \/><\/p>\n<p>That\u2019s good for a snapshot of the data, but with a little tinkering, we can adapt this visualization to show change in the number of neonatal deaths over time at the national, regional and global levels.<\/p>\n<p>Select <code>Year (discrete)<\/code> in the <code>Filters<\/code> shelf and <code>Filter ...<\/code> to edit the filter. Select all the years with even numbers and click <code>OK<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_12.jpg\" alt=\"\" \/><\/p>\n<p>Now drag <code>Year (discrete)<\/code> onto <code>Rows<\/code> and the chart should look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_13.jpg\" alt=\"\" \/><\/p>\n<p>The formatting needs work, but notice that we now have a bar chart made out of treemaps.<\/p>\n<p>Extend the chart area to the right by changing from <code>Standard<\/code> to <code>Entire View<\/code> on the dropdown menu in the top ribbon:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_14.jpg\" alt=\"\" \/><\/p>\n<p>I find it more intuitive to have the most recent year at the top, so select <code>Year (discrete)<\/code> in the <code>Rows<\/code> shelf, select <code>Sort<\/code> and fill in the dialog box so that the years are sorted in <code>Descending<\/code> order:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_15.jpg\" alt=\"\" \/><\/p>\n<p>The chart should now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_16.jpg\" alt=\"\" \/><\/p>\n<p>We will create a map to serve as a legend for the regions, so click on the title bar for the color legend and select <code>Hide Card<\/code> to remove it from the visualization.<\/p>\n<p>To remove some clutter from the chart, select <code>Format&gt;Borders<\/code> from the top menu, and under <code>Sheet&gt;Row Divider<\/code>, set <code>Pane<\/code> to <code>None<\/code>. Then close the <code>Format Borders<\/code> panel.<\/p>\n<p>Right-click on the <code>Sheet 1<\/code> title for the chart and select <code>Hide Title<\/code>. Also right-click on <code>Year (discrete)<\/code> at the top left of the chart and select <code>Hide Field Labels for Rows<\/code>. Then hover just above the top bar to get a double-arrowed drag symbol and drag upwards to reduce the white space at the top. You may also want to drag the bars a little closer to the year labels.<\/p>\n<p>The labels will only appear in the larger rectangles. Rather than removing them entirely, let\u2019s just leave a label for India in 2014, to make it clear that this is the country with by far the largest number of neonatal deaths. Click on <code>Label<\/code> in the Marks shelf, and switch from <code>All<\/code> to <code>Selected<\/code> under <code>Marks to Label<\/code>. Then right-click on the rectangle for India in 2014, and select <code>Mark Label&gt;Always Show<\/code>. The chart should now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_17.jpg\" alt=\"\" \/><\/p>\n<p>Hover over one of the rectangles, and notice the tooltip that appears. By default, all the fields we have used to make the visualization appear in the tooltip. (If you need any more, just drag those fields onto <code>Tooltip<\/code>.) Click on <code>Tooltip<\/code> and edit as follows. (Unchecking <code>Include command buttons<\/code> disables some interactivity, giving a plain tooltip):<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_18.jpg\" alt=\"\" \/><\/p>\n<h4>Save to the web<\/h4>\n<p>Right-click on <code>Sheet 1<\/code> at bottom left and <code>Rename Sheet<\/code> to <code>Treemap bar chart<\/code>. Then select <code>File&gt;Save to Tableau Public...<\/code> from the top menu. At the logon dialog box enter your Tableau Public account details, give the Workbook a suitable name and click <code>Save<\/code>. When the save is complete, a view of the visualization on Tableau\u2019s servers will open in your default browser.<\/p>\n<h4>Make a map to use as a colour legend<\/h4>\n<p>Select <code>Worksheet&gt;New Worksheet<\/code> from the top menu, and double-click on <code>Country<\/code>. Tableau recognizes the names of countries and states\/provinces; for the U.S., it also recognizes counties. Its default map-making behaviour is to put a circle at the geographic centre, or centroid, of each area, which can be scaled and coloured to reflect values from the data:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_19.jpg\" alt=\"\" \/><\/p>\n<p>However, we need each country to be filled with colour by region. In the\u00a0<code>Show Me tab<\/code>, switch to the <code>filled maps<\/code>option, and each nation should fill with colour. Drag <code>Region<\/code> to <code>Colour<\/code> and see how the same colour scheme we used previously carries over to the map. Click on <code>Colour<\/code>, set the transparency to 75% to match the bubble chart and remove the borders. Also click on <code>Tooltip<\/code> and uncheck <code>Show tooltip<\/code> so that no tooltip appears on the legend.<\/p>\n<p>We will use this map as a colour legend, so its separate colour legend is unnecessary. Click the colour legend\u2019s title bar and select <code>Hide Card<\/code> to remove it from the visualization. Also remove the <code>Sheet 2<\/code> title as before.<\/p>\n<p>Centre the map in the view by clicking on it, holding and panning, just as you would on Google Maps. It should now look something like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_20.jpg\" alt=\"\" \/><\/p>\n<p>Rename the worksheet <code>Map legend<\/code> and save to the web again.<\/p>\n<h4>Make a line chart showing neonatal mortality rate by country over time<\/h4>\n<p>To address our second question, and explore the neonatal death rate over time by country, we can use a line chart.<\/p>\n<p>First, rename <code>Neonat Mortal<\/code> as <code>Neonatal death rate (per 1,000 births)<\/code>. Then, open a new worksheet, drag this variable to <code>Rows<\/code> and <code>Year<\/code> to <code>Columns<\/code>. The chart should now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_21.jpg\" alt=\"\" \/><\/p>\n<p>Tableau has aggregated the data by adding up the rates for each country in every year, which makes no sense here. So drag <code>Country<\/code> to <code>Detail<\/code> in the <code>Marks<\/code> shelf to draw one line per country:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_22.jpg\" alt=\"\" \/><\/p>\n<p>Drag region to <code>Colour<\/code> and set the transparency to 75%.<\/p>\n<p>Now right-click on the X axis, select <code>Edit Axis<\/code>, edit the dialog box as follows and click <code>OK<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_23.jpg\" alt=\"\" \/><\/p>\n<p>Right-click on the X axis again, select <code>Format<\/code>, change <code>Alignment\/Default\/Header\/Direction<\/code>\u00a0to <code>Up<\/code> and use the dropdown menu set the <code>Font<\/code> to bold. Also remove the <code>Sheet 3<\/code> title.<\/p>\n<p>The chart should now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_24.jpg\" alt=\"\" \/><\/p>\n<p>We can also highlight the countries with the highest total number of neonatal deaths by dragging <code>Neonatal deaths<\/code> to <code>Size<\/code>. The chart should now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_25.jpg\" alt=\"\" \/><\/p>\n<p>This line chart shows that the trend in most countries has been to reduce neonatal deaths, while some countries have had more complex trajectories. But to make comparisons between individual countries, it will be necessary to add controls to filter the chart.<\/p>\n<p>Tableau\u2019s default behaviour when data is filtered is to redraw charts to reflect the values in the filtered data. So if we want the Y axis and the line thicknesses to stay the same when the chart is filtered, we need to freeze them.<\/p>\n<p>To freeze the line thicknesses, hover over the title bar for the line thickness legend, select <code>Edit Sizes...<\/code> and fill in the dialog box as follows:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_26.jpg\" alt=\"\" \/><\/p>\n<p>Now remove this legend from the visualization, together with the colour legend. We can later add an annotation to our dashboard to explain the line thickness.<\/p>\n<p>To freeze the Y axis, right-click on it, select <code>Edit Axis...<\/code>, make it <code>Fixed<\/code> and click <code>OK<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_27.jpg\" alt=\"\" \/><\/p>\n<p>Right-click on the Y axis again, select <code>Format...<\/code> and increase the font size to <code>10pt<\/code> to make it easier to read.<\/p>\n<p>Now drag <code>Country<\/code> to <code>Filters<\/code>, make sure <code>All<\/code> are checked, and at the dialog box, click <code>OK<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_28.jpg\" alt=\"\" \/><\/p>\n<p>Now we need to add a filter control to select countries to compare. On <code>Country<\/code> in the <code>Filters<\/code> shelf, select <code>Show Filter<\/code>. A default filter control, with a checkbox for each nation, will appear to the right of the chart:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_29.jpg\" alt=\"\" \/><\/p>\n<p>This isn\u2019t the best filter control for this visualization. To change it, click on the title bar for the filter, note the range of filter controls available, and select <code>Multiple Values (Custom List)<\/code>. This allows users to select individual countries by starting to type their names. Then select <code>Edit Title...<\/code> and add some text explaining how the filter works:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_30.jpg\" alt=\"\" \/><\/p>\n<p>Take some time to explore how this filter works.<\/p>\n<p>Rename <code>Income<\/code> to <code>Income group<\/code>. Then add <code>Region<\/code> and <code>Income group<\/code> to <code>Filters<\/code>, making sure that <code>All<\/code> options are checked for each. Select <code>Show Filter<\/code> for both of these filters, and select <code>Single Value Dropdown<\/code> for the control. Reset both of these filters to <code>All<\/code>, and the chart should now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_31.jpg\" alt=\"\" \/><\/p>\n<p>Notice that the <code>Income group<\/code> filter lists the options in alphabetical order, rather than income order, which would make more sense. To fix this, right-click on <code>Income group<\/code> in the data panel and select <code>Default Properties&gt;Sort<\/code>. At the dialog box below, select <code>Manual<\/code> sort, edit the order as follows and click <code>OK<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_32.jpg\" alt=\"\" \/><\/p>\n<p>The chart should now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_33.jpg\" alt=\"\" \/><\/p>\n<p>Finally, click on <code>Tooltip<\/code> and edit as follows:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_34.jpg\" alt=\"\" \/><\/p>\n<p>Rename the sheet <code>Line chart<\/code> and save to the web.<\/p>\n<h4>Make a dashboard combining both charts<\/h4>\n<p>From the top menu, select <code>Dashboard&gt;New Dashboard<\/code>. Set its <code>Size<\/code> to <code>Automatic<\/code>, so that the dashboard will fill to the size of any screen on which it is displayed:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_35.jpg\" alt=\"\" \/><\/p>\n<p>To make a dashboard, drag charts, and other elements from the left-hand panel to the dashboard area. Notice that Tableau allows you to add items including: horizontal and vertical containers, text boxes, images (useful for adding a publication\u2019s logo), embedded web pages and blank space. These can be added <code>Tiled<\/code>, which means they cannot overlap, or <code>Floating<\/code>, which allows one element to be placed over another.<\/p>\n<p>Drag <code>Treemap bar chart<\/code> from the panel at left to the main panel. The default title, from the worksheet name, isn\u2019t very informative, so right-click on that, select <code>Edit Title ...<\/code> and change to <code>Total deaths<\/code>.<\/p>\n<p>Now add <code>Line Chart<\/code> to the right of the dashboard (the gray area will show where it will appear) and edit its title to <code>Death rates<\/code>. Also add a note to explain that line widths are proportional to the total number of deaths. The dashboard should now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_36.jpg\" alt=\"\" \/><\/p>\n<p>Notice that the <code>Country<\/code>, <code>Region<\/code> and <code>Income group<\/code> filters control only the line chart. To make them control the treemaps, too, click on each filter, open up the dropdown menu form the downward-pointing triangle, and select <code>Apply to Worksheets&gt;Selected Worksheets...<\/code> and fill in the dialog box as follows:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_37.jpg\" alt=\"\" \/><\/p>\n<p>The filters will now control both charts.<\/p>\n<p>Add <code>Map legend<\/code> for a color legend at bottom right. (You will probably need to drag the window for the last filter down to push it into position.) Hide the legend\u2019s title then right-click on the map and select <code>Hide View Toolbar<\/code>to remove the map controls.<\/p>\n<p>We can also allow the highlighting of a country on one chart to be carried across the entire dashboard. Select <code>Dashboard&gt;Actions...<\/code> from the top menu, and at the first dialog box select <code>Add action&gt;Highlight<\/code>. Filling the second dialog box as follows will cause each country to be highlighted across the dashboard when it is clicked on just one of the charts:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_38.jpg\" alt=\"\" \/><\/p>\n<p>Click <code>OK<\/code> on both dialog boxes to apply this action.<\/p>\n<p>Select <code>Dashboard&gt;Show Title<\/code> from the top menu. Right-click on it, select <code>Edit Title...<\/code> and change from the default to something more informative:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_39.jpg\" alt=\"\" \/><\/p>\n<p>Now drag a <code>Text<\/code> box to the bottom of the dashboard and add a footnote giving source information:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_40.jpg\" alt=\"\" \/><\/p>\n<p>The dashboard should now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_41.jpg\" alt=\"\" \/><\/p>\n<h4>Design for different devices<\/h4>\n<p>This dashboard works on a large screen, but not on a small phone. To see this, click the <code>Device Preview<\/code>button at top left and select <code>Phone<\/code> under <code>Device type<\/code>. In portrait orientation, this layout does not work at all:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_42.jpg\" alt=\"\" \/><\/p>\n<p>Click the <code>Add Phone Layout<\/code> at top right, and then click <code>Custom<\/code> tab under <code>Layout - Phone<\/code> in the left-hand panel. You can then rearrange and if necessary remove elements for different devices. Here I have removed the line chart and filter controls, and changed the legend to a <code>Floating<\/code> element so that it sits in the blank space to the top right of the bar chart of treemaps.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_43.jpg\" alt=\"\" \/><\/p>\n<p>Now save to the web once more. Once the dashboard is online, use the <code>Share<\/code> link at the bottom to obtain an embed code, which can be inserted into the HTML of any web page.<\/p>\n<p>(You can also <code>Download<\/code> a static view of the graphic as a PNG image or a PDF.)<\/p>\n<p>You can download the workbook for any Tableau visualization by clicking the <code>Download Workbook<\/code> link. The files (which will have the extension <code>.twbx<\/code>) will open in Tableau Public.<\/p>\n<p>Having saved a Tableau visualization to the web, you can reopen it by selecting <code>File&gt;Open from Tableau Public...<\/code> from the top menu.<\/p>\n<h4>Another approach to responsive design<\/h4>\n<p>As an alternative to using Tableau\u2019s built-in device options, you may wish to create three different dashboards, each with a size appropriate for phones, tablets, and desktops respectively. You can then follow the instructions <a href=\"https:\/\/public.tableau.com\/s\/blog\/2014\/11\/making-responsive-tableau-dashboards\">here<\/a> to put the embed codes for each of these dashboards into a <code>div<\/code> with a separate class, and then use <code>@media<\/code> CSS rules to ensure that only the div with the correct dashboard displays, depending on the size of the device.<\/p>\n<p>If you need to make a fully responsive Tableau visualization and are struggling, contact me for help!<\/p>\n<p>When making responsively designed web pages, make sure to include this line of code between the <code>&lt;head&gt;&lt;\/head&gt;<\/code> tags of your HTML:<\/p>\n<pre class=\"css hljs\"><code class=\"CSS\" style=\"box-sizing: border-box; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 0.9em; border-radius: 3px; word-wrap: break-word; border: 0px; padding: 0px 5px; margin: 0px; display: block; font-weight: bold; white-space: pre;\" data-origin=\"&lt;pre&gt;&lt;code class=&quot;CSS&quot;&gt;&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt; &lt;\/code&gt;&lt;\/pre&gt;\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n<\/code><\/pre>\n<h4>From dashboards to stories<\/h4>\n<p>Tableau also allows you to create stories, which combine successive dashboards into a step-by-step narrative. Select <code>Story&gt;New Story<\/code> from the top menu. Having already made a dashboard, you should find these simple and intuitive to create. Select <code>New Blank Point<\/code> to add a new scene to the narrative.<\/p>\n<h3>Assignment<\/h3>\n<ul>\n<li>Create <a href=\"https:\/\/public.tableau.com\/views\/class3_5\/Dashboard2?:embed=y&amp;:display_count=yes\">this second dashboard<\/a> from the data.Here are some hints:\n<ul>\n<li>Drop <code>Year<\/code> into the <code>Pages<\/code> shelf to create the control to cycle through the years.<\/li>\n<li>You will need to change the <code>Marks<\/code> to solid circles and scale them by the total number of neonatal deaths. Having done so, you will also need to increase the size of all circles so countries with small numbers of neonatal deaths are visible. Good news: Tableau\u2019s default behavior is to size circles correctly by area, so they will be the correct sizes, relative to one another.<\/li>\n<li>You will need to switch to a <code>Logarithmic<\/code> X axis and alter\/fix its range.<\/li>\n<li>Format GDP per capita in dollars by clicking on it in the <code>Data<\/code> panel and selecting <code>Default Properties&gt;Number Format&gt;Currency (Custom)<\/code>.<\/li>\n<li>Create a single trend line for each year\u2019s data, so that the line shifts with the circles from year to year. Do this by dragging <code>Trend line<\/code> into the chart area from the <code>Analytics<\/code> panel. You will then need to select <code>Analysis&gt;Trend Lines&gt;Edit Trend Lines...<\/code> and adjust the options to give a single line with the correct behavior.<\/li>\n<li>Getting the smaller circles rendered on top of the larger ones, so their tooltips can be accessed, is tricky. To solve this, open the dropdown menu for <code>Country<\/code> in the <code>Marks<\/code> shelf, select <code>Sort<\/code> and fill in the dialog box as follows:<img decoding=\"async\" src=\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class3_44.jpg\" alt=\"\" \/>Now drag <code>Country<\/code> so it appears at the top of the list of fields in the <code>Marks<\/code> shelf.<\/li>\n<\/ul>\n<p>This should be a challenging exercise that will help you learn how Tableau works. If you get stuck, download my visualization and study how it is put together.<\/li>\n<li>By next week\u2019s class, send me the url for your second dashboard. (Don\u2019t worry about designing for different devices.)<\/li>\n<\/ul>\n<h3>Further reading\/viewing<\/h3>\n<p><a href=\"http:\/\/www.tableausoftware.com\/public\/training\">Tableau Public training videos<\/a><\/p>\n<p><a href=\"http:\/\/www.tableausoftware.com\/public\/gallery\/all\">Gallery of Tableau Public visualizations<\/a>: Again, you can download the workbooks to see how they were put together.<\/p>\n<p><a href=\"http:\/\/kb.tableau.com\/\">Tableau Public Knowledge Base<\/a>: Useful resource with the answers to many queries about how to use the software.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducing Tableau Public In this tutorial\u00a0we will work with Tableau Public, which allows you to create a wide variety of interactive charts, maps and tables and organize them into dashboards and stories that can be saved to the cloud and embedded on the web. The free Public version of the software requires you to save [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-194","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/posts\/194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/comments?post=194"}],"version-history":[{"count":9,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/posts\/194\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/posts\/194\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/media?parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/categories?post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/tags?post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}