Category: Data Viz

Principles of Data Visualization

“Our limited brains are incapable of grasping reality in all its glorious complexity.”
What you design is never exactly what your audience ends up interpreting so reducing the chances for misinterpretation becomes crucial.

Cleveland McGill Scale

---

---

Important Resources for Surveying the Data Visualization Options

Dataviz Catalog http://www.datavizcatalogue.com/
FT Visual Vocabulary https://github.com/ft-interactive/chart-doctor/blob/master/visual-vocabulary/Visual-vocabulary.pdf

For the weekly memo: Select two examples from the Dataviz Catalog and FT Visual Vocabulary that you find interesting or useful. Include a screenshot of the chart in your memo and describe how it could apply for our project.

---

Graphics Comments from Jon Schleuss, Los Angeles Times

And the colors. What does “red” mean when it’s used? And what about using too many colors. At the Times we really only have two or three colors: basic default, a highlight color and a negative color. We break from convention, but keeping it simple helps. I figure now I’ll show them how I approach chart building from start to finish.

Also, I see a desire to combine different data into the same chart. So there’s a left, bottom and right axis. But that’s a bit confusing to the reader, especially when things have the same values (percentages vs. percentages instead of percentages vs. hard counts).

I think my big takeaways are that most of these charts should be flipped on their sides. That’s because when we sort data largest to smallest (nearly everyone did) we then think of it as time passing if it’s a column chart (bars situated left to right). And that there’s a downward marching trend. Best to flip a lot of these on their side.

Build choropleth maps

---

A Comment on Color Choices

A reader made an excellent point that the red shading of the active cases map was misleading since ‘red zone’ is a specific concept in the White House task force reports.
Our shading does not match the red zone definition of the task force report and most readers would expect that it would.
I swapped out the shading for blue-green until we figure out the calculations for active cases per capita on that White House task force scale.
It just goes to show you how color choices on graphics are major communication issues.

Reader Comment: @BruceWard2
Have you considered using a standard for which counties are red?  The map gives a false impression that Arkansas counties are not “red zones” for CoVID when they are. Replying to @BruceWard2 and @KatySeiter

---

Build a Cover Image Using Canva or InDesign or Powerpoint

https://www.canva.com/  

---

Higher Resolution Graphics in Tableau
https://www.dataplusscience.com/HighResolution.html
Higher Resolution Photos: at least 72 DPI. Practically, should be higher.
–500k or more is a safe bet
–Cropping reduces file size.
Grainy Guidance: https://cft.vanderbilt.edu/wp-content/uploads/sites/59/Image_resolutions.pdf
Higher Resolution Graphics in Tableau https://www.dataplusscience.com/HighResolution.html  
 

---

Datawrapper is one of the best tools if you have no experience. It's easy to learn but can produce attractive charts. It offers a free plan, but you have to pay for more customized charts.

First Datawrapper Chart
https://academy.datawrapper.de/category/141-general


DataWrapper
Tutorials
Get inspired: DataWrapper chart gallery
School of Data: DataWrapper tutorial

Adam Marton Datawrapper Training

Automatic chart updates: How to publish charts with external data sources
https://academy.datawrapper.de/article/60-external-data-sources

Adam:

Datawrapper has good instructions on how to upload your own map here: https://academy.datawrapper.de/article/145-how-to-upload-your-own-map


The general process, or at least the workflow I use, is:

1. Compress your shapefile into a zip archive.
2. Go to mapshaper.org and import your zip archive.
3. Your map needs to use the WGS-84 projection or Datawrapper won't accept it. To put the map in that projection, hit the spacebar in mapshaper to enter the console, and enter proj wgs84
4. If you want to use labels for your map's polygons, you'll need to set interior points. In the console, enter    each "cx=$.innerX, cy=$.innerY"
5. You can also simplify the precision of the polygons on your map (hello, Chesapeake Bay) to drive down the file size of the map you're about to export. Hit the simplify button at the upper right, check the box for prevent shape removal, hit apply, and drag the slider to the right. I usually simplify down to around 50% and the map looks pretty unaffected. Your results may vary.
6. Hit the export button and choose TopoJSON as the file format.
7. Back in Datawrapper, start a new map project, click the or Upload Map button, and upload your TopoJSON file. 


From here, the process to finish your map is identical to creating any other Datawrapper map.


To go even further with a custom map, you can upload a TopoJSON that has a polygon layer for places like precincts and municipalities, and an outer boundary line layer for things like county or state boundaries. For instance, this election map has 240 municipalities in the much-discussed Philadelphia suburbs, as well as 60-plus wards for the city of Philadelphia. It also needed to have thicker lines to show county boundaries as a reference point for readers, or else all the polygons would be one large blob. Here's an example using another election map: https://www.inquirer.com/politics/election/philadelphia-presidential-votes-suburban-county-ward-map-20201109.html


You start by uploading a multi-layer TopoJSON. To do that, import a polygon shapefile and a line shapefile into mapshaper.org. Make sure you apply the correct projection and set the interior points for both layers. After you export as a TopoJSON and bring it into Datawrapper, hit the toggle switch for Additional options (advanced). "Regions" are your polygons and choose "Outer borders" to set the thick boundary lines.


Anyway, that's a new Datawrapper trick that I just picked up for our election maps.




John

Using WordPress
--Author powers 
--To access back end of datareporting: 
https://wordpressua.uark.edu/datareporting/wp-admin
Login with UARK credentials.
Quick tips on Gutenberg editor
https://wordpressua.uark.edu/datareporting/wordpress/

Blocks
Verse
Paragraph
Image
Custom HTML
Code


Embed Flourish in WordPress
Under Published in Flourish, find embed code.
Create a post. 
Create a block - custom html.
Paste code there. Save and update

Looks like this:

Embed Tableau in WordPress


Using Tableau Public to Host Graphics
--Create Tableau Public account if you haven't already
--Load your student loan graphic to Tableau Public.

–Post on WordPress.
Create a new post
Use Divi Builder, the Purple box above the formatting bar
Insert columns, pick a full row
Insert module, pick </> Code
Paste your Tableau Public embed code in the Content box
Scroll down, change the Admin Label to My Mind-Blowing Tableau Graphic (or something more humble). Save and Exit
Change Page Layout (upper right corner) to Fullwidth. Publish
Revel in your nerd powers

Building the Web Page
Gutenberg has blocks to display text, graphics, video etc.
Everyone has to build their own page in DataReporting site of WordPress.
Tasks:
Create a Post.
Upload your graphic from Assignment #1 and your story.
Format so it doesn’t look ugly
Click “Student Work” for category.