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.

 
Image

New Movies And TV Shows To Watch At Home This Fall

Our critics collected the most anticipated TV shows and movies coming to your screens over the next few months, and with our new tool you can search by release date, genre and where you can watch it.

Image

United States of Wildfire

There’s a forgotten history that should serve as a warning — wildfire isn’t unique to the West. Now the warming climate is increasing the risk of major wildfires across America. And more people are moving to fire-prone areas without realizing the danger.

Dailygraphics Next

One-stop tooling for creating responsive news graphics from a range of D3-based templates

Sidechain

Responsive iframes for modern browsers

Interactive Template

A modern site generator with live reload and support for loading data from ArchieML, Google Docs/Sheets, CSV, JSON, and more

 

On The Team Blog

More