Category: DataViz Assignments

Assignment 4: Using Highcharts

This assignment is designed to make you comfortable with modifying data in open source code, then publishing it to a web site. We will go through part of the assignment in class today. The rest of the assignment is due next Tuesday night at midnight.

Note that there are two deliverables for the assignment. The first is to embed the chart in this exercise into the class blog, which you can do today. The second is to create a chart with original data for a story you want to tell with a chart, FTP all of the required code to the site and embed your chart and story in the class blog.

Get Set Up

We will be using the Chrome browser for this exercise, not Firefox. Before we get started, go to http://jsfiddle.net. Create a free account, or log in if you already have one. Keep the browser open after you have logged in.

Review chart types

Highcharts is a Javascript, HTML5 and Jquery library that has pre-canned charts that you can easily modify and publishing into your stories. You simply upload the Javascript libraries on your server (that has been done for you already in this exercise), then modify some code for the chart type you want, and finally embed it into a site where your story lives.

You can view all of the chart types that are possible here:
http://www.highcharts.com/demo

 In this exercise, we will use the “Area-spline” chart to show two line graphs on the same axis:
http://www.highcharts.com/demo/areaspline/dark-unica

Play around in JSFiddle

JSFiddle is a free sandbox that makes it easy to modify code and instantly see the results. You will be creating a “fork” (version) of some code I have set up for you. After you modify your version, you can keep messing around with it and even embed the output into a blog.

 1. Go here to see the JSFiddle for this exercise:
http://jsfiddle.net/pachecod/3Y8az/

 2. Making sure you are logged in first, click the “Fork” button at the top. You now have your own fork.

 3. Notice that the JSFiddle screen is divided into four parts. The top is HTML, the bottom Javascript, and the lower right is the output of the HTML and Javascript. (The top right is CSS, but we aren’t using that right now.) In this exercise we will only be modifying the Javascript.

4. Scroll down until you find the sections of code that start with xAxis. Notice the list of months. They only go through July. How do we get a full year’s worth of months into the chart? You need to type them in, being careful to copy exactly the style in the code. Of note: each month is surrounded by single quote marks, and there is a comma after the month. But this is also very important to notice: there is no comma after the very last month.

7. Add August through December, then click Update. Your chart will refresh, but there’s no data for the additional months. Why not? Oh yeah, because you have to add in those numbers!

8. Scroll down until you see “yAxis.” Put in a title for the Y axis, and a name for the units you are displaying. Be sure to include a space before what you put in for units or you will notice an embarassing typo in your chart later.

9. To add numbers for units, scroll down to the “Series” section and put in a title for each series, and numbers for each month in the series.

10. Click update when you are done. Does your chart look like you want it to? Good! If not, keep trying until it looks right.

Embed it

The last step is to embed the chart in a blog post along with a short story that explains the data.

11. Get a URL for the output of your chart. Click the Share button in JSFiddle, then copy the URL in “Share full screen result.” Test that URL in a new tab to make sure the chart appears correctly in a browser.

12. Because we’re embedding into a WordPress site, we will use the iFrame plugin’s short code to embed this chart. Put your URL into the “YOURURLHERE” section in this code snippet:

   <iframe src=”YOURURLHERE” width=”100%” height=”480″></iframe>

13. Go to the class WordPress Admin site at http://journovationsu.org/wp-admin/ and click the Posts > Add New button on the left. Enter a title. Making sure that the “Text” tab in the body area is active (not the Visual tab), paste this code into the box. Click Preview and make sure it apears in the preview. If it does, click Publish, then View to view the public post.

14. If the chart appears, the last step is to go back into the post and write a few paragraphs around the chart explaining to the public what it means.

Now, Go make Another Chart

To complete this assignment, create another chart using data for a story and embed it into a post in the class blog. You should do the following:

  1. Download the High Charts code, which you can get here.
  2. Find an example for a chart you want to make. Open the same Examples folder in the Highcharts codebase you downloaded, edit the index.html file contained in that example folder (not the index at the top of the folder tree), and preview it in a browser (which you can do by dragging the file into an open browser window).
  3. When your chart works the way you like, rename the top of the main folder to any name you choose, and upload the entire folder into the class server. You should be able to locate it in your browser and embed it into a second blog post just like you did in the first exercise.

 

Assignment 5: Vertical Timeline

Assignment 5 is to through Lisa Williams’ Absurdly illustrated Guide to creating a vertical timeline and embed a timeline in the class blog. You can see an example of one in the lecture notes for this class.

If you can’t get the vertical timeline to work, try the KnightLab timeline tool at http://timeline.knightlab.com.

As an incentive to not give up on the vertical timeline, which requires you to mess around with code, I will give 5 points extra credit for anyone who succeeds in posting a vertical timeline!

Due date: Tuesday, Feb. 9 by 9 a.m.

Assignment 4: Create Your Own CartoDB Map

Based on what your learned about CartoDB in the tutorials, go out and collect some data yourself about a story that interests you. Create a new blog post. Write a short story of a few paragraphs at length and include a CartoDB map that illustrates what’s in the story. At the end of your story, you should include links to the data sources (for example, if you got data from the New York State data site, include a link to the dataset you used).

You should publish the map that tells the story around your data the best, but I will be awarding the most points to assignments that incorporate as many of the following as possible as long as the choices are appropriate to the story:

    • Data from more than one source, either in CartoDB’s library or from somewhere else.
    • Data that is imported from outside of CartoDB’s library.
    • Data that is filtered to hide extraneous information, either within CartoDB or before importing by using Excel.
    • Layered data sets.
    • Customized markers and visual effects (e.g. different icons chosen in CartoDB or uploaded).
    • Customized infoboxes, especially if you modify the HTML or CSS.

Due Friday, Feb. 5

Assignment 3: Publish your results from CartoDB Tutorials

Complete these three tutorials and embed the resulting maps in one blog entry labeled Assignment 3. Due Monday, February 1.

1) Creating a simple map of points
http://developers.cartodb.com/tutorials/simple_points_map.html

2) Georeferencing
http://developers.cartodb.com/tutorials/how_to_georeference.html

3) Map Election Results
http://developers.cartodb.com/tutorials/electoral_map.html

Assignment 2: Find a story in data you find online

(Note: you should go through the NYS Data exercise before attempting this assignment.)

Assignment 2: Find some interesting data from the New York State open data site, or some other interesting data set you find online. Use sorting and filtering to hone in on some interesting and easily digestible data points that could be used in a story. Create a graph of the data you find in Infogr.am. Create a blog post that includes a link to the raw data from the NYS site, explain how you filtered it, and embed the Infogr.am chart into the post. Be ready to talk about the story you found in next Tuesday’s class. Due Tuesday morning.

Assignment 1: Data Visualization Class Survey

Please fill out the following survey to help me understand a little more about you, your interests, where you are at and what you hope to learn.

Exercise for Assignment 2: Sorting and Filtering in Excel

Next, we will be doing an exercise around sorting and filtering through data, then interviewing data to find stories. We will start the exercise in class. By Friday you will need to answer some questions in a quiz that will be posted in Blackboard after class ends.

Data Viz – Sorting and Filtering Exercise
Using New York State Cardiac Arrests

New York State has an open-data policy. You can get a lot of data from New York State-funded programs at https://data.ny.gov/.

In this exercise, we will be using data on cardiac surgeries and “percutaneous coronary interventions” (PCI) by hospitals across the state of New York. You can get the data set here: https://health.data.ny.gov/Health/Cardiac-Surgery-and-Percutaneous-Coronary-Interven/jtip-2ccj

Click the Export button and choose Excel, then save to your desktop.

Let’s find the hospitals with the highest observed mortality rate.

  • Go to the Data menu and choose Sort.
  • Make sure the box labeled “My list has headers” is checked!
  • Click in “Sort By” and choose “Observed Mortality Rate.” Under “Order” choose “Largest to Smallest,” then click OK.

Now, let’s use filters to create lists of hospitals by regions.

  • Go to the Data menu and choose Filter. You should see downward-facing arrows above each column header. If you only see an arrow above one column but not all of them, select all of the rows and columns by clicking the icon at the very upper left of the data set, and then choose filter again.
  • Click the arrow in the Region column.
  • Uncheck the box next to “(Select All).”
  • Check “Central NY,” “Western NY-Buffalo” and “Western NY-Rochester.”
  • Close the filter box to see the filtered list. There should be 134 rows.

Now clear the filter by region and selecting the filter arrow in the Region column and click “(Select All.”) Replace the filter with a filtered list of every region except for Central and Western New York.

Finally, clear the filter and select only New York State to get aggregates figures for each region of the state.

Now you should be familiar with sorting and filtering. Let’s summarize some figures from these lists. With the New York State filter applied, get the sum total of total deaths, and total cases across all types of procedures.

  • Click your mouse under Number of Deaths, then click the SUM button in the toolbar.
  • Make sure the selected area goes across all five rows. A number will appear. Write that down.
  • Do the same thing under the Number of Cases column, and write that number down.
  • Finally, to get an aggregate observe mortality rate, divide the total you got in column H by the total in column G. To do this, click in any empty cell, then type the = sign. Without hitting any other key, click once in the total under column H, then type / (for divided by), then once under the total in column G, then Enter.
  • The number you get will be a very long decimal — not exactly easy to remember. Turn it into a percentage by clicking it once, then clicking the % sign in the toolbar.
  • The percentage that appears will be rounded up quite a bit, and we don’t want that. You need to tell Excel to reveal more decimals. Select the percentage you got once, then click the button in the toolbar that adds decimals. Click this button twice to get a percentage that has two numbers after the decimals.
  • Find some trends in the data and create another spreadsheet that has just those numbers: for example, cardiac deaths in Rochester in 2008, 2009, 2010 and 2011.

When you’re ready to complete the assignment, go to Infogr.am and create  a chart with your findings. Be sure to cite the data source in the chart. Paste the URL to that chart into Assignment 2 in Blackboard.