css.php

Setup & Install (0)

Getting Started

Data Visualization and Design | CUNY Graduate Center

Summer 2019

This tutorial will guide you through downloading everything you need for this class, embedding your Tableau Visualizations into your Site and Customizing your Site.

Goals

By the end of this tutorial, you will be able to: – Make a site on the CUNY Academic Commons – Make a simple visualization in Tableau – Embed a Tableau visualization on your site

Data

UN Population Estimates 1950-2015

Steps

Part I

Download Tableau

  1. Go to Tableau Public
  2. Click download the app
  3. Install the app on your computer

Register for Tableau Public

  1. Go to Tableau Public
  2. Make an account

Register on the CUNY Academic Commons

  1. Navigate to: https://commons.gc.cuny.edu/sites/
  2. Register a profile if you have not done so already
  3. Select ‘Create A Site’
  4. Select ‘Create A Site’ again
  5. Name your site whatever you wish and fill in the requisite information
    1. You cannot change the site domain later
    2. You can change the site title later
  6. Select the Default Template (you can and will change this)
  7. Select ‘Create Site’

Your site will be pre-populated with a Sample Page and a Sample Blog Post.

That’s it! You’re ready to move on to Part 2!

Part II

SUMMER SESSIONS ONLY You may skip this section and use one of the pre-built visualizations at the bottom of the DataSource Page. Scroll down to RESUME HERE

In this section, we will make a simple line chart.

Question: How has world population changed from 1950-2015?

  1. Launch Tableau
  2. You should see a blue panel on the left titled Connect
  3. Click on Microsoft Excel, and find the UN Populations Estimates Dataset
  4. Drag the Population Estimates UN sheet into the center space titled Drag Sheets Here
  5. Click Sheet 1 in the bottom left corner
  6. A blank screen will appear where you can create your first visualization.

SAVE YOUR PROJECT

The variables in you dataset have been split up into Dimensions (categorical variables) and Measures (numerical variables).

First start with the basic shape 1. Drag the Year pill to Columns 2. Drag the Population pill to Rows. Notice the Population changed to ‘SUM’ meaning that it is now the SUM of the Population across all variables for each year.

New Question: How has population changed in different regions from 1950-2015?

  1. Drag Region to Color

New Question: How has population changed in different regions from 1985-2015? 4. Click the dropdown menu that appears when you hover of the Year data pill 5. Select Show Filter 6. Adjust the Year Filter from 1980 to 2015

SAVE YOUR PROJECT

Add a Title and Citation

  1. Double click on Sheet 1 and title your sheet Population by Region 1985-2015
  2. Add a caption to the bottom with the data source. UN Population Estimates by Country 1950-2015

SAVE YOUR PROJECT

SUMMER SESSION RESUME HERE

Publish your visualization to Tableau Public 9. Click on the ‘Share’ icon at the top right of the page 10. Save your visualization to Tableau Public. 11. Navigate to your Tableau Public Account & Find your visualization 12. Select the ‘Share’ icon near the bottom of the page. 13. Copy the url (NOT the embed code) The Academic Commons (AC) has a special embed code that handles Tableau visualizations

You’ve made your first visualization and are ready to move on to Part 3!!

Part III

In this section, you will upload your visualization to the CUNY Academic Commons

  1. Navigate back to the Commons and your website
  2. Open the Dashboard
  3. Select Pages >> Add New
  4. Title your page – whatever you like, maybe ‘First Visualization’ or ‘Population by Region’.
  5. You can use the Block editor if you prefer or go directly into the Classic/Text editor

BLOCK EDITOR 1. Make a text Block to write your description in 2. Add an HTML Block under the Text Block 3. Use this code: YOUR_TABLEAU_URL

TEXT EDITOR 1. Use the 3 dots menu to ‘Switch to Classic Editor’ 2. Select the ‘Text’ Tab 3. Write your description at the top of the page 4. Embed your Visualization by putting the link to YOUR_TABLEAU_URL on its own line.

RESUME EVERYONE You are welcome to make your site as elaborate or as simple as you wish. Most of the Customization comes from the ‘Appearances’ options. You can use any Theme (the course website uses Attitude because it is clean and has all the necessary elements by default.)

Your blog must have a few key elements: * A home page or landing page that introduces and orients your audience * A menu where a user can link to any of your posts. This can be hierarchical or not. * Both text and visuals. The text will explain your visualization, what you did and how you got there. The visuals will be your interactive Tableau visualizations * Your name * Everything on your site should have a purpose (i.e., don’t add a calendar unless you need a calendar)

WHERE DO I: Customize the Tag Line, Title, etc. from Appearance >> Customize Change the Menu in Appearance >> Menu (you can make child links here, too with the drag and drop ordering interface) Change the Privacy Settings in Settings >> Reading & Settings >> Writing Change the font size Appearance >> Customize >> Custom CSS >> p {font-size: 125%}

A few tips: Pages are typically thought of as static whereas posts are typically thought of as regularly updated. It doesn’t matter which you choose just remain consistent and be sure they display in your menu. Don’t spend too much time customizing your site, it’s easy to get lost in the options. You can always come back after the class is over to edit and tweak the features of your site. For now, you need a place to display your work.


Tutorial written by Michelle McSweeney, PhD for Introduction to Data Visualization, a course in the M.A. in Digital Humanities at the Graduate Center at CUNY. More information about the program is available here.

Need help with the Commons? Visit our
help page
Send us a message
Skip to toolbar