Baking Chart Data Into Your Page

Do you use our dailygraphics rig to create and deploy small charts? We’ve introduced a new feature: The latest version of copytext.py (0.1.8) allows users to inject serialized JSON from a Google Spreadsheet onto their page with one line of template code.

Benefits:

  • Store your text and your data in the same Google Spreadsheet, making editing a little simpler.
  • The data is baked right into your page, so there’s one fewer file to load.

(Thanks to Christopher Groskopf and Danny DeBelius for making this work.)

If you’re already using dailygraphics, pull the latest code from GitHub (we’ve updated libraries and made other bugfixes in recent weeks), and update requirements:

pip install -Ur requirements.txt

You can see this at work in a graphic published today on NPR.org.


Here’s How It Works

The following examples assume that you are using our dailygraphics rig. Both examples point to this Google Spreadsheet.

The spreadsheet has three tabs:

  • labels: Text information (headline, credits, etc.)
  • data_bar: The data for the bar chart example below
  • data_line: The data for the line chart example below

Note: Copytext works best when all values (even numeric ones) are cast as text/strings in the Google Spreadsheet, rather than numbers or dates. You can convert them to their proper types later in JavaScript.


Bar Chart (Source code on GitHub)

In child_template.html, add a <script></script> tag above all the other JavaScript embeds at the bottom of the page, and then declare the variable for your data.

<script type="text/javascript">
    var GRAPHIC_DATA = {{ COPY.data_bar.json() }};
</script>
  • GRAPHIC_DATA is the variable name you’ll use to reference this data
  • COPY refers to the overall spreadsheet
  • data_bar is the name of the specific sheet within the spreadsheet (in this case, the spreadsheet has three sheets)

The result looks like this, with the keys corresponding to the column headers in the table:

<script type="text/javascript">
    var GRAPHIC_DATA = [{"label": "Alabama", "amt": "2"}, {"label": "Alaska", "amt": "4"}, {"label": "Arizona", "amt": "6"}, {"label": "Arkansas", "amt": "8"}, {"label": "California", "amt": "10"}, {"label": "Colorado", "amt": "12"}, {"label": "Connecticut", "amt": "14"}];
</script>

In js/graphic.js, don’t bother with declaring or importing GRAPHIC_DATA — just go straight to whatever additional processing you need to do (like, in this case, explicitly casting the numeric values as numbers).

GRAPHIC_DATA.forEach(function(d) {
    d['amt'] = +d['amt'];
});

Line Chart (Source code on GitHub)

In child_template.html, add a <script></script> tag above all the other JavaScript embeds at the bottom of the page, and then declare the variable for your data.

<script type="text/javascript">
    var GRAPHIC_DATA = {{ COPY.data_line.json() }};
</script>
  • GRAPHIC_DATA is the variable name you’ll use to reference this data
  • COPY refers to the overall spreadsheet
  • data_line is the name of the specific sheet within the spreadsheet (in this case, the spreadsheet has three sheets)

The result looks like this, with the keys corresponding to the column headers in the table:

<script type="text/javascript">
    var GRAPHIC_DATA = [{"date": "1/1/1989", "One": "1.84", "Two": "3.86", "Three": "5.80", "Four": "2.76"}, {"date": "4/1/1989", "One": "1.85", "Two": "3.89", "Three": "5.83", "Four": "2.78"}, {"date": "7/1/1989", "One": "1.87", "Two": "3.93", "Three": "5.89", "Four": "2.81"}, {"date": "10/1/1989", "One": "1.88", "Two": "3.95", "Three": "5.92", "Four": "2.82"} ... [and so on] ...;
</script>

In js/graphic.js, don’t bother with declaring or importing GRAPHIC_DATA — just go straight to whatever additional processing you need to do (like, in this case, explicitly casting the dates as dates).

GRAPHIC_DATA.forEach(function(d) {
    d['date'] = d3.time.format('%m/%d/%Y').parse(d['date']);
});

Never miss a gig

Join the Visuals Gigs mailing list to get an email when we post internships and full-time jobs.

Your membership will be kept confidential.

 

Carebot

Meaningful analytics for journalism.

Elex

A command-line tool to get election results from the Associated Press Election API v2.0. Elex is designed to be friendly, fast and agnostic to your language/database choices.

Pym.js

A JavaScript library for responsive iframes.

 

On The Team Blog

More