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.
Here is some guidance to help you through that process.
CHARTS AND GRAPHS
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.
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
- Make your chart public to the web: Share —-> Change “public on the web”
- Publish your table: Click the arrow dropdown (upper right corner of the chart) —-> Select a publish format “Image.”
- Copy that “Image” code and paste it into the HTML side of your WordPress editor.
Embedding Tables in WordPress
- Make your table public to the web: Share —-> Change “public on the web”
- Publish your table: File —-> Publish to the web —-> Click Publish or Republish Now
- Copy the URL.
- Paste the URL into the spreadsheet function in WordPress, “Google Spreadsheet Key.” Continue reading
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
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.
- 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