Charts

Recent posts

Create Your Favorite StateImpact Features in Core Publisher

NPR Digital Services has created an excellent resource for reporters who are new to Core Publisher, replete with a downloadable manual. There are a few things, though, that we’ve grown accustomed to created on our WordPress StateImpact sites that are not yet included in that documentation.

Below are some of our recommendations for how you can duplicate some of those features (including maps, charts and graphs, tables, document viewers, images, topic pages, pages, featured posts) on your station site.

MAPS

  • Google Fusion Maps can be embedded as iframes and include the new built-in legend feature. This works well in both Core Publisher posts and pages.

Here is some guidance to help you through that process.

CHARTS AND GRAPHS

  • Google Spreadsheets will likely be the best option, even though images will have to be created and uploaded as full-screen images OR as iframes. It isn’t optimal, but it work.

Toolbox Instructions from Emilie Ritter Saunders on embedding them (and instructions from Yan Lu on creating charts and graphs, if you’re not too comfortable with that part).

  • For ready-made Google charts with official data, like this, the iFrame embed is a good option and easy to update.

  • Also, if you are going the iframe route,know that you can modify the iframe width and/or height to 100%. To do this, simply add 100% (including the percent sign) into the embed code, overriding the pixel measurements.

TABLES

  • Tables can easily be displayed in Core Publisher by using the iframe publishing option in Google Fusion Tables. However, filterable tables are not an option, unfortunately. Continue reading

Nuts and Bolts: Embed Charts and Tables in WordPress and Core Publisher

After you get your chart or table into Google Drive and formatted the way you’d like to, follow these steps, kindly collected by data viz maven Emilie Ritter Saunders, to get it into your post:

Embedding Charts in WordPress

  1. Make your chart public to the web: Share —-> Change “public on the web”
  2. Publish your table: Click the arrow dropdown (upper right corner of the chart) —-> Select a chart1publish format “Image.”
  3. Copy that “Image” code and paste it into the HTML side of your WordPress editor.

Embedding Tables in WordPress

  1. Make your table public to the web: Share —-> Change “public on the web”
  2. Publish your table: File —-> Publish to the web —-> Click Publish or Republish Now
  3. Copy the URL.
  4. Paste the URL into the spreadsheet function in WordPress, “Google Spreadsheet Key.” Continue reading

Advanced Google Chart Tools

Did you have fun with the updated Google Chart Tools? Well, that’s only the tip of the iceberg of fun and possibility. Google has created a chart gallery with different kinds of prototypes for you to play with.

I will explain to you how we could use some of those prototypes for better data storytelling. You can also consider this as your first step into the information design world, thinking about grouping and presenting information. Continue reading

Google Image Charts

Data visualizations in the form of bar, column and line charts can help readers spot important trends in the numbers behind the stories, and Google’s Image Chart Editor makes it relatively easy to produce simple but effective charts for your posts.

General

  • Only use bar or line charts
  • All axis labels and legend text set at 11px
  • No grids
  • Choose from three widths that correspond to our 12-column grid: 220px (3 columns), 300px (4 columns) or 620px (8 columns)
  • Start with a vertical dimension that will create a golden proportion rectangle by multiplying your chosen width by .618. The vertical dimension should be appropriate to the distribution of the data, so adjust from your golden rectangle as necessary. Continue reading