DEV Community: Joel Turner

Chart Parts: Anatomy of a chart

Joel Turner — Thu, 09 Feb 2023 21:14:06 +0000

Intro

When building charts and chart libraries it's nice to know how all the pieces work together. Today we're going to talk a little bit about how this all works and dive into a quick anatomy of charts and and how it can be used to tell the data story.

Data

Before we get into the anatomy of a chart, let's take a look at the core part of any data visualization, the data. Most datasets will be an array of items that contain metrics and dimensions.

Single and Multi Dimension Dataset Examples

What is a dimension?

A dimension are an attribute that help categorize and add context to the data. For example, if you are analyzing social media data, the dimensions might be date, location, and user. Each dimension provides a different way of slicing and grouping the data, making it easier to understand.

What is a metric?

A metric is a numerical value allow us to measurement different aspects of the data. For example, if you are analyzing social media data, the metrics might be total likes, average likes per day, and number of posts shared. Metrics provide the actual values that you can use to measure and compare your data.

How do dimensions and metrics work together?

Dimensions and metrics work together to provide a complete picture of your data. The combination of these will allow us to organize, categorize, measure and compare our data which can give us better insights into the data.

Anatomy of a chart

Let's take a quick look at the pieces that can make up a chart. Each chart varies in what it needs to tell the data story, but there are a few common pieces that are used in most charts. This diagram is a simplified version of something Ryan Legler created when built initial data viz library for Sprinklr.

Field

The field is the area where the data is represented and where the main insights are derived. This will be where the bars, bubbles, pies, maps, etc will be displayed.

Legend

The legend is a key that explains what the different colors or symbols in the chart represent. The legend adds more context to the chart so we have a better understanding of the data being presented. An example usage is in a pie chart or a stacked bar/column chart to convey the meaning of the color segments.

Axes

Axes help us determine the scale and the values of data being presented in the field. They will often display ticks and tick labels for quick context about the field.

Controls

The controls are the UI elements that allow the user to interact with the chart, play through a timeline, zoom in/out, segment/filter the data, etc.

Conclusion and Resources

For some chart inspiration and clarification, check out the Data Viz Project which has some great examples of what we discussed here.

When we use the right chart for the data and leverage the parts that make up a chart, we can tell a better story with our data.

Working on a New Feature as a Senior Frontend Developer

Joel Turner — Sat, 09 Jul 2022 00:24:54 +0000

When I receive a ticket for a new feature, I generally follow a few guidelines to make sure I have what I need to get started. I'll share some of my questions and thoughts here for reference (as much for myself as anyone).

Before the Code

I usually start out by assessing the scope of the feature. The following questions help guide me before I fire up VS Code.

Do we have a design for this feature? depending on size, this may need to push back into design's hands
Is this an existing pattern or a new one? I prefer existing in the design system
Is this reusable or scoped to a certain part of the app? can help with architecture
Will this need API updates to get to feature complete?
1. If yes, does API work need to happen before UI?
2. If yes, are they simple updates? I can handle simple updates, otherwise I'll have to pass off the API work to someone with more Java experience on the team
What does finished look like? this can help with tests and QA
Is this a part of the app that I'm familiar with? might take longer if I'm not familiar
1. If no, who can I ask for help if I get stuck?
Is this an opportunity to refactor some older code? often, these are the only chances to clean up tech debt

Whew! That's a lot! Let's get into the code already.

Diving Into Code

Once I have some satisfactory answers to the above questions, I dive into the code to help answer some other questions, as well as generate some new ones. There are usually still a few unknowns that arise before the downhill of writing the feature.

Once I'm in the code, I try to determine the architecture of the feature and assess the state requirements.

Can the state be isolated to this feature?
1. If no, how much needs to be refactored to implement this feature?
2. If no, how high does the state need to go?
Is this feature directly coupled with another feature?
1. If yes, can I separate concerns so they are easier to reason about and maintain?
Can I remove code to help reduce complexity? ongoing tech debt work

From here, I can start piecing together the UI. I love seeing visual progress right away so I usually start by fleshing out the layout and adding placeholder divs for the elements. This helps me get a bit of a wireframe together before diving into the details, which can help me determine where the state should live and how to break the components down.

As I fill in the details, I can create the types, helper functions, hooks, and components that are needed. Hopefully, most of this comes from the design library but sometimes we have to piece together a solution outside of it.

I almost always run some parts of my solution or my architecture by my manager, Ryan, who is an incredible architect and a master of thinking through edge cases. That helps determine a stable foundation to the feature and future maintenance/updates to the feature.

Almost done!

Wrapping Up

I like to go through any helper functions I've added to make sure they are covered with tests. This can be true for the components as well, depending on their complexity. This is also the time when I create a Pull Request and have the rest of the team weigh in on patterns, issues, and things I've overlooked.

Once the PR is approved it is on its way to QA where it has the edges poked at. If there are any edges found, I'll solve for those edges, and if applicable, add tests for those edges.

How do You Work Through a New Ticket?

I would love to hear how other's work through feature tickets, no matter what experience you have in development. Hit me up on Twitter or throw a comment down below if you'd like. I think we all come at it from our unique angles and can help each other as we learn and grow.

Instagram to Cloudinary

Joel Turner — Thu, 12 May 2022 16:08:43 +0000

We're going to walk through setting up a Node.js project that will fetch Instagram posts, filter by a set of hashtags, then upload those images to Cloudinary, and then trigger a Netlify build. This script will run on a schedule through Github Actions.

tl;tr

Here's the instagram-cloudinary repo if you'd like to skip to the final code.

The Problem

First, a little history...

I've been using the gatsby-source-instagram plugin for a while on my site to highlight some of my illustrations. I even added some functionality to the plugin so consumers could query their posts by hashtag.

The plugin author has done a great job tracking down issues and documenting the convoluted steps to get Facebook/Instagram API credentials. The plugin worked great for a while, but due to many changes in the Facebook/Instagram API, it became less reliable and harder to debug.

It got to a point where I couldn't update my site because of the errors from the Instagram API. I believe that part of the problem is the frequency of querying the API, where it seemed to only work every few minutes, throwing an error in between of "Please try again later." When working on the site locally, it would cause a cascade of errors in Gatsby's graph. Because of this and the ever-changing permissions in the Facebook API, the plugin has been much harder to maintain.

To query the Instagram API less frequently and have more control, I decided to set up a Node.js project to fetch posts from the Instagram API, filter and find hashtags, and then upload those to Cloudinary. When the posts send successfully, the script fires a Netlify build via a webhook.

The Goal

To make this work for my case, I jotted down what I needed this script to do.

fetch the latest posts from Instagram
- make sure we get the first few comments (I used to put the post's hashtags in the first comment)
upload the posts that match my hashtag list to Cloudinary
trigger a build of my site (my site is running gatsby-source-cloudinary)

Setting up a new project

The first thing to do is set up a new Node.js project. There are quite a few starters out there, but, for this, I just started from scratch.

Create the project folder and navigate to it.

mkdir instagram-cloudinary
cd instagram-cloudinary

Initialize the package.json. I use yarn, but feel free to use npm.

yarn init

This is what my package.json file looks like after initialization:

{
  "name": "instagram-cloudinary",
  "version": "1.0.0",
  "main": "src/index.js",
  "author": "@joelmturner",
  "license": "MIT",
  "private": true
}

I like to use TypeScript so that's the first dependency I'll add here. The -D flag sets them as devDependencies. ts-node is going to help run the script.

yarn add -D typescript ts-node @types/node

Next, it's time to set up the tsconfig.json file. I usually run the init and update the items as necessary.

yarn tsc --init

This is how mine looks after cleanup.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "rootDir": "src",
    "isolatedModules": true,
    "strict": true,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["es2015", "dom"]
  }
}

Since we'll be using API keys for Instagram and Cloudinary, we can add dotenv to help us with the environment variables.

yarn add -D dotenv

Next is adding the script file in the src folder.

mkdir src
touch src/index.ts

In this file we can add some pseudo code to help us step through. Our src/index.ts can look like this:

async function instagramToCloudinary() {
  // fetch the posts from Instagram
  // convert the posts by hashtags
  // upload to Cloudinary
  // trigger a build if posts are pulled successfully
}

// fire the script
instagramToCloudinary();

Instagram Query

Let's get those posts!

We'll start with adding axios as a dependency. Axios will help us with the requests.

yarn add -D axios

Next, let's set up some environment variables for Instagram. For this, you'll need an access token and Instagram id from Facebook so that you can query Instagram. Honestly, I don't remember how I got these working correctly but, the directions on gatsby-source-instagram were helpful.

Create a .env file at the root of your project and add your values like:

INSTAGRAM_ACCESS_TOKEN=XXXXXX
INSTAGRAM_ID=XXXXXX

Now that we have these ready, we can start putting the script together. I'll put the Instagram fetching in its own function, so it's easier to reason about later.

require("dotenv").config();
const MAX_POSTS = 500;

async function fetchInstagramPosts() {
  console.log("🚀 fetching Instagram posts");
  const response = await axios.get(
    `https://graph.facebook.com/v12.0/${process.env.INSTAGRAM_ID}/media?fields=media_url,caption,media_type,timestamp,children{media_url},comments.limit(3){text}&limit=${MAX_POSTS}&access_token=${process.env.INSTAGRAM_ACCESS_TOKEN}`
  );
  return response?.data?.data;
}

async function instagramToCloudinary() {
  // fetch the posts from Instagram
  const posts = await fetchInstagramPosts();

  // convert the posts by hashtags
  // upload to Cloudinary
  // trigger a build if posts are pulled successfully
}

// fire the script
instagramToCloudinary();

First, we add the require("dotenv").config(); so we have access to the environment variables that we set up above.

For the request, we're using axios and building the URL with our parameters. The parameters are specialized to what we need for grabbing all the user's posts and the first three comments on those posts.

We're using the environment variables declared above to place into these parameters for the id and access token. The MAX_POSTS is a setting that we can increase whenever we need to do more or decrease if we're only trying to maintain the last few posts posted to Instagram.

We then use an await to make sure the posts resolve before moving on to the next step. We can also add a try-catch in case there is a failure.

async function fetchInstagramPosts() {
  try {
    console.log("🚀 fetching Instagram posts");
    const response = await axios.get(
      `https://graph.facebook.com/v12.0/${process.env.INSTAGRAM_ID}/media?fields=media_url,caption,media_type,timestamp,children{media_url},comments.limit(3){text}&limit=${MAX_POSTS}&access_token=${process.env.INSTAGRAM_ACCESS_TOKEN}`
    );
    return response?.data?.data;
  } catch (error) {
    console.log("😿 Instagram fetch error", error);
  }
}

Prepare the Posts by Hashtag

Let's do this section in its own function as well. We can add the invocation of it to instagramToCloudinary(). We'll add a type of UploadPost that we can define in src/types.ts and import into our script. The UploadPost array will store our data in a way that we can pass to Cloudinary more easily.

import { UploadPost } from "./types";

async function instagramToCloudinary() {
  // fetch the posts from Instagram
  const posts = await fetchInstagramPosts();

  if (posts?.length) {
    // convert the posts by hashtags
    const cloudinaryCollection: UploadPost[] = convertInstagramPostToCloudinaryEntity(posts);

    // upload to Cloudinary
    // trigger a build if posts are pulled successfully
  }
}

export type UploadPost = {
  url: string;
  public_id: string;
  folder: string;
  overwrite: true;
  tags: string[];
  createdDate: number;
};

Now, let's create the convertInstagramPostToCloudinaryEntity() function. This one is fairly deep, so I'll try to walk through it in pieces, then put it all together. We can stub out the function and add a type of Post which is, roughly, the shape we get back from the Instagram API.

import { Post, UploadPost } from "./types";
require("dotenv").config();
const MAX_POSTS = 500;

async function fetchInstagramPosts() {}

function convertInstagramPostToCloudinaryEntity(posts: Post[]): UploadPost[] {
  console.log("🚀 converting posts to Cloudinary");

  // check for hashtags in the posts and add to the collection
}

export type Post = {
  media_url: string;
  caption?: string;
  media_type: "IMAGE" | "VIDEO" | "AUDIO";
  timestamp: string;
  comments_count: number;
  id: string;
  comments?: {
    data: Comment[];
  };
};

Now that we have a function ready to start with, we need to figure out how to filter the posts based on a hashtag. I opted to create a list of the hashtags I would like to showcase on my site. The list has an id and a regex because I messed up the hashtags a few times on Instagram and didn't want to go back through to fix them.

export const HASHTAG_CONFIG = [
  {
    id: "joelmturner_abcs2017",
    regex: /#j.+?2017/gi,
  },
  {
    id: "joelmturner_featured",
    regex: /#joelmturner_featured/gi,
  },
  {
    id: "letterclash",
    regex: /#letterclash/gi,
  },
  {
    id: "inktober2017",
    regex: /#ink.+?2017/gi,
  },
  {
    id: "inktober2018",
    regex: /#ink.+?2018/gi,
  },
  {
    id: "inktober2019",
    regex: /#ink.+?2019/gi,
  },
  {
    id: "inktober2021",
    regex: /#ink.+?2021/gi,
  },
  {
    id: "handletteredabcs_2016",
    regex: /#handletteredabcs_2016/gi,
  },
];

First, we'll loop over the hashtag config and filter down to the posts that have the hashtags that we want. Then, we'll be able to combine the hashtags, if a post has more than one and create an entity that will be easier for the upload step. We can store these in a variable outside of the loop that will be returned at the end of the function.

function convertInstagramPostToCloudinaryEntity(posts: Post[]): UploadPost[] {
  console.log("🚀 converting posts to Cloudinary");
  const cloudinaryCollection: UploadPost[] = [];

  // check for hashtags in the posts and add to collection
  HASHTAG_CONFIG.forEach((config) => {
    const postGroup = posts?.filter((post) => {
      // making sure the post is an image instead of video
      if (post.media_type !== "IMAGE") {
        return false;
      }
      // combines the text from the first 3 comments
      const comments =
        post?.comments?.data?.reduce((acc, comment) => {
          acc = `${acc} ${comment?.text}`;
          return acc;
        }, "") ?? "";

      const content = `${post?.caption} ${comments}`;
      // check to see if our regex matches anything in the combined string
      return content.match(config.regex);
    });

    // loop over the posts and add to stored variable
    if (postGroup?.length) {
      postGroup.forEach((post) => {
        const timestamp = new Date(post.timestamp).valueOf();
        // using a date value as id so it's easier to sort by date
        const combinedId = `${timestamp}_${post.id}`;
        // see if this post is already in our collection
        const found = cloudinaryCollection.find((uploadPost) => uploadPost.public_id === combinedId);

        if (found) {
          // combine tags on the entity
          found.tags = [...found.tags, config.id];
        } else {
          // create entity
          cloudinaryCollection.push({
            url: post.media_url,
            public_id: combinedId,
            folder: "illustration",
            overwrite: true,
            tags: [config.id],
            createdDate: timestamp,
          });
        }
      });
    }
  });

  return cloudinaryCollection;
}

Upload to Cloudinary

Now that we have an array of Cloudinary-like entities, we're ready to move on to uploading to Cloudinary. To achieve this, we'll need to make sure we have upload credentials.

Cloudinary API Credentials

If you're new to Cloudinary, they have a very generous free tier where you can sign up at cloudinary.com or use this invite link. Once you're signed in, you can follow the steps below.

If you have a Cloudinary account, you can log in and go to Settings -> Security -> Access Keys. Here, you can add a new pair, which will be used in this script.

Once finished, you should see all the details you'll need at the top of your Cloudinary dashboard.

Cloudinary Client

Let's get the Cloudinary client connected. We'll need to add some items to our .env file.

# Instagram
INSTAGRAM_ACCESS_TOKEN=XXXXXX
INSTAGRAM_ID=XXXXXX

# Cloudinary
CLOUDINARY_CLOUD_NAME=XXXXXX
CLOUDINARY_API_KEY=XXXXXX
CLOUDINARY_API_SECRET=XXXXXX

We can now use these in our app to help us connect to Cloudinary. Here is the connection config. I placed this at the top of the index file, under the imports.

cloudinary.v2.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
  secure: true,
});

Start the Uploads

We're now ready to start the upload process. We'll start by creating a new async function because we want to know if all of the uploads made it successfully.

import { UploadPost } from "./types";

async function instagramToCloudinary() {
  // fetch the posts from Instagram
  const posts = await fetchInstagramPosts();

  if (posts?.length) {
    // convert the posts by hashtags
    const cloudinaryCollection: UploadPost[] = convertInstagramPostToCloudinaryEntity(posts);

    // upload to Cloudinary
    const uploadStatus = await sendToCloudinary(cloudinaryCollection);
    // trigger a build if posts are pulled successfully
  }
}

async function sendToCloudinary(postGroup: UploadPost[]) {
  console.log("🚀 uploading to Cloudinary");
}

Cloudinary doesn't have a bulk upload script but their individual upload is very quick and can handle many uploads simultaneously so we can just loop over our entities and send them up. Here's the upload API we'll be using. There are a lot of options that can be adjusted based on the projects' needs. Here, we're just using the basic options.

async function sendToCloudinary(postGroup: UploadPost[]) {
  console.log("🚀 uploading to Cloudinary");
  const resolves = postGroup.map(async ({ public_id, folder, overwrite, tags, url }) => {
    try {
      return new Promise((resolve, reject) => {
        cloudinary.v2.uploader.upload(
          url,
          {
            public_id,
            folder,
            overwrite,
            tags,
          },
          function (error) {
            if (error) {
              reject(error);
            } else {
              resolve("SUCCESS");
            }
          }
        );
      });
    } catch (error_1) {
      console.log("😿 Cloudinary upload error", error_1);
    }
  });

  // make sure all were successful
  const successfullyResolved = (await Promise.all(resolves)).every((resolve) => !!resolve);

  return successfullyResolved ? "SUCCESS" : "ERROR";
}

I'm using an array of promises to help me determine if any had an error while uploading. This may not be necessary for all cases but I like to know, especially before kicking off a new build of the site.

The last argument in the upload function is a callback that can help us determine if the upload was successful or not. We can check against this in our successfullyResolved check and return an appropriate status.

Trigger Netlify Deploy

If all the images were uploaded successfully, we'll trigger the build on Netlify. First, we'll need our Netlify webhook. You can set one up in the deploys settings https://app.netlify.com/sites/<account>/settings/deploys under the Build Hooks section. Once you have the hook, you can add that to your .env file.

# Instagram
INSTAGRAM_ACCESS_TOKEN=XXXXXX
INSTAGRAM_ID=XXXXXX

# Cloudinary
CLOUDINARY_CLOUD_NAME=XXXXXX
CLOUDINARY_API_KEY=XXXXXX
CLOUDINARY_API_SECRET=XXXXXX

# Netlify
NETLIFY_WEBHOOK=XXXXXX

We'll now set up a conditional build script using axios.

// trigger a build if posts are pulled successfully
if (uploadStatus === "SUCCESS") {
  axios
    .post(process.env.NETLIFY_WEBHOOK as string)
    .then(() => {
      console.log("🚀 triggered Netlify build");
    })
    .catch((error) => {
      console.log("😿 Netlify trigger error", error);
    });
}

Our script should look something like this now:

import axios from "axios";
import cloudinary from "cloudinary";
import { HASHTAG_CONFIG, MAX_POSTS } from "./constants";
import { InstagramResponse, Post, UploadPost } from "./types";
require("dotenv").config();

cloudinary.v2.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
  secure: true,
});

async function sendToCloudinary(postGroup: UploadPost[]) {
  console.log("🚀 uploading to Cloudinary");
  const resolves = postGroup.map(async ({ public_id, folder, overwrite, tags, url }) => {
    try {
      return new Promise((resolve, reject) => {
        cloudinary.v2.uploader.upload(
          url,
          {
            public_id,
            folder,
            overwrite,
            tags,
          },
          function (error) {
            if (error) {
              reject(error);
            } else {
              resolve("SUCCESS");
            }
          }
        );
      });
    } catch (error_1) {
      console.log("😿 Cloudinary upload error", error_1);
    }
  });

  // make sure all were successful
  const successfullyResolved = (await Promise.all(resolves)).every((resolve) => !!resolve);

  return successfullyResolved ? "SUCCESS" : "ERROR";
}

async function fetchInstagramPosts(postRequestError) {
  try {
    console.log("🚀 fetching Instagram posts");
    const response = await axios.get<InstagramResponse>(
      `https://graph.facebook.com/v12.0/${process.env.INSTAGRAM_ID}/media?fields=media_url,caption,media_type,timestamp,username,children{media_url},permalink,comments.limit(3){text}&limit=${MAX_POSTS}&access_token=${process.env.INSTAGRAM_ACCESS_TOKEN}`
    );
    return response?.data?.data;
  } catch (error) {
    postRequestError = error;
    console.log("😿 Instagram fetch error", error);
  }
}

function convertInstagramPostToCloudinaryEntity(posts: Post[]): UploadPost[] {
  console.log("🚀 converting posts to Cloudinary");
  const cloudinaryCollection: UploadPost[] = [];

  // check for hashtags in the posts and add to collection
  HASHTAG_CONFIG.forEach((config) => {
    const postGroup = posts?.filter((post) => {
      // making sure the post is an image instead of video
      if (post.media_type !== "IMAGE") {
        return false;
      }
      // combines the text from the first 3 comments
      const comments =
        post?.comments?.data?.reduce((acc, comment) => {
          acc = `${acc} ${comment?.text}`;
          return acc;
        }, "") ?? "";

      const content = `${post?.caption} ${comments}`;
      // check to see if our regex matches anything in the combined string
      return content.match(config.regex);
    });

    // loop over the posts and add to stored variable
    if (postGroup?.length) {
      postGroup.forEach((post) => {
        const timestamp = new Date(post.timestamp).valueOf();
        // using a date value as id so it's easier to sort by date
        const combinedId = `${timestamp}_${post.id}`;
        // see if this post is already in our collection
        const found = cloudinaryCollection.find((uploadPost) => uploadPost.public_id === combinedId);

        if (found) {
          // combine tags on the entity
          found.tags = [...found.tags, config.id];
        } else {
          // create entity
          cloudinaryCollection.push({
            url: post.media_url,
            public_id: combinedId,
            folder: "illustration",
            overwrite: true,
            tags: [config.id],
            createdDate: timestamp,
          });
        }
      });
    }
  });

  return cloudinaryCollection;
}

async function instagramToCloudinary() {
  let postRequestError = null;

  // fetch the posts from Instagram
  const posts = await fetchInstagramPosts(postRequestError);

  if (posts?.length) {
    // convert the posts by hashtags
    const cloudinaryCollection: UploadPost[] = convertInstagramPostToCloudinaryEntity(posts);

    // upload to Cloudinary
    const uploadStatus = await sendToCloudinary(cloudinaryCollection);

    // trigger a build if posts are pulled successfully
    if (!postRequestError && uploadStatus === "SUCCESS") {
      axios
        .post(process.env.NETLIFY_WEBHOOK as string)
        .then(() => {
          console.log("🚀 triggered Netlify build");
        })
        .catch((error) => {
          console.log("😿 Netlify trigger error", error);
        });
    }
  }

  // for local debugging
  //   fs.writeFile("test.json", JSON.stringify(cloudinaryCollection, null, 2), (err: any) => {
  //     if (err) {
  //       console.error(err);
  //       return;
  //     }
  //     //file written successfully
  //   });
}

// fire the script
instagramToCloudinary();

Github Action to Run on Schedule

In your Github project you can create an action and use the following config for a daily run.

# This is a basic workflow to help you get started with Actions

name: Post Fetch and Deploy

# Controls when the workflow will run
on:
  schedule:
    - cron: "0 0 * * *"

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.17.x]

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      - name: Using Node version ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: create env file
        run: |
          MY_STRING=$(cat << EOF
          INSTAGRAM_ACCESS_TOKEN =${{secrets.INSTAGRAM_ACCESS_TOKEN}}
          INSTAGRAM_ID =${{secrets.INSTAGRAM_ID}}
          CLOUDINARY_CLOUD_NAME =${{secrets.CLOUDINARY_CLOUD_NAME}}
          CLOUDINARY_API_KEY =${{secrets.CLOUDINARY_API_KEY}}
          CLOUDINARY_API_SECRET =${{secrets.CLOUDINARY_API_SECRET}}
          NETLIFY_WEBHOOK =${{secrets.NETLIFY_WEBHOOK}}
          EOF
          )
          touch .env
          echo "$MY_STRING" >> .env
      - run: yarn
      - run: yarn start

The - cron: "0 0 * * *" is what configures the action to run once a day.

Conclusion

Offloading my Instagram posts to Cloudinary has made my site build more reliably, especially when I'm doing local development. The Cloudinary API has been rock solid for me so far and it's easier to work with.

Hopefully, this process is broken up enough that any service could be swapped out for another with little effort. I can see other social channels being aggregated into this pipeline as well.

Sequential Interval React Hook

Joel Turner — Thu, 29 Apr 2021 05:05:33 +0000

Create a React hook that can simulate a pulse-like cycle between animation states through different durations per animation state.

tl;dr

Here's the hook in an example.

Background

We have an animation heartbeat player that switches between four animation states, each with its own user-configurable duration.

We have a ping service that sends out a ping to our component on an interval, or heartbeat, and each ping kicks off an animation cycle. This cycle goes through the sequence: rest -> tick -> exit -> enter -> rest.

The original implementation was built into a class component using a local MobX observable and nested setTimeouts and has worked very well for the past few years.

This is a rough idea of how the nested setTimeouts are set up inside of the ping.

this.animationState = "tick";
setTimeout(
  action(() => {
    this.animationState = "exit";
    setTimeout(
      action(() => {
        this.animationState = "enter";
        setTimeout(
          action(() => {
            this.animationState = "rest";
          })
        );
      }),
      widget.tickLength
    );
  }),
  widget.tickDelay
);

We're at a point where we need to update the renderer housing this logic and I thought I would attempt to do it with a functional component.

Criteria

The four animation states we need to switch between are tick, exit, enter, and rest; while each of our widgets has CSS animations that are tied to a className of status_[animationState].

Each of these animation states needs its own duration that is user-configurable.

Attempts

First, I tried to implement something similar to what we see above in a useEffect and setState. The downside here is that the useEffect is new every render so I wasn't able to track timeouts effectively.

The second thing I tried, was to leverage the useInterval hook that Dan Abramov created. The downside here is that the callback is a ref so it never changes, which means I can't pass it a different callback for each step/duration.

Finally, I settled on a mix of refs for persistence and a custom hook to handle the setTimeouts.

Research

I thought I would be able to jam the setTimeouts in an array and use a for of loop to run them, one by one. This ended up running them "out of order."

I ended up coming across two solutions that helped me piece it together, How to resolve a useReducer's dispatch function inside a promise in ReactJS and Why Using reduce() to Sequentially Resolve Promises Works.

The idea here is that each is wrapped in a Promise and added to an array where we can loop over them in a reduce, awaiting the previous Promise before starting the next.

This worked like a charm!

Creating the `useStepInterval` Hook

The custom hook is where the magic lies. We start with two useStates, one for the animation state and another to determine if the animation cycle is running. We'll return the status and the ability to set isRunning so our component can turn it on/off.

import { useState, useEffect, SetStateAction, Dispatch } from "react";

// steps through the heartbeat animation states
export function useStepInterval<StatusType>(
  initialStatus: StatusType,
  steps: { status: StatusType; delay: number }[]
): { status: StatusType; setIsRunning: Dispatch<SetStateAction<boolean>> } {
  const [status, setStatus] = useState<StatusType>(initialStatus);
  const [isRunning, setIsRunning] = useState(false);

  return { status, setIsRunning };
}

Next, we set up a useEffect that will watch isRunning to see if the cycle should start. In this hook, we'll have two functions, one that sets up the Promises and another that will run the reduce over the Promises.

import { useState, useEffect, SetStateAction, Dispatch } from "react";

// steps through the heartbeat animation states
export function useStepInterval<StatusType>(
  initialStatus: StatusType,
  steps: { status: StatusType; delay: number }[]
): { status: StatusType; setIsRunning: Dispatch<SetStateAction<boolean>> } {
  const [status, setStatus] = useState<StatusType>(initialStatus);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    function setUpPromise(step, index): Promise<void> {
      // we're returning a promise that will clean up after itself
      return new Promise((resolve, reject) => {
        const wait = setTimeout(() => {
          // clear previous setTimeout
          clearTimeout(wait);

          // set the status of the step
          setStatus(step.status);

          // if it's the last item, stop the cycle
          if (index === steps.length - 1) {
            setIsRunning(false);
          }

          resolve();

          // use the duration of the previous to this step
        }, step.delay);
      });
    }

    // using a reduce allows us to wait for the previous promise to resolve
    // before starting the next more info at
    // https://css-tricks.com/why-using-reduce-to-sequentially-resolve-promises-works/
    function stepThrough() {
      return steps.reduce(async (previousPromise, nextStep, index) => {
        await previousPromise;
        return setUpPromise(nextStep, index);
      }, Promise.resolve());
    }

    if (isRunning) {
      stepThrough();
    }
  }, [isRunning]);

  return { status, setIsRunning };
}

Using the `useStepInterval` Hook

In our component we can now run our hook and have a ref that catches the ping from our player service, which sets isRunning to true, starting the animation cycle.

type AnimationState = "tick" | "exit" | "enter" | "rest";

// these steps can be inside the app if the values are dynamic
const ANIMATION_STEPS: { status: AnimationState; delay: number }[] = [
  { status: "tick", delay: 0 },
  { status: "exit", delay: 300 },
  { status: "enter", delay: 1500 },
  { status: "rest", delay: 300 }
];

export function MyComponent() {

  const { status, setIsRunning } = useStepInterval<AnimationState>(
    "rest",
    ANIMATION_STEPS
  );

  // this is the callback that receives the type of player status
  // that's coming in and fires a our running state
  const playerCallback = useRef((playerStatus) => {
    switch (playerStatus) {
      case "ping":
        setIsRunning(true);
        break;

      case "idle":
      default:
        break;
    }
  });

Now we have an animation cycler that can be started from our component, and the best part is, we can have our component be functional 😀.

I definitely learned more about refs and how to work with promises during this feature. Hopefully, there will some more refactors to a functional component that can challenge other areas.

Animated SVG Water Pictorial Fraction in Svelte

Joel Turner — Tue, 27 Apr 2021 06:13:52 +0000

One of my favorite charts in data visualization is Pictorial Fraction. It's essentially a bar chart as a shape that can be partially filled or used as a small multiple to represent the ratio.

What We're Building

Why Svelte.js?

I've been excited to check out svelte.js for a while and this winter break gave me some time to try it out. It seemed especially great as a way to run data vis in a lightweight way. This was a way to learn a little more about it and see I can make multiple components.

The Pieces

The pictorial fraction is a combination of SVG pieces that come together to show and mask elements.

Fill Area

Let's create a new file and call it PictorialFraction.svelte. In here, we'll set up our SVG and add a rectangle with a color of your choosing. This will be the color that will show up in the droplet.

<svg xmlns="http://www.w3.org/2000/svg" width='264.5' height='264.5'>
  <rect width='264.5' height='264.5' fill="#ff9900" />
</svg>

Now we can add some variables for width and height. In svelte, we export these in the script tag. We can also pass those variables into the elements.

<script>
  export let width;
  export let height;
</script>

<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height}>
  <rect width={width} height={height} fill="#ff9900" />
</svg>

💡 Svelte tip: we can use a shortcut to add those variables since they have the same name as the attributes. Instead of <svg width={width} /> we can use <svg width />.

Let's position the rectangle using transform: translate(0, 20px);. This should allow us to slide the rectangle up using the y position, giving our mask the feeling that the water drop is filling up. We're using the style attribute for transform rather than the transform attribute on rect because Safari doesn't animate the attribute in the same way Chrome and Firefox do, making it choppy.

<script>
  export let width;
  export let height;
</script>

<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height}>
  <rect width={width} height={height} style={`transform: translate(0, 20px);`} fill="#ff9900" />
</svg>

Now we'll create the ripple shape that will be placed on top of our rectangle to give a "fluid" feel. For this, we'll use a path element and animate it with css.

<path class='water' d="M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z"/>

That creates the shape, and now we'll position it to be on top of the rectangle. To do this we'll need to know where the rectangle will be positioned, and we'll wrap the path in a group that's positioned based on rect's y position.

<script>
  export let width;
  export let height;
</script>

<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height}>
  <rect width={width} height={height} style={`transform: translate(0, 20px);`} fill="#ff9900" />

  <g class='water-container'  style={`transform: translate(0, 0);`}>
    <path class='water' d="M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z"/>
  </g>
</svg>

Let's add our styles to get the ripples animating in a smooth way. To do this we can add a <style> tag underneath our <script> tag.

<script>
  export let width;
  export let height;
</script>

<style>
  rect,
  .water-container {
    transition: transform 500ms;
  }

  .water {
    animation: ripple 1.4s infinite linear;
    fill: #ff9900;
  }

  @keyframes ripple {
    100% {
      transform: translate3d(-105%, 0, 0);
    }
  }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height}>
  <rect width={width} height={height} style={`transform: translate(0, 20px);`} fill="#ff9900" />

  <g class='water-container'  style={`transform: translate(0, 0);`}>
    <path class='water' d="M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z"/>
  </g>
</svg>

We declare a keyframes animation and let .water leverage that in an infinite loop. We're adding a transition to the rectangle and container for the ripple to make sure it slides up and down smoothly.

Mask Area

Now we can work on the mask area which will give us the water drop shape. We're going to use a clipPath with a path shaped as a water droplet. We'll apply the clipPath to a group that wraps the rectangle and ripple to mask out anything outside the water droplet shape.

We fill the droplet path with black to make the mask full opacity. We can then add another droplet of a different color so that we can have a different background color for our empty section.

<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height}>
  <clipPath id='mask_shape'>
    <path d="M132.281 264.564c51.24 0 92.931-41.681 92.931-92.918 0-50.18-87.094-164.069-90.803-168.891L132.281 0l-2.128 2.773c-3.704 4.813-90.802 118.71-90.802 168.882.001 51.228 41.691 92.909 92.93 92.909z" fill="#000000" />
  </clipPath>

  <path d="M132.281 264.564c51.24 0 92.931-41.681 92.931-92.918 0-50.18-87.094-164.069-90.803-168.891L132.281 0l-2.128 2.773c-3.704 4.813-90.802 118.71-90.802 168.882.001 51.228 41.691 92.909 92.93 92.909z" fill="#555"/>

  <g clip-path='url(#mask_shape)'>
    <rect width={width} height={height} style={`transform: translate(0, 20px);`} fill="#ff9900" />

    <g class='water-container' style={`transform: translate(0, 0);`}>
      <path class='water' d="M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z"/>
    </g>
  </g>
</svg>

Fill

Cool, now that we have the mask and bar set up we can configure the logic for the filling of the droplet. For this, we'll create a variable of ratio and a reactive declaration that updates when props change. We'll call our reactive declaration offsetY and it will be based on ratio and height.

<script>
  export let width;
  export let height;
  export let ratio;

  // offset should help the bar "fill" from the bottom
  $: offsetY = height - height * ratio;
</script>

Now we'll pass that offset to the rectangle and ripple container, so they'll be positioned together. If the ratio is zero, the y should be the negative height of the ripple path which is 19px.

<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewbox='0 0 264 264' >
  <clipPath id='mask_shape' >
    <path d="M132.281 264.564c51.24 0 92.931-41.681 92.931-92.918 0-50.18-87.094-164.069-90.803-168.891L132.281 0l-2.128 2.773c-3.704 4.813-90.802 118.71-90.802 168.882.001 51.228 41.691 92.909 92.93 92.909z" fill="#000000" />
  </clipPath>

  <path d="M132.281 264.564c51.24 0 92.931-41.681 92.931-92.918 0-50.18-87.094-164.069-90.803-168.891L132.281 0l-2.128 2.773c-3.704 4.813-90.802 118.71-90.802 168.882.001 51.228 41.691 92.909 92.93 92.909z" fill="#555"/>

  <g clip-path='url(#mask_shape)'>
    <rect width={width} height={height} style={`transform: translate(0, ${offsetY}px)`} fill="#ff9900" />

    <g class='water-container' style={`transform: translate(0, ${ratio === 0 ? offsetY : offsetY - 19}px);`}>
      <path class='water' d="M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z"/>
    </g>
  </g>
</svg>

Using the component

To use this component we import it and pass it our width, height, and ratio. Let's give it a height and width of 264.5px and a ratio of 0.5 (50%). Update the ratio to see the droplet fill or drain smoothly.

<script>
  import PictorialFraction from "./PictorialFraction.svelte";
</script>

<main>
  <PictorialFraction width={264.5} height={264.5} ratio={0.5} />
</main>

Conclusion

Thanks for following along! We now have a droplet component that we can use in our svelte app. We can add ways to control the ratio and make it more interactive. To add buttons to control the increase/decrease, check out the example on codesandbox

Create a Single Line Chart in React with @vx

Joel Turner — Sun, 26 Jul 2020 00:00:00 +0000

We’ve built a bar chart in react using the data vis library @vx. The next chart that we can build to help tell our data’s story is a line chart. Line charts are great for showing trends over time and that’s what we’ll build today.

What We're Building TL;DR

Requirements

[ ] Display time along the x-axis
[ ] Display metrics along the y-axis
[ ] Show each data point on the line

Packages

Let's start by getting the packages we need from @vx. We'll need shapes, scale, axis, gradient (easy background color), and some mock data to get started.

  yarn add @vx/shapes @vx/group @vx/scale @vx/axis @vx/curve @vx/gradient @vx/text

  npm install @vx/shapes @vx/group @vx/scale @vx/axis @vx/curve @vx/gradient @vx/text --save

Data

Now that we have our packages we can start stubbing out our data. We're going to use some mock data to get started so feel free to create your own or use this data set.

const defaultData1 = [
  {
    miles: 5.6,
    date: 1595228400000,
  },
  {
    miles: 3.2,
    date: 1595314800000,
  },
  {
    miles: 7.9,
    date: 1595401200000,
  },
  {
    miles: 4.1,
    date: 1595487600000,
  },
  {
    miles: 9.3,
    date: 1595574000000,
  },
]

Now that we have the shape of our data we can add some helper functions that will access those items. This will help us add the date across the x-axis and the miles along the y-axis. We'll see how these come into play a little later.

// accessors return the miles and date of that data item
const x = (d) => d.miles
const y = (d) => d.date

Scales

We can now define the max height and max-width that we would like our chart to be. Our component will take height and width as props and then we can add a little padding. This will help us as we define our scales for this chart.

// bounds
const xMax = width - 120
const yMax = height - 80

The scales are where the magic really happens. It all comes down to domain and range. The general rule of thumb based on my understanding is that domain is the lowest and highest data points. The range is the pixel range we would like to plot these data points on.

In our scales below, we can see that range (rangeRound) is from 0 to xMax which is the height bound of our chart. @vx gives us a helper, rangeRound, that prettifies the numbers.

The domain is an array of all data points which resolves to lowest (4.1) and highest (9.3) of the data set.

const xScale = scaleTime({
  rangeRound: [0, xMax],
  domain: [Math.min(...data.map(x)), Math.max(...data.map(x))],
})

const yScale = scaleLinear({
  rangeRound: [0, yMax],
  domain: [Math.max(...data.map(y)), 0],
})

Building our Line Chart

Now we can start building the component. Let's start by setting up the SVG that will hold our line and axes.

import React from "react"
import { Group } from "@vx/group"
import { scaleTime, scaleLinear } from "@vx/scale"

// dimensions
const height = 500
const width = 800

// accessors
const x = (d) => new Date(d.date).valueOf()
const y = (d) => d.miles

const LineChart = ({ data = [] }) => {
  // bounds
  const xMax = width - 120
  const yMax = height - 80

  const xScale = scaleTime({
    rangeRound: [0, xMax],
    domain: [Math.min(...data.map(x)), Math.max(...data.map(x))],
  })

  const yScale = scaleLinear({
    rangeRound: [0, yMax],
    domain: [Math.max(...data.map(y)), 0],
  })

  return (
    <svg width={width} height={height}>
      <Group top={25} left={65}></Group>
    </svg>
  )
}

export default LineChart

Looks good. The first thing we'll add is the y-axis. To do this we use AxisLeft from @vx. We need to pass it our yScale and we'll give it a few other props for styling. The numTicks limits the number of values shown on the y-axis and label is what will display along the axis.

Then we'll add the AxisBottom that has similar props to to AxisLeft. The top is where it should start vertically from the top, which is the chart height in this case. The labelOffset prop dictates how much space is in between the ticks and the axis label. It should look like this:

import React from "react"
import { Group } from "@vx/group"
import { scaleTime, scaleLinear } from "@vx/scale"
import { AxisLeft, AxisBottom } from "@vx/axis"

...

<Group top={25} left={65}>
  <AxisLeft scale={yScale} numTicks={4} label="Miles" />
  <AxisBottom scale={xScale} label="Day" labelOffset={15} numTicks={5} top={yMax} />
</Group>

[x] Display time along the x-axis
[x] Display metrics along the y-axis

Now we can add the line to the chart using LinePath from @vx/shapes and we'll pass it curveLinear from @vx/curve to dictate its shape.

import React from "react"
import { Group } from "@vx/group"
import { scaleTime, scaleLinear } from "@vx/scale"
import { AxisLeft, AxisBottom } from "@vx/axis"
import { LinePath } from "@vx/shape"
import { curveLinear } from "@vx/curve"

...

<Group top={25} left={65}>
  <AxisLeft scale={yScale} numTicks={4} label="Miles" />
  <AxisBottom scale={xScale} label="Day" labelOffset={15} numTicks={5} top={yMax} />
  <LinePath
    data={data}
    curve={curveLinear}
    x={(d) => xScale(x(d))}
    y={(d) => yScale(y(d))}
    stroke="#222222"
    strokeWidth={1.5}
  />
</Group>

It's looking like a nice, one-line chart now. We might want to add some dots to represent the data points. To do that we'll map over the data items and use the circle element positioned using each item's points.

<Group top={25} left={65}>
  <AxisLeft scale={yScale} numTicks={4} label="Miles" />
  <AxisBottom scale={xScale} label="Day" labelOffset={15} numTicks={5} top={yMax} />
  {data.map((point, pointIndex) => (
    <circle
      key={pointIndex}
      r={5}
      cx={xScale(x(point))}
      cy={yScale(y(point))}
      stroke="#222222"
      fill="#222222"
      fillOpacity={0.5}
    />
  ))}
  <LinePath
    data={data}
    curve={curveLinear}
    x={(d) => xScale(x(d))}
    y={(d) => yScale(y(d))}
    stroke="#222222"
    strokeWidth={1.5}
  />
</Group>

[x] Show each data point on the line

Awesome, we fulfilled all of our requirements for this one-line chart. Here is all the code together.

import React from "react"
import { Group } from "@vx/group"
import { scaleTime, scaleLinear } from "@vx/scale"
import { AxisLeft, AxisBottom } from "@vx/axis"
import { LinePath } from "@vx/shape"
import { curveLinear } from "@vx/curve"

// dimensions
const height = 500
const width = 800

// accessors
const x = (d) => new Date(d.date).valueOf()
const y = (d) => d.miles

const LineChart = ({ data = [] }) => {
  // bounds
  const xMax = width - 120
  const yMax = height - 80

  const xScale = scaleTime({
    rangeRound: [0, xMax],
    domain: [Math.min(...data.map(x)), Math.max(...data.map(x))],
  })

  const yScale = scaleLinear({
    rangeRound: [0, yMax],
    domain: [Math.max(...data.map(y)), 0],
  })

  return (
    <svg width={width} height={height}>
      <Group top={25} left={65}>
        <AxisLeft scale={yScale} numTicks={4} label="Miles" />
        <AxisBottom scale={xScale} label="Day" labelOffset={15} numTicks={5} top={yMax} />
        {data.map((point, pointIndex) => (
          <circle
            key={pointIndex}
            r={5}
            cx={xScale(x(point))}
            cy={yScale(y(point))}
            stroke="#222222"
            fill="#222222"
            fillOpacity={0.5}
          />
        ))}
        <LinePath
          data={data}
          curve={curveLinear}
          x={(d) => xScale(x(d))}
          y={(d) => yScale(y(d))}
          stroke="#222222"
          strokeWidth={1.5}
        />
      </Group>
    </svg>
  )
}

export default LineChart

Bonus

For better sizing/resizing we can use a resize observer hook in our component. I like to use the package use-resize-observer for this. Let's see how we can use it in our component.

import React from "react"
import { Group } from "@vx/group"
import { scaleTime, scaleLinear } from "@vx/scale"
import { AxisLeft, AxisBottom } from "@vx/axis"
import { LinePath } from "@vx/shape"
import { curveLinear } from "@vx/curve"
import useResizeObserver from "use-resize-observer"

// dimensions
const height = 500
const width = 800

// accessors
const x = (d) => new Date(d.date).valueOf()
const y = (d) => d.miles

const LineChart = ({ data = [] }) => {
  const { ref, width = 1, height = 1 } = useResizeObserver()

  // bounds
  const xMax = width - 120
  const yMax = height - 80

  const xScale = scaleTime({
    rangeRound: [0, xMax],
    domain: [Math.min(...data.map(x)), Math.max(...data.map(x))],
  })

  const yScale = scaleLinear({
    rangeRound: [0, yMax],
    domain: [Math.max(...data.map(y)), 0],
  })

  return (
    <div style={{ width: "100%", height: "100%" }} ref={ref}>
      <svg width={width} height={height}>
        <Group top={25} left={65}>
          <AxisLeft scale={yScale} numTicks={4} label="Miles" />
          <AxisBottom scale={xScale} label="Day" labelOffset={15} numTicks={5} top={yMax} />
          {data.map((point, pointIndex) => (
            <circle
              key={pointIndex}
              r={5}
              cx={xScale(x(point))}
              cy={yScale(y(point))}
              stroke="#222222"
              fill="#222222"
              fillOpacity={0.5}
            />
          ))}
          <LinePath
            data={data}
            curve={curveLinear}
            x={(d) => xScale(x(d))}
            y={(d) => yScale(y(d))}
            stroke="#222222"
            strokeWidth={1.5}
          />
        </Group>
      </svg>
    </div>
  )
}

export default LineChart

Beginning Web Accessibility in React

Joel Turner — Wed, 29 Jan 2020 00:00:00 +0000

I recently decided to dive into learning accessibility on the web. So many of the great developers that I follow on Twitter advocate for accessibility and I figured it was time to see what it would take. So far, I love it.

If you’re interested in web accessibility I would suggest Gatsby, which gives a lot of win out of the gate and @MarcySutton who is an accessibility advocate and has a package, no-mouse-days that can disable the cursor on your site or app for a day. Nothing helps me see the cracks like taking away my comfort zone. Time to grow!

There are a lot of resources online to help us learn so there’s nothing new in this post. I just wanted to document what I have found and learned so far.

Linting Rules for a11y

One of the best ways to get some useful suggestions is to add the plugin, eslint-plugin-jsx-a11y to your project. After I got it installed my editor lit up like New York City at night. Whew, I had some work to do.

WAI-ARIA

WAI-ARIA is explained well from MDN:

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a specification written by the W3C, defining a set of additional HTML attributes that can be applied to elements to provide additional semantics and improve accessibility wherever it is lacking.

The three main features are Roles, Properties, and States.

Roles

It’s best to use semantic elements for desired actions. A good example is to use the button element for a user action. If we are using a different element to perform the role of a button we can use a role to help out. An example might be an svg icon with an onClick method.

<svg viewBox="0 0 128 128" onClick="{myOnClickFn}" role="button">
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" />
</svg>

Having the role of button tells the screen reader that the intention of this icon is to be a button.

Here’s a list from MDN of all the ARIA roles.

Properties

Properties let us give an element extra meaning if needed. A common example is in a form input. We may have a visual indicator to show that an input is required. Now we can add a data attribute of aria-required="true" to let the user know that the input needs to be valid.

<form onSubmit="{onSubmit}">

  <label for="fieldName">Name</label>
  <input name="fieldName" type="text" />

  <label for="fieldEmail">Email</label>
  <input name="fieldEmail" type="email" aria-required="true" />

</form>

States

This is much like states in javascript. We may have a disabled input that will become enabled after validation of a previous field. We can specify the disabled state with aria-disabled="true".

<form onSubmit="{onSubmit}">

  <label for="fieldName">Name\</label>
  <input name="fieldName" type="text" />

  <label for="fieldEmail">Email</label>
  <input name="fieldEmail" type="email" aria-required="true" />

  <label for="fieldSubscribe">Subscribe</label>
  <input name="fieldSubscribe" type="checkbox" checked="false" aria-disabled="true" />

</form>

`tabIndex`

This is one that I vaguely knew about. It turns out that there are three types of values that it can take.

tabindex="-1" negative one or less allows elements to get the focus programmatically instead of through sequential keyboard navigation
tabindex="0" zero allows non-tabbable elements to become tabbable in sequential order by adding focus to them in the document’s source order
tabindex="1" one or more makes the elements tabbable in the specific index order represented by this number

`onKeypress` handler

For all the user clickable elements we can also provide an onKeyPress that handles an Enter or Return key on a clickable element. We can use a function to check for that keypress and if it’s is the key we’re looking for we can pass the event to the onClick function.

Here’s a great snippet from John Luke Garofalo’s post about React accessibility:

Make React Navigation Accessible Again

John Luke Garofalo ・ Aug 11 '17

#react #a11y #softwareengineering #tab

// attach to an onKeyPress to handle Enter keyboard
// presses in the same way as onClick

export const handleEnterKeyPress = onClick => event => {

  if (event.key === "Enter") {
    onClick(event)
  }

}

Here’s that snippet in TypeScript:

type HandleKeyPress = (
  onClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>
) => React.KeyboardEventHandler<HTMLElement | SVGElement>

// attach to an onKeyPress to handle Enter keyboard clicks in the same way as onClick

export const handleEnterKeyPress: HandleKeyPress = onClick => event => {

  if (event.key === "Enter") {
    onClick(event)
  }

}

Conclusion

Hopefully, this helps you dip your toes into the accessibility pond. I have a lot more to learn and implement but I feel like this was a good start. I would love to hear your resources if you have started down this road as well.

Front-End Checklist for Ticket Completion

Joel Turner — Fri, 10 Jan 2020 00:00:00 +0000

In the first post of the series,

My Productivity Practices for Front End Development

Joel Turner ・ Jan 10 '20

#productivity #tools #todo #setup

I laid out some of my productivity tools and processes in a broad view. I'll now dive into some of the details for tickets.

On our dev team, we are assigned tickets that may be features or bug fixes. I fumbled through the lifecycle of a ticket a few times where I missed things, forgot things, or didn’t refactor where I should. After that, I started to put together a checklist that I use for most tickets.

TL;DR: Here’s the list without description:

Clean up debugger/trace/etc
Clean up logs
Search for TODO’s in code
Refactor where needed
Write tests
Make sure test coverage hasn’t gone down
Add translate functions
Verify on published url
Verify in builder
Update Jira
Notify PMs
Create MR

My Current Checklist

I currently have these as tasks in Todoist where I can duplicate for each new ticket. Sometimes I’ll create sub-tasks on a few of these if there is more to be done on that specific issue.

Clean up debugger/trace/etc

A reminder to delete any debugger; or trace() (from MobX) that are left in the code.

Clean up logs

Remove any console.logs and console.groups that may still be there.

Search for TODO’s in code

I like to leave myself notes as I’m working through a feature or bug. They help me remember to resolve any of the todos that are left.

I usually add my initials to my todos TODO JT so I can find them more easily. Todo Tree is a great VS Code extension that has been a big help for this.

Refactor where needed

There is inevitably some back and forth about how a feature or bug should be solved so there may be some prototype code that can be refactored.

Write tests

I could write these tests upfront but I haven’t gotten into that habit yet. I try to make sure I catch the cases we need to cover based on newly added or deleted code.

Make sure test coverage hasn’t gone down

This reminds me to run test coverage and make sure I haven’t lowered our coverage.

Add translate functions

This runs a scanner to add any new UI text to our language files for translation. This will eventually be part of the CI but for now, I need to remind myself.

Verify on published URL

We publish the URLs of completed visualizations. It’s important to make sure that nothing regressed on the running URL and the feature is working correctly.

Verify in our builder UI

This is our UI where customers build their visualizations. This is to make sure the fix/feature is working as expected. We also need to make sure it didn’t cause any regressions.

Update Jira

Make sure the ticket get’s moved through the Jira columns. This signifies QA that it’s ready to be tested.

Notify PMs

Let the project manager and product manager know that the ticket is complete and ready for their review.

Create MR

Reminder to create a Merge Request so I can start getting feedback from code reviews.

Checklists FTW

This checklist has helped me be more consistent with my contributions. I would love to hear how others are using checklists or workflows through individual tickets.

My Productivity Practices for Front End Development

Joel Turner — Thu, 09 Jan 2020 00:00:00 +0000

A big part of me getting things done are the systems that I have in place. Today I'll talk about a few of the systems that I'm currently using.

Window Management

I'm using Better Touch Tools (BTT) to snap my windows to specific areas on my screens. BTT as the ability to snap a window to a quarter or half of the screen by pressing the window to the corner or edge of the screen.

This is incredibly helpful for diffing or creating a dashboard. I use the custom window size and position for a few of my windows. Since I use a 2 screen set up I usually have my code (VS Code), terminal (iTerm2), and dev tools on the larger screen.

Desktop Spaces

I position the rest of my apps on my laptop spaces. I've tried having all the apps in the same space and just using the app switcher to toggle between the apps but it felt a little too unorganized for me.

I now have a screen for certain jobs. Here's the breakdown of my current setup by space.

Screen 1 (just one space)

Code
1. VS Code
2. dev tools (Chrome, Firefox)
3. iTerm2

Screen 2 (6 spaces)

Personal design (Figma)
Personal
1. Personal project dev browser
2. Music (Spotify)
Communication/Tracking
1. Slack
2. Todoist
Git manager (GitKraken)
Work project dev browsers
Work design (Slack, Abstract)

I love that everything has its place and I can just swipe to that space or use the app switcher for quick access. After about a week of using this setup, I knew where everything was without thinking about it. That had sped up my project speed by quite a bit while reducing my mental fatigue.

App Launching

Alfred is my go to for app launching and switching. It might be one of the most used apps on my computer currently.

Clipboard History

This is one of my favorite parts of Alfred. I use the history all the time. Sometimes I use it to save my text in a form so I don't lose it on some save glitch. Being able to grab multiple pieces from a document and paste each one. It's nice to be able to go back and grab something that I didn't know that I would need again but it's there in history.

Expanding Text

Expanding text through keyboard shortcuts can speed up so many redundant tasks.

Until recently I was using TextExpander 4 (just before they moved to a subscription model) and have moved all my shortcuts to Alfred. Since I was already using and loving Alfred for its other powerful features I decided to go all-in with it for snippets. One of the expansions that I use the most is for console.log(). I can type 2log and it will prompt me for input and fill in console.log("prompText", prompText).

Simple snippets are a breeze with Alfred. Form snippets are a little bit of work but still easy enough.

Task List

I use Todoist for my task list. It is one of the most valuable tools in my tool belt. I love that it is seamless on all my devices and it's set up well for GTD. I usually dump/collect my ideas, todos, and projects into the inbox and sort them out later when I'm in the project management zone.

One feature I use quite a bit is the template copy. When I get assigned a new ticket I copy my ticket checklist and rename it with the ticket number. This helps me make sure that I get everything done before handing it off to QA. You can see more details about that checklist in part 2 of this series.

ZSH/Bash Alias

I have a few helpful aliases set up for quickly switching directories, running tests, starting projects, etc. Here are a few of them:

alias nis="npm install; npm start"
alias ns="npm start"
alias nt="npm run test"
alias nsstory="npm run storybook"
alias grun="./gradlew bootrun"
alias gtest="./gradlew test"
alias jmt="cd ~/Desktop/Dev/joelmturner"

I would love to hear about how your setup works for you. Let me know on Twitter.

Create an Avatar Component in Gatsby with TypeScript Part 3: Adding Types

Joel Turner — Wed, 08 Jan 2020 00:00:00 +0000

We left off with our avatar component working using Gatsby Image and still able to receive an image URL. Now, let's look at what it would take to type this component. I like to use type instead of interface for the props. You can read more about the difference between type and interface if you'd like.

The props type will look something like this:

{...}
type AvatarProps = {
  url?: string;
  altText?: string;
  title?: string;
  user?: "monster1" | "monster2";
}

function Avatar(props: AvatarProps) {
{...}

The cool part here is that the user prop can be typed to match the graphql alias names. This helps anyone consuming this component know the values they can pass.

Let's take a look at typing our data variable. We know the shape of what we expect because of our graphql. We just need to provide the correct typing at the childImageSharp level. Luckily Gatsby Image has a type of FixedObject that can help us out here. We pass the type to the static query hook useStaticQuery<Data>(graphql to signify that we expect the return to be Data.

{...}
import Img, { FixedObject } from "gatsby-image"
{...}

type Data = {
  monster1: {
    childImageSharp: {
      fixed: FixedObject;
    };
  };
  monster2: {
    childImageSharp: {
      fixed: FixedObject;
    };
  };
}

function Avatar(props: AvatarProps) {
  const data = useStaticQuery<Data>(graphql`
{...}

Let's refactor the redundancy in the Data type.

type ChildImage = {
  childImageSharp: {
    fixed: FixedObject;
  };
}

type Data = {
  monster1: ChildImage;
  monster2: ChildImage;
}

Cool, now we should have something like this:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img, { FixedObject } from "gatsby-image"

type AvatarProps = {
  url?: string;
  altText?: string;
  title?: string;
  user?: "monster1" | "monster2";
}

type ChildImage = {
  childImageSharp: {
    fixed: FixedObject;
  };
}

type Data = {
  monster1: ChildImage;
  monster2: ChildImage;
}

function Avatar(props: AvatarProps) {
  const data = useStaticQuery<Data>(graphql`
    query {
      monster1: file(relativePath: { eq: "monster-01-headshot.png" }) {
        childImageSharp {
          fixed(width: 75, height: 75) {
            ...GatsbyImageSharpFixed
          }
        }
      }
      monster2: file(relativePath: { eq: "monster-02-headshot.png" }) {
        childImageSharp {
          fixed(width: 75, height: 75) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)

  const { url, altText, title, user } = props
  const styles = {
    width: "75px",
    height: "75px",
    borderRadius: "50%",
  }

  if (url) {
    return <img style={styles} src={url} alt={altText} title={title} />
  }

  return <Img style={styles} fixed={user && data[user].childImageSharp.fixed} alt={altText} title={title} />
}

export default Avatar

There we go! Now our avatar component is ready for prime time. Please let me know if you have any questions or would like to share other ways to solve the same requirements. Thanks for following along!

Create an Avatar Component in Gatsby with TypeScript: Part 2 – Gatsby Image

Joel Turner — Tue, 07 Jan 2020 00:00:00 +0000

In Part 1 we put together a simple avatar component that can receive an image URL and render it out as around image.

To get the full benefit of Gatsby Image we need to make sure our image is pulled into our graphql. We'll need to install a couple of plugins to help us here. gatsby-image, gatsby-transformer-sharp, gatsby-plugin-sharp will be needed.

Let's install gatsby-image

npm install --save gatsby-image

Then, if you don't already have gatsby-transformer-sharp and gatsby-plugin-sharp we can install them.

npm install --save gatsby-transformer-sharp gatsby-plugin-sharp

Then in your gatsby-config.js:

plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]

We'll need a source plugin set up as well. For this example, we're going to use gatsby-source-filesystem. Here is what our gatsby-config might look like, assuming our images are in src/assets.

const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `assets`,
        path: path.join(__dirname, `src`, `assets`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

Now let's drop our image file into our assets folder and create a query for it. We can use the hook for StaticQuery in our component which will make the image available through the data prop. Since we know the size of the image we can add those dimensions in our graphql query so the browser doesn't have to do all the work.

  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "monster-01-headshot.png" }) {
        childImageSharp {
          fixed(width: 75, height: 75) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)

Then we need to add the Img component from gatsby-image so that it can do its magic.

import Img from "gatsby-image"

function Avatar(props) {
  {...}
  return (
    <Img
      style={styles}
      fixed={data.placeholderImage.childImageSharp.fixed}
      alt={altText}
      title={title} />
  )
}

Now let's put it all together.

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

function Avatar(props) {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "monster-01-headshot.png" }) {
        childImageSharp {
          fixed(width: 75, height: 75) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)

  const {url, altText, title} = props;
  const styles = {
    width: '75px',
    height: '75px',
    borderRadius: '50%'
  }

  return (
    <Img
      style={styles}
      fixed={data.placeholderImage.childImageSharp.fixed}
      alt={altText}
      title={title} />
  )
}

export default Avatar

We're still missing the ability to pass a URL to our avatar component so let's add that back in. We can return a regular img element if we get a URL. Using fixed will be better since we're not worried about fluid mode with this component.

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

function Avatar(props) {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "monster-01-headshot.png" }) {
        childImageSharp {
          fixed(width: 75, height: 75) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)

  const {url, altText, title} = props;
  const styles = {
    width: '75px',
    height: '75px',
    borderRadius: '50%'
  }

  if (url) {
    return (
      <img
        style={styles}
        src={url}
        alt={altText}
        title={title} />
    );
  }

  return (
    <Img
      style={styles}
      fixed={data.placeholderImage.childImageSharp.fixed}
      alt={altText}
      title={title} />
  )
}

export default Avatar

This allows us to call avatar without us needing to pass a prop of the image URL. If you need multiple avatar images for your team you can add them to the quite and pass a user prop down and we'll grab that from the query. We can name the queries to match the users like so:

function Avatar(props) {
  const data = useStaticQuery(graphql`
      query {
        monster1: file(relativePath: { eq: "monster-01-headshot.png" }) {
          childImageSharp {
            fixed(width: 75, height: 75) {
              ...GatsbyImageSharpFixed
            }
          }
        }
        monster2: file(relativePath: { eq: "monster-02-headshot.png" }) {
          childImageSharp {
            fixed(width: 75, height: 75) {
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    `)

  const {url, altText, title, user} = props;
  const image = data[user].childImageSharp.fixed;
  {...}

That way we can pass monster1 or monster2 in our user prop to have it render that monster.

<Avatar
    alText='Monster P. Whittington portrait'
    title='Monster P. Whittington'
    user='monster1' />

<Avatar
    alText='Mons T. Cobblepot portrait'
    title='Mons T. Cobblepot'
    user='monster2' />

Nice, now we can type it so it's easier to know what name can be used and to see if our structure is correct if we ever need to edit it.

Bar Chart in React with @VX

Joel Turner — Tue, 17 Sep 2019 00:00:00 +0000

Data visualization is steadily becoming more valuable to companies as they try to understand all the data they have coming in. There are a lot of different solutions for data visualization in javaScript, d3 being one of the most popular.

When working in React it can be frustrating to handle d3 since they tend to compete for the DOM. There is a solution that we've been using for a little while at Sprinklr to help with this.

That solution is the library @vx. It's a set of base components in React that wrap d3, made to build a charting library. There are some great helpers rolled up in the components that make working with SVG's much better. It hasn't been released as stable quite yet but it works for our purposes.

Today we're going to focus on building a bar chart component. Here are the requirements for this component.

[ ] Can take an array of single dimension data
[ ] Render each item on a shared scale
[ ] Should have an x and y-axis

Packages

Let's start by getting the packages we need from @vx. We'll need shapes, scale, axis, gradient (easy background color), and some mock data to get started.

  yarn add @vx/shapes @vx/group @vx/scale @vx/axis @vx/gradient

  npm install @vx/shapes @vx/group @vx/scale @vx/axis @vx/gradient --save

Data

Now that we have our packages we can start stubbing out our data. We're going to use some mock data to get started so feel free to create your own or use this data set.

const defaultData1 = [
  {
    label: "Happy",
    value: 4000
  },
  {
    label: "Sad",
    value: 2000
  },
  {
    label: "Angry",
    value: 3000
  },
  {
    label: "Joyful",
    value: 4500
  },
  {
    label: "Anxious",
    value: 7000
  }
];

Now that we have the shape of our data we can add some helper functions that will access those items. This will help us add the labels across the x-axis and the values along the y-axis. We'll see how these come into play a little later.

// accessors return the label and value of that data item
const x = d => d.label;
const y = d => d.value;

Scales

// bounds
const xMax = width - 80;
const yMax = height - 80;

The scales are where the magic really happens. It took me a while to understand what the domain and range in d3 were all about. The general rule of thumb based on my understanding is that domain is the lowest and highest data points. The range is the pixel range we would like to plot these data points on.

In our scales below, we can see that range (rangeRound) is from 0 to xMax which is the height bound of our chart. @vx gives us a helper, rangeRound, that prettifies the numbers.

The domain is an array of all data points which resolves to lowest (2000) and highest (7000) of the data set.

The padding is another helper from @vx that adds banding or space between and the width of the bars for us.

// scales
const xScale = scaleBand({
  rangeRound: [0, xMax],
  domain: data.map(x),
  padding: 0.4
});

const yScale = scaleLinear({
  rangeRound: [0, yMax],
  domain: [Math.max(...data.map(y)), 0]
});

Bar Chart

Cool, let's build the component! We'll start by setting up the svg and Group to hold our chart. The Group helps us place the axes and the bars.

import React from "react";
import { Group } from "@vx/group";
import { LinearGradient } from "@vx/gradient";
import { scaleBand, scaleLinear } from "@vx/scale";
import { AxisLeft, AxisBottom } from "@vx/axis";

// accessors return the label and value of that data item
const x = d => d.label;
const y = d => d.value;

function BarChart({data, width, height}) {

// bounds
const xMax = width - 80;
const yMax = height - 80;

// scales
const xScale = scaleBand({
  rangeRound: [0, xMax],
  domain: data.map(x),
  padding: 0.4
});

const yScale = scaleLinear({
  rangeRound: [0, yMax],
  domain: [Math.max(...data.map(y)), 0]
});

return (
  <svg width={width} height={height}>
    <Group top={25} left={55}>
    </Group>
  </svg>
)}

export default BarChart;

[x] Can take an array of single dimension data

Looks good. The first thing we'll add is the y-axis. To do this we use LeftAxis from @vx. We need to pass it our yScale and we'll give it a few other props for styling. The prop left pushes the axis over enough to show the label and the numTicks limits the number of values shown on the y-axis.

Then we'll add the AxisBottom that has similar props to to AxisLeft. It should look like this:

<Group top={25} left={55}>
  <AxisLeft left={10} scale={yScale} numTicks={4} label="Times Expressed" />
  <AxisBottom scale={xScale} label="Emotion" labelOffset={15} top={yMax} />
</Group>

[x] Should have a x and y axis

Now we can loop over the data and return the bar. The width, height, and x are all using the scale to determine where they would be plotted in the graph.

{data.map((d, i) => {
  const label = x(d);
  const barWidth = xScale.bandwidth();
  const barHeight = yMax - yScale(y(d));
  const barX = xScale(label);
  const barY = yMax - barHeight;

  return (
    <Bar
      key={`bar-${label}`}
      x={barX}
      y={barY}
      width={barWidth}
      height={barHeight}
    />
  );
})}

[x] Render each item on a shared scale

Finish

Nice! It should be good to go. We're going to add in the LinearGradient for a background color as well. Here it is all together:

import React from "react";
import { Group } from "@vx/group";
import { LinearGradient } from "@vx/gradient";
import { scaleBand, scaleLinear } from "@vx/scale";
import { AxisLeft, AxisBottom } from "@vx/axis";

// accessors return the label and value of that data item
const x = d => d.label;
const y = d => d.value;

function BarChart({data, width, height}) {

// bounds
const xMax = width - 80;
const yMax = height - 80;

// scales
const xScale = scaleBand({
  rangeRound: [0, xMax],
  domain: data.map(x),
  padding: 0.4
});

const yScale = scaleLinear({
  rangeRound: [0, yMax],
  domain: [Math.max(...data.map(y)), 0]
});

return (
  <svg width={width} height={height}>
    <LinearGradient
      from={`#e9e9e9`}
      to={`#fff`}
      id={`gradientFill`}
    />
    <rect
      width={width}
      height={height}
      fill={`url(#gradientFill)`}
      rx={5}
    />
    <Group top={25} left={55}>
      <AxisLeft left={10} scale={yScale} numTicks={4} label="Times" />
      {data.map((d, i) => {
        const label = x(d);
        const barWidth = xScale.bandwidth();
        const barHeight = yMax - yScale(y(d));
        const barX = xScale(label);
        const barY = yMax - barHeight;

        return (
          <Bar
            key={`bar-${label}`}
            x={barX}
            y={barY}
            width={barWidth}
            height={barHeight}
          />
        );
      })}
      <AxisBottom scale={xScale} label="Emotion" labelOffset={15} top={yMax} />
    </Group>
  </svg>
)}

export default BarChart;

Bonus

Add a little smoothness to your bars with a CSS transition like:

.vx-bar {
  transition: height 150ms, y 150ms;
}

This way, when the data changes it will move to the next height smoothly. You can see that in action below.

DEV Community: Joel Turner

Chart Parts: Anatomy of a chart

Intro

Data

Single and Multi Dimension Dataset Examples

What is a dimension?

What is a metric?

How do dimensions and metrics work together?

Anatomy of a chart

Field

Legend

Axes

Controls

Conclusion and Resources

Working on a New Feature as a Senior Frontend Developer

Before the Code

Diving Into Code

Wrapping Up

How do You Work Through a New Ticket?

Instagram to Cloudinary

tl;tr

The Problem

The Goal

Setting up a new project

Instagram Query

Prepare the Posts by Hashtag

Upload to Cloudinary

Cloudinary API Credentials

Cloudinary Client

Start the Uploads

Trigger Netlify Deploy

Github Action to Run on Schedule

Conclusion

Sequential Interval React Hook

tl;dr

Background

Criteria

Attempts

Research

Creating the useStepInterval Hook

Using the useStepInterval Hook

Animated SVG Water Pictorial Fraction in Svelte

What We're Building

Why Svelte.js?

The Pieces

Fill Area

Mask Area

Fill

Using the component

Conclusion

Create a Single Line Chart in React with @vx

What We're Building TL;DR

Requirements

Packages

Data

Scales

Building our Line Chart

Bonus

Beginning Web Accessibility in React

Linting Rules for a11y

WAI-ARIA

Roles

Properties

States

tabIndex

onKeypress handler

Make React Navigation Accessible Again

John Luke Garofalo ・ Aug 11 '17

Conclusion

Front-End Checklist for Ticket Completion

My Productivity Practices for Front End Development

Joel Turner ・ Jan 10 '20

TL;DR: Here’s the list without description:

My Current Checklist

Clean up debugger/trace/etc

Clean up logs

Search for TODO’s in code

Refactor where needed

Write tests

Make sure test coverage hasn’t gone down

Creating the `useStepInterval` Hook

Using the `useStepInterval` Hook

`tabIndex`

`onKeypress` handler