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 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.

JAVASCRIPT
    {
      "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, https://github.com/CITF-Malaysia/citf-public.  We are mostly interested in vaccination count by state that is referenced here, https://github.com/CITF-Malaysia/citf-public/blob/main/vaccination/vax_state.csv.

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.

JAVASCRIPT
    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 = "https://raw.githubusercontent.com/CITF-Malaysia/citf-public/main/vaccination/vax_state.csv"

        # Get yesterday's date because data is only available up to yesterday
        kl_timezone = pytz.timezone('Asia/Kuala_Lumpur')
        kl_time_now = datetime.now(kl_timezone)
        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
            req.post("https://api.usestencil.com/v1/images", 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.            

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.        

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.

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

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

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.