May 25, 2022

How To Automate Infographics Automatically

Learn how to automate repetitive infographics designs

Infographics are a great way to convey information concisely. It is often overlook by marketers when creating visual marketing assets. Often time when think about visual marketing it revolves around social media posts, commercials, advertisements and others.

Infographics can increase website traffic by up to 12%. (One Spot)

Infographics and other colorful visuals can increase sales by up to 80%. (Xerox)

For example, during this pandemic, a well designed and well thought infographics can do wonders to create awareness.

However, creating infographics can be time consuming process especially if you have to do it regularly - updating daily vaccination rate chart, monthly infection rate and many others.

Fortunately, there are tools we can use to expedite and automate the process. In this demo, you will learn how to create infographics and automate the process - from processing the data, generating the infographics and distributing infographics to our distribution channel such as social media.

Case study

We are going to create a daily vaccination rate infographics using a real data source. We will utilize AWS Lambda to extract our data, use Stencil to generate the infographics and then use Zapier to tie everything together.

Once everything is set up, you no longer have to do anything. Infographics will be created automatically each day and then posted to Twitter.

How to

Preparing our template

Our template

Our template consists of two bar charts and a textbox that we will change based on given data each day.

1. Use data editor to create the template

You can either choose to design your own template with bar charts (it's easy!) template or use our preset template.

Once you do that, then copy the following JSON file into the data editor to create the initial data for the chart.

{ "labels": [ "Johor", "Kedah", "Kelantan", "Melaka", "Negeri Sembilan", "Pahang", "Perak", "Perlis", "Pulau Pinang", "Sabah", "Sarawak", "Selangor", "Terengganu", "W.P. Kuala Lumpur", "W.P. Labuan", "W.P. Putrajaya" ], "datasets": [ { "label": "Dose #1", "data": [ 100, 5, 15, 100, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], "backgroundColor": "#ffcc00" }, { "label": "Dose #2", "data": [ 10, 100, 150, 200, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], "backgroundColor": "rgba(187, 153, 224, 1)" } ] }

Getting our data with AWS Lambda

Malaysia's National Covid-​19 Immunisation Programme has open data that is updated daily,  We are mostly interested in vaccination count by state that is referenced here,

Our lambda function will read the data, parse the data into a format that Stencil can understand, and send a request to Stencil to generate our infographics based on our template.

from datetime import datetime, timedelta import pytz import pandas as pd import requests as req import json def make_modification(name, states, dose1, dose2): datasets = [ { "data": dose1, "label": "Dose #1" }, { "data": dose2, "label": "Dose #2" } ] modification = { "name": name, "labels": states, "datasets": datasets } return modification def run(): url = "" # Get yesterday's date because data is only available up to yesterday kl_timezone = pytz.timezone('Asia/Kuala_Lumpur') kl_time_now = kl_time_yesterday = kl_time_now - timedelta(days=1) yesterday = kl_time_yesterday.strftime("%Y-%m-%d") # read the CSV from the URL df = pd.read_csv(url) # filter the data only for the date we are interested in rows = df.loc[df["date"] == yesterday] if not rows.empty: # Only get the data that we want to trend states = rows["state"].tolist() daily_dose1 = rows["dose1_daily"].tolist() daily_dose2 = rows["dose2_daily"].tolist() cumul_dose1 = rows["dose1_cumul"].tolist() cumul_dose2 = rows["dose2_cumul"].tolist() # Generate modificatiosn that fit Stencil's API format daily_graph = make_modification("bar_graph_daily", states, daily_dose1, daily_dose2) cumul_graph = make_modification("bar_graph_cumul", states, cumul_dose1, cumul_dose2) text_date = { "name": "text_date", "text": yesterday } modifications = [text_date, daily_graph, cumul_graph] # Set our Zapier webhook to call once image is generatd payload = { "template": "3bc487ef-33ad-46b3-a18c-0d57c3825723", "modifications": modifications, "webhook_url": "your-zapier-webhook" } headers = { "Authorization": "Bearer your-project-api-key", "Content-Type": "application/json" } # Call Stencil's API to generate the image asynchronously"", json=payload, headers=headers) def lambda_handler(event, context): run() return { 'statusCode': 200, 'body': json.dumps('Request sent') }

Although the code may look daunting for some users, it is actually pretty straight forward. You could also use any other no-code or low-code tool out there to do this, but in this case a simple Python script should handle the job just fine.

We can now deploy our lambda function and set HTTP trigger for the lambda function. We will need this trigger URL in the next step.                                  

Automating the workflow

1. Schedule task with Zapier

The rest of the steps are straight forward and mostly filling in the details with proper information.

We are going to trigger the lambda function everyday at 7AM including weekends.            

Trigger the Zap daily

We provide the Lambda function trigger URL from previous step

2. Distributing infographics with Zapier to Twitter

Our lambda function will call Stencil's API to generate the image. We also setup our payload to include Zapier webhook below. Once image is generated, it will call this webhook.        

This is the Zapier's Webhook that we set in our payload in step 2 - Lambda function

We add another step to parse our JSON payload and assign our output variable to include the link to the image and the date of the data.

Zapier's output variable must be a dictionary

We parse the response we get from Stencil's API to send it to the next step (Twitter)

We add date to our message so the message is always unique.

You're done!

The best part of this all this is that once you set this up, it will run everyday without you having to do anything.

Recognizing workflow to be automated and applying automation are a great way to recover your time each day

Our automated tweet

Debugging issues

Sometimes, problems can arise and you need to know where to look. You can view image requests by either clicking on Requests tab or by accessing your template's Console page.

You should be able to see your generated image in the list of requests. If you don't, that means Stencil does not receive your request. Please check your Zap or AWS Lambda function.

You can also see the webhook response in the log.

Twitter Zap can be disabled automatically by Zapier if they think you're sending a duplicate tweet. It is against Twitter's ToC.

If you are more of Integromat user, then the step is similar.

Ready to dive in?Start your free trial today.