Forem: Ben Woodman

Lending Club has over 2.2 Million available loans. Where should you invest?

Ben Woodman — Tue, 26 Apr 2022 17:48:41 +0000

The Problem

Peer-to-peer lending is and was an investment system with both high risk and a high reward. Peer-to-Peer lending was made possible due to the far-reaching nature of the Internet -- people can connect from all across the globe and request money without the need for corporate banks or credit unions. The system benefitted both the lendees and the lenders: the lendees had the ability to receive loans that may have otherwise been denied by a bank and individual lenders now had the ability to invest in individuals rather than corporations.

While peer-to-peer lending has the possibility large gains, it also has the possibility for huge losses. One loan that is defaulted can hurt a lender more than multiple loans that do get paid back. That's why when making the decision about who to loan money to, it is important to consider both the chance of default (risk) and interest rate (reward) for a given opportunity.

Our Solution

My team, Beta2, set out to solve this problem by utilizing historic data from peer-to-peer lending platform Lending Club. We initially started with the question: which loans generate the most money for a given lender? The obvious answer here are the loans with the highest interest rates. A higher interest rate means more money for an individual investor, right? Well, yes, kind of.

While higher interest rates can directly lead to a higher return for an investor, it is important to remember that higher interest rates were likely assigned to a given loan due to its high risk. Lending Club assigns "grades" to a given loan to assess the risk and assign an interest rate.

Our goal as a group was to use historic Lending Club data to create a model that can predict interest rate for a given loan and compare it to the assigned interest rate given by Lending Club. A large difference between Beta2's calculated interest rate and Lending Club's assigned interest rate would mean large gains at a low risk to a given lender. By finding this difference we hope to capitalize on arbitrage and beat the market.

Our team trained a logistic regression model that classifies loans as either high-quality or low-quality -- a loan that was accepted by LendingClub and never defaulted was labeled as high-quality and a loan that rejected by LendingClub or was accepted and then defaulted was labeled as low-quality.

The Beta2 team now input current LendingClub loans into the model, and selected only the "high-quality" loans. Our team then calculated the "strength" of the high-quality loan by finding the distance between a particular loan and the hyperplane. The farther a "high-quality" loan was from the hyperplane, the higher quality the loan was -- according to the model.

This distance became the "loan score". Our team converted this loan score into an interest rate by normalizing both our loan score variable and the full range of interest rates from lending club. We found that our model was much more conservative when assigning interest rates than LendingClub's model was.

In order to provide our client with the most profit, we wanted to find loans that our model assigned the lowest interest rate (low risk) but got assigned the highest interest rate (high risk) by LendingClub. Our team worked to catch Lending Club's mistake, allowing our client to find loans that LendingClub saw as high risk but we calculated were actually low risk investments. In order to achieve this, we calculated the difference between LendingClub's interest rate and our interest rate, and we provided our client with the loans that maximized this value.

Our team was able to provide the client with over 300 loans with a high interest rate and a low risk of default.

What I Learned

When I first decided to take BUSI 488, I knew that I had an interest in data science, but I wasn't aware at the vast amount of functional knowledge that I would gain about business in such a short time. Throughout my time in the CS department, I have learned how to write clean and condensed code, optimize functions to run more efficiently, and work on large codebases. Never had I needed to apply any of these skills to a real business problem, however. Working on a team filled with half business majors and half CS majors allowed each of us to learn from each other. BUSI 488 has been an incredibly influential class during my time here at UNC, and I would like to thank Dr. D for all that he has done for his students.

The MAS Explorer and Why I Built It

Ben Woodman — Mon, 02 Aug 2021 14:11:44 +0000

Why Did I Build the MAS Explorer?

During my first few weeks at SAS, I was given a task: build an end-user SAS Viya demo for a financial services company. My team wanted the demo to interact with a simple machine learning model that was published to the Micro Analytics Service (MAS) and return a result determining whether a customer would or would not receive a specific car loan.

In order to find the correct API endpoints to send requests to, I found myself searching through endless JSON files, each being thousands of lines long. JSON files are made to be readable, but nobody wants to be surfing through them for hours on end to find just the right endpoint. It was at this point that I realized this was an area that could use improvement.

What is the MAS Explorer?

The MAS Explorer is a graphical user interface to navigate the numerous endpoints provided by the SAS Micro Analytics Service REST API. Rather than surfing through JSON files in a web browser, console window, or Postman, the MAS explorer allows a developer to graphically search through the various API endpoints and generate a complete cURL command to call the chosen endpoint. A developer can simply login, click through the multiple endpoints, and get a cURL request drafted automatically, all right from the interface.

How do you use it?

Visit the GitHub repo for more information on installation. The MAS explorer is contained in a single Docker image for installation on any local machine or server.

Screenshots

Why You Should Learn Java First: Part 1, Basic Typing

Ben Woodman — Wed, 09 Jun 2021 15:06:36 +0000

When it came time to sign up for my first college classes, I was completely overwhelmed by the choices. Numerous biology classes, Spanish classes, chemistry classes, but worst of all, there were so many computer science classes. After researching my options, I decided to start with COMP 401: Programming Fundamentals. Like the name suggests, it focused heavily on the fundamentals behind programming languages. Things like syntax, best practices, but most importantly, data types. When I took this class, my professor primarily focused on teaching these skills in Java. While nearly every college begins introductory programming classes by teaching the concept of data types, they have done something strange over the last few years; they have moved to using dynamically-typed languages as student’s introduction to programming languages.

Let’s look at the declaration of a new variable in both Python (dynamically typed) and Java (statically typed).

Python

new_number = 12
new_string = '12'

Java

int new_number = 12;
String new_string = "12";

Upon first glance, the Python version is much easier to look at because it looks much more similar to English. However, it is oversimplifying some very fundamental programming language concepts. To a new developer, it is not clear that there is a distinct difference in the way new_number and new_string are stored in memory. To them, one has quotes and one doesn't.

A new developer may try to run something like:

Python

print(new_number + new_string)
# Raises a TypeError

and they may wonder why an error is thrown. It is not immediately clear why this particular expression doesn't work. Upon reading the error messages, they will eventually discover the issue, but this becomes more troublesome as a codebase get larger.

The issue: Think of a String like a sentence in English. It's represented like an English word in memory. An integer is represented like a mathematical number that you can do operations on (addition, subtraction, etc.). This example essentially illustrates the computer trying to add the English version of "twelve" to the mathematical number 12.

Let's look at a more complex example:

Python

basic_list = [12, 5, '3', 8, '7']
sum = 0
for n in basic_list:
    sum += n
print(sum)

To an experienced programmer, it is immediately clear why this is an issue (you can't add integers to strings, as they are represented differently in memory). However, a new developer may not see this distinction. If they are learning Python as their first programming language, this oversimplified abstraction of how data is stored in memory can be extremely confusing.

Let's take a look at a similar program in Java:

Java

List<Integer> basic_list = Arrays.asList(12, 5, "3", 8, "7");
// The program halts here before the 
// rest of the code runs and throws and error
int sum = 0;
for (int n : basic_list) {
    sum += n;
}
System.out.println(sum);

Java, since it is statically typed, doesn't allow you to make the mistake of appending a String to an Integer List. The developer can immediately see that basic_list should only contain Integers. For a newer developer, this may seem annoying at first, but it prevents hard-to-understand logic errors later in the development process.

While the difference is subtle, as a newer developer, this distinction is huge. I have had many friends and students come to me after receiving their first programming assignment, baffled by why their new program isn't returning the expected results. 99% of the time, Python typing issues are the root cause of the problem. Starting with a safe, statically typed language like Java (even though many see it as outdated) is the way to go if you want your students to understand typing.

Stay tuned for part 2 of the series coming soon!

Create an E-commerce Products Page in ReactJS

Ben Woodman — Tue, 08 Jun 2021 16:50:32 +0000

E-commerce has revolutionized every aspect of purchasing goods, and the need for skilled web developers has never been greater. In this post, I will walk you step-by-step through the creation of a custom products page using ReactJS. You can read more about React here.

Fiddle: https://jsfiddle.net/x159wmgj/
Github: https://github.com/benwoodman/React-Product-Page

Let's start by creating our products page. Here's a boilerplate template that we can use.

products.html



<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div id='wrapper'>
        <h1 class='title'>Cars for Sale</h1>
        <div id='product-catalog'></div>
    </div>

    <script src="components.js" type="text/babel"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/babel" src="main.js"></script>
</body>

</html>

In a nutshell

In the head of the document, we are loading some predefined styles from the Bulma CSS library and a file containing our own custom styles we will use to construct our page.
In the body, we will put all of our content in a div named "wrapper". Right now the wrapper only contains a static title element and a div that we will fill dynamically with our products.
We then load our necessary scripts: Babel, React, ReactDOM, Axios, our custom components file, and a main.js file that we will use to set up our page.

Let's start by designing a static product tile that we can use as the template for the generated product tiles. Create a file named "components.js" in your root directory.

React separates these common "templates" into something called components. These components can be reused an infinite number of times to construct elements on the page, making it very easy to generate dynamic web pages.

We will create a new React component like so:

components.js



class ProductTile extends React.Component {

}

React components are predefined classes that we can extend to create our own components. This is called inheritance in Object Oriented Programming.

We now can go ahead and start creating our first component, ProductTile. This will be an individual product listing on the product page and will look something like this.

For the design, we will use a predefined element called a Bulma card. You can read up more about that here.

In our ProductTile class, we will create a function named "render" that React will use to render our component in the DOM.

components.js



class ProductTile extends React.Component {
    render() {
        return (
            ...
        )
    }
}

Within our return statement, we will add JSX code (which looks very similar to HTML syntax) to render our tile. We can use JSX code in our components file because of these two lines of code in our products.html file.

products.html



<script src="components.js" type="text/babel"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

We use the Babel interpreter to compile the JSX code into Javascript code that the browser can understand.

Let's add the tile JSX information.

components.js



class ProductTile extends React.Component {
    render() {
        return (
            <div class="card">
                <div class="card-image">
                    <figure class="image is-4by3">
                        <img src='img.jpg' alt="Placeholder image"></img>
                    </figure>
                </div>
                <div class="card-content">
                    <p class="title product-title">MKX</p>

                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
                        <br></br>
                    </div>
                    <a class="button is-primary" href="product.html" target="_blank">
                        <strong>More Details</strong>
                    </a>
                </div>
            </div>
        )
    }
}

Let's add some styles... (you can do whatever you want here).

styles.css



:root {
    --main-background-color: #F9FBF2;
    --main-top-background-color: #FBFEF9;
    --main-accent-color: #FB8F67;
    --title-color: #1E2019;
}

.button.is-primary {
    background-color: var(--main-accent-color);
}

.button.is-primary:hover {
    background-color: var(--title-color);
}

.title {
    color: var(--main-accent-color);
    font-family: 'Inconsolata', monospace;
    font-size: 3em;
}

#inner-large-banner {
    height: 40%;
    width: 100%;
    background-image: url('img/forest.jpg');
    background-size: cover;
    background-position: 50% 25%;
}

#wrapper {
    width: 80%;
    min-height: 70%;
    /* margin-top: -100px; */
    background-color: var(--main-top-background-color);
    margin: -100px auto 0 auto;
    padding: 30px;
    box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 2%);
    border-radius: .25rem;
}

#product-catalog {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.product-title {
    font-size: 2em;
}

We have now defined a static React component that we can render on our page. To test it, we will add a single line of code in our main.js file to render it within the "product-catalog" div in our products.html file.

main.js



ReactDOM.render(<ProductTile></ProductTile>, document.getElementById('product-catalog'));

Upon adding this line of code, you should see something like this appear on your page:

Incredible! Now let's set up a ProductCatalog component that will house multiple of these tiles.

components.js



class ProductCatalog extends React.Component {
    renderTile = () => {

    }

    render() {

    }
}

I have set up two methods within our class: one to render an individual ProductTile and one to render the collection of ProductTiles. Let's start with our method to return an individual ProductTile.

components.js



class ProductCatalog extends React.Component {
    renderTile = () => {
        return <ProductTile></ProductTile>;
    }

    render() {
        return this.renderTile();
    }
}

We now have a ProductCatalog that returns a single ProductTile, but we need it to render more than one ProductTile. We can achieve this by creating a list, adding multiple ProductTiles to it, and then returning the list.

components.js



class ProductCatalog extends React.Component {
    renderTile = () => {
        return <ProductTile></ProductTile>;
    }

    render() {
        let tiles = [];
        for (let i = 0; i < 8; i++) {
            tiles.push(this.renderTile());
        }
        return tiles;
    }
}

Let's edit our main.js file to return a ProductCatalog rather than a ProductTile.

main.js



ReactDOM.render(<ProductCatalog></ProductCatalog>, document.getElementById('product-catalog'));

The result:

Our design is now complete! Now you're probably wondering how we customize each ProductTile to represent a separate product in the store. We need to start by fetching our JSON products file I talked about earlier. You can serve this up on a webserver or add it directly into your project.

main.js



// Our data:
const products = [
    {
        "id": "1",
        "name": "Touareg",
        "image": "/product_img/Mazda_CX-9_2011_34_20_270_37_6_76_68_200_16_AWD_7_4_SUV_gJa.jpg",
        "cost": "677.32",
        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
        "bullet_description": [
            "Capacity Spacious: The 2 person tent designed for a roomy and convenient experience. The camping tent with an interior center height of 47 inches and 82.7 x 82.7 inches base dimensions, it is a spacious camp tent with plenty of space for you",
            "Stable & Safe: To keep your camp equipment dry, the sturdy polyester material on the outdoor tent body and the removable rain fly help to ensure water does not make its way into the inside of your waterproof tent for a dry travel",
            "Ventilation Design: Large window design for enhanced airflow. A D-style door will keep an open view. Also, two person tent comes with a storage pocket that helps to clear clutter and keep the inside of the dome tent organized. Great tents for camping",
            "Easy Set-Up & Carry: The camp tent equip with 2 ropes and 6 stakes for safe and stable. It only takes 1-2 people 5 minutes to set up. The carry bag weighs only 5.7lbs. A lightweight tent can be store in the car without taking up much space"
        ]
    },
    {
        "id": "2",
        "name": "DeVille",
        "image": "/product_img/Chevrolet_Camaro_2019_31_18_270_20_4_74_52_188_20_RWD_4_2_Convertible_Xcu.jpg",
        "cost": "3474.41",
        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
        "bullet_description": [
            "Capacity Spacious: The 2 person tent designed for a roomy and convenient experience. The camping tent with an interior center height of 47 inches and 82.7 x 82.7 inches base dimensions, it is a spacious camp tent with plenty of space for you",
            "Stable & Safe: To keep your camp equipment dry, the sturdy polyester material on the outdoor tent body and the removable rain fly help to ensure water does not make its way into the inside of your waterproof tent for a dry travel",
            "Ventilation Design: Large window design for enhanced airflow. A D-style door will keep an open view. Also, two person tent comes with a storage pocket that helps to clear clutter and keep the inside of the dome tent organized. Great tents for camping",
            "Easy Set-Up & Carry: The camp tent equip with 2 ropes and 6 stakes for safe and stable. It only takes 1-2 people 5 minutes to set up. The carry bag weighs only 5.7lbs. A lightweight tent can be store in the car without taking up much space"
        ]
    },
    {
        "id": "3",
        "name": "F250",
        "image": "/product_img/Jaguar_F-Pace_2017_41_18_180_20_4_76_65_186_26_AWD_5_4_SUV_Thp.jpg",
        "cost": "2878.07",
        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
        "bullet_description": [
            "Capacity Spacious: The 2 person tent designed for a roomy and convenient experience. The camping tent with an interior center height of 47 inches and 82.7 x 82.7 inches base dimensions, it is a spacious camp tent with plenty of space for you",
            "Stable & Safe: To keep your camp equipment dry, the sturdy polyester material on the outdoor tent body and the removable rain fly help to ensure water does not make its way into the inside of your waterproof tent for a dry travel",
            "Ventilation Design: Large window design for enhanced airflow. A D-style door will keep an open view. Also, two person tent comes with a storage pocket that helps to clear clutter and keep the inside of the dome tent organized. Great tents for camping",
            "Easy Set-Up & Carry: The camp tent equip with 2 ropes and 6 stakes for safe and stable. It only takes 1-2 people 5 minutes to set up. The carry bag weighs only 5.7lbs. A lightweight tent can be store in the car without taking up much space"
        ]
    },
    {
        "id": "4",
        "name": "Corvette",
        "image": "/product_img/Bentley_Flying Spur_2011_181_19_550_60_12_77_55_208_11_AWD_5_4_4dr_FLx.jpg",
        "cost": "4379.01",
        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
        "bullet_description": [
            "Capacity Spacious: The 2 person tent designed for a roomy and convenient experience. The camping tent with an interior center height of 47 inches and 82.7 x 82.7 inches base dimensions, it is a spacious camp tent with plenty of space for you",
            "Stable & Safe: To keep your camp equipment dry, the sturdy polyester material on the outdoor tent body and the removable rain fly help to ensure water does not make its way into the inside of your waterproof tent for a dry travel",
            "Ventilation Design: Large window design for enhanced airflow. A D-style door will keep an open view. Also, two person tent comes with a storage pocket that helps to clear clutter and keep the inside of the dome tent organized. Great tents for camping",
            "Easy Set-Up & Carry: The camp tent equip with 2 ropes and 6 stakes for safe and stable. It only takes 1-2 people 5 minutes to set up. The carry bag weighs only 5.7lbs. A lightweight tent can be store in the car without taking up much space"
        ]
    },
    {
        "id": "5",
        "name": "MKX",
        "image": "/product_img/Audi_R8_2017_189_19_610_52_10_76_48_174_14_AWD_2_2_2dr_nUS.jpg",
        "cost": "3274.66",
        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
        "bullet_description": [
            "Capacity Spacious: The 2 person tent designed for a roomy and convenient experience. The camping tent with an interior center height of 47 inches and 82.7 x 82.7 inches base dimensions, it is a spacious camp tent with plenty of space for you",
            "Stable & Safe: To keep your camp equipment dry, the sturdy polyester material on the outdoor tent body and the removable rain fly help to ensure water does not make its way into the inside of your waterproof tent for a dry travel",
            "Ventilation Design: Large window design for enhanced airflow. A D-style door will keep an open view. Also, two person tent comes with a storage pocket that helps to clear clutter and keep the inside of the dome tent organized. Great tents for camping",
            "Easy Set-Up & Carry: The camp tent equip with 2 ropes and 6 stakes for safe and stable. It only takes 1-2 people 5 minutes to set up. The carry bag weighs only 5.7lbs. A lightweight tent can be store in the car without taking up much space"
        ]
    },
    {
        "id": "6",
        "name": "Accord",
        "image": "/product_img/Cadillac_CT6_2016_58_18_260_20_4_74_57_204_22_RWD_5_4_4dr_yfN.jpg",
        "cost": "758.8",
        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
        "bullet_description": [
            "Capacity Spacious: The 2 person tent designed for a roomy and convenient experience. The camping tent with an interior center height of 47 inches and 82.7 x 82.7 inches base dimensions, it is a spacious camp tent with plenty of space for you",
            "Stable & Safe: To keep your camp equipment dry, the sturdy polyester material on the outdoor tent body and the removable rain fly help to ensure water does not make its way into the inside of your waterproof tent for a dry travel",
            "Ventilation Design: Large window design for enhanced airflow. A D-style door will keep an open view. Also, two person tent comes with a storage pocket that helps to clear clutter and keep the inside of the dome tent organized. Great tents for camping",
            "Easy Set-Up & Carry: The camp tent equip with 2 ropes and 6 stakes for safe and stable. It only takes 1-2 people 5 minutes to set up. The carry bag weighs only 5.7lbs. A lightweight tent can be store in the car without taking up much space"
        ]
    },
    {
        "id": "7",
        "name": "Suburban 2500",
        "image": "/product_img/Chevrolet_Silverado 2500HD_2017_54_20_360_60_8_80_78_nan_nan_RWD_5_4_Pickup_FvP.jpg",
        "cost": "2691.62",
        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
        "bullet_description": [
            "Capacity Spacious: The 2 person tent designed for a roomy and convenient experience. The camping tent with an interior center height of 47 inches and 82.7 x 82.7 inches base dimensions, it is a spacious camp tent with plenty of space for you",
            "Stable & Safe: To keep your camp equipment dry, the sturdy polyester material on the outdoor tent body and the removable rain fly help to ensure water does not make its way into the inside of your waterproof tent for a dry travel",
            "Ventilation Design: Large window design for enhanced airflow. A D-style door will keep an open view. Also, two person tent comes with a storage pocket that helps to clear clutter and keep the inside of the dome tent organized. Great tents for camping",
            "Easy Set-Up & Carry: The camp tent equip with 2 ropes and 6 stakes for safe and stable. It only takes 1-2 people 5 minutes to set up. The carry bag weighs only 5.7lbs. A lightweight tent can be store in the car without taking up much space"
        ]
    },
    {
        "id": "8",
        "name": "LR2",
        "image": "/product_img/Porsche_Macan_2015_49_19_340_30_6_76_63_184_17_AWD_5_4_SUV_mjd.jpg",
        "cost": "4801.29",
        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
        "bullet_description": [
            "Capacity Spacious: The 2 person tent designed for a roomy and convenient experience. The camping tent with an interior center height of 47 inches and 82.7 x 82.7 inches base dimensions, it is a spacious camp tent with plenty of space for you",
            "Stable & Safe: To keep your camp equipment dry, the sturdy polyester material on the outdoor tent body and the removable rain fly help to ensure water does not make its way into the inside of your waterproof tent for a dry travel",
            "Ventilation Design: Large window design for enhanced airflow. A D-style door will keep an open view. Also, two person tent comes with a storage pocket that helps to clear clutter and keep the inside of the dome tent organized. Great tents for camping",
            "Easy Set-Up & Carry: The camp tent equip with 2 ropes and 6 stakes for safe and stable. It only takes 1-2 people 5 minutes to set up. The carry bag weighs only 5.7lbs. A lightweight tent can be store in the car without taking up much space"
        ]
    }
]

...

We can pass this list of products to the ProductCatalog component by using something called component props. The syntax is very similar to HTML properties. We pass it like so:

main.js



...

const setup = function() {
    ReactDOM.render(<ProductCatalog products={products}></ProductCatalog>, document.getElementById('product-catalog'));
}

setup();

Now, when ProductCatalog is rendered by React, it will have access to the products JSON list. Let's edit our ProductCatalog element to render ProductTiles with this information.

components.js



class ProductCatalog extends React.Component {
    renderTile = (current_item) => {
        return <ProductTile product={current_item}></ProductTile>;
    }

    render() {
        let tiles = [];
        for (let i = 0; i < this.props.products.length; i++) {
            const current_item = this.props.products[i];
            tiles.push(this.renderTile(current_item));
        }
        return tiles;
    }
}

...

Notice that we can access our list of products by the "this.props.products" property. Notice how we also pass the current product to the renderTile method so that we can pass the individual product's information to the ProductTile component. The last step is to edit our ProductTile component to use the product information passed to it in the last step.

components.js



...

class ProductTile extends React.Component {
    render() {
        return (
            <div class="card">
                <div class="card-image">
                    <figure class="image is-4by3">
                        <img src={this.props.product.image} alt="Placeholder image"></img>
                    </figure>
                </div>
                <div class="card-content">
                    <p class="title product-title">{this.props.product.name}</p>

                    <div class="content">
                        {this.props.product.short_description}
                        <br></br>
                    </div>
                    <a class="button is-primary" href={"product.html?id=" + this.props.product.id.toString()} target="_blank">
                        <strong>More Details</strong>
                    </a>
                </div>
            </div>
        )
    }
}

We can insert elements from our product into the JSX code by using curly braces surrounding the value. So for example, to print the product name we use: <p class="title product-title">{this.props.product.name}</p>

Upon loading our page, we should be greeted with something like the following:

Your product catalog is now finished! To recap, you created a ProductTile that houses an individual product and a ProductCatalog that houses a collection of ProductTiles and rendered them on the DOM. Congratulations!

Using SAS Viya's Forecasting Platform to Forecast Future Vaccination Numbers

Ben Woodman — Thu, 27 May 2021 19:28:20 +0000

The past year has been an interesting one, as people around the world worked from home and completed classes and degrees online. We can finally see the light at the end of the tunnel, mostly due to the incredible work that pharmaceutical companies around the world completed over the last year. Creating a vaccine for COVID-19 was a massive undertaking, but so was quickly developing a plan to manufacture and distribute the vaccine. Using SAS Viya's forecasting platform, we can use machine learning to accurately predict a state's future total vaccinations, allowing a state to make better decisions regarding reopening plans.

We will create our application in three steps:

Create a basic webservice using FastAPI and Python to generate and return a model.
Use the SWAT Python package to leverage the power of SAS Viya and create a forecasting model given state vaccination data. repo
Create a frontend website so users can interact with the website. repo

For this project, we will use the USA COVID-19 Vaccinations dataset from Kaggle.

Here is a sample of the data:

date	location	total_vaccinations	total_distributed	people_vaccinated	people_fully_vaccinated_per_hundred	total_vaccinations_per_hundred	people_fully_vaccinated	people_vaccinated_per_hundred	distributed_per_hundred	daily_vaccinations_raw	daily_vaccinations	daily_vaccinations_per_million	share_doses_used
2021-01-12	Alabama	78134.0	377025.0	70861.0	0.15	1.59	7270.0	1.45	7.69				0.207
2021-01-13	Alabama	84040.0	378975.0	74792.0	0.19	1.71	9245.0	1.53	7.73	5906.0	5906.0	1205.0	0.222
2021-01-14	Alabama	92300.0	435350.0	80480.0		1.88		1.64	8.88	8260.0	7083.0	1445.0	0.212
2021-01-15	Alabama	100567.0	444650.0	86956.0	0.28	2.05	13488.0	1.77	9.07	8267.0	7478.0	1525.0	0.226

1: Create a FastAPI Webservice

Let's go ahead and create a new boilerplate FastAPI project to start our webservice.

# All the packages we will eventually need for our project
from datetime import datetime
from fastapi.datastructures import UploadFile
from fastapi.param_functions import File
from numpy import str_
from swat import *
import pandas as pd
from matplotlib import pyplot
from fastapi import FastAPI, Form, File, UploadFile, HTTPException
from fastapi.responses import FileResponse
import base64

origins = [
    "http://localhost:3000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post('/')
async def hello_world():
    return 'Hello World'

We can now run our new API by running uvicorn main:app --reload in our terminal. To learn more about FastAPI, click here.

Great, now we should see a page in our browser that displays the text "Hello World".

Let's add another endpoint that we will use to accept the user's username, password, and uploaded dataset. The API will then send this data to the CAS server for processing (step 2).

@app.post('/forecast')
async def forecast(user: str = Form(...), password: str = Form(...), file: UploadFile = File(...)):
    return True

Here, we have created a new HTTP POST endpoint, where the user will submit a username, password, and file as form data.

2: Use SAS Viya to Create a Forecasting Model

Now, let's connect to SAS Viya using the SWAT package. This is where we get to the cool stuff.

We'll start by defining a function that will connect to CAS, Viya's Cloud Analytics Service, which will do all of the heavy lifting on the data for us.

async def connect_to_cas(user, password):
    cas_server = 'YOUR_CAS_SERVER_URL'
    try: 
        s = CAS(cas_server, '8777', user, password)
    except:
        raise HTTPException(401)
    return s

Now we're connected to SAS's cloud analytics service. Let's first load our data into a pandas dataframe. If you recall, we passed a CSV file into our forecast function named 'file'. We will open this file and save it to our local drive.

async def forecast(user: str = Form(...), password: str = Form(...), file: UploadFile = File(...)):
    str_file = file.file.read()
    f = open('in.csv', 'wb')
    f.write(str_file)
    ...

From here, we can load our new data into a pandas dataframe.

...
df = pd.read_csv('in.csv')
...

It is important to recognize that there are many different date formats when it comes to computers. That is why it will be important for us to use a standard format; in this case we will use the CAS date format. We can convert the dates in our dataset to CAS dates using the following code.

...
# Convert string to python date obj
python_dates = pd.to_datetime(df['date'], format='%Y-%m-%d')
# Create list of new CAS dates from
# Python dates
new_dates = [cas.utils.datetime.python2cas_date(python_dates.iloc[i]) for i in range(len(python_dates))]
# Add CAS dates to our pandas dataframe
df.insert(1, 'dates_cas', new_dates)
...

The dates from our dataset are now in a format that CAS can understand. It's now time to upload our dataframe to CAS and apply the forecast action on it.

Documentation for the forecast action can be found here. Information on using the forecasting action with SWAT can be found here.

parameter	explanation
table	uploaded table to apply forecast to
timeid	the name of the column with the dates
interval	interval of the dates (month, day, year, etc.)
tStart	start date for the data in your uploaded table
tEnd	end date for the data in your uploaded table
dependents	the dependent variable for your forecast in this case, it will be the 'people_vaccinated' column
forout	output table where the predictions for 'people_vaccinated' will be stored
lead	amount of time we are forecasting

...
# Connect to the server
s = await connect_to_cas(user, password)
# Uploading our dataframe to the CAS server
resp = s.upload(
    df, 
    casOut={'name': 'covid_vaccines_upload', 'caslib': 'casuser', 'replace': 'true'}
)

# Add the timedata action set so that we can perform a forecast
s.loadActionSet('timedata')

# Perform that forecast using our uploaded table
# and spit out the forecast for the 
# next 30 days to a table named covid_vaccines.
s.timedata.forecast(
    table={'name':'covid_vaccines_upload', 'caslib': 'casuser'},
    timeid={'name':'dates_cas'},
    interval='day',
    tStart='2021-01-12',
    tEnd='2021-05-23',
    dependents=[{'accumulate':'SUM','name':'people_vaccinated'}],
    forout={'name': 'covid_vaccines', 'caslib': 'casuser', 'replace': 'true'}
    lead=30
)

# Retreive the forecasted data from the
# CAS server and create a dataframe from it
forecasted_data = s.CASTable('covid_vaccines',caslib='casuser').to_frame().drop(columns='_NAME_')
...

From here we can generate a plot and return the forecasted data to the user.

...
predictions_after = datetime.strptime(df.sort_values(by='date').iloc[-1]['date'], '%Y-%m-%d')
pyplot.plot(forecasted_data['dates_cas'], forecasted_data['PREDICT'])
pyplot.plot(forecasted_data['dates_cas'], forecasted_data['ACTUAL'])
pyplot.axvline(predictions_after)
pyplot.xlabel('Date')
pyplot.ylabel('Total Vaccinations (millions)')
pyplot.savefig('out.jpg', type='jpg')

return {'plot': base64.b64encode(open('out.jpg', 'rb').read()), 'tbl': forecasted_data.to_html()}
...

Our completed function will look something like this:

@app.post('/forecast')
async def forecast(user: str = Form(...), password: str = Form(...), file: UploadFile = File(...)):
    str_file = file.file.read()
    f = open('in.csv', 'wb')
    f.write(str_file)
    # df = pd.DataFrame([x.split(',') for x in str_file.split('\n')])
    df = pd.read_csv('in.csv')
    python_dates = pd.to_datetime(df['date'], format='%Y-%m-%d')
    new_dates= [cas.utils.datetime.python2cas_date(python_dates.iloc[i]) for i in range(len(python_dates))]
    df.insert(1, 'dates_cas', new_dates)

    s = await connect_to_cas(user, password)

    resp = s.upload(df, casOut={'name': 'covid_vaccines_upload', 'caslib': 'casuser', 'replace': 'true'})

    s.loadActionSet('timedata')

    s.timedata.forecast(
        table={'name':'covid_vaccines_upload', 'caslib': 'casuser'},
        timeid={'name':'dates_cas'},
        interval='day',
        tStart='2021-01-12',
        tEnd='2021-05-23',
        dependents=[{'accumulate':'SUM','name':'people_vaccinated'}],
        forout={'name': 'covid_vaccines', 'caslib': 'casuser', 'replace': 'true'},
        selectOut={"name":'covid_vaccines_select', "caslib" :'casuser', "replace" : 'true'},
        infoOut={"name":'covid_vaccines_info', "caslib" :'casuser', "replace" : 'true'},
        lead=30
    )

    forecasted_data = s.CASTable('covid_vaccines', caslib='casuser').to_frame().drop(columns='_NAME_')

    # Last date in our original dataframe
    # used to generate the vertical line
    # to split the graph into actual and
    # forecasted data
    predictions_after = datetime.strptime(df.sort_values(by='date').iloc[-1]['date'], '%Y-%m-%d')
    pyplot.plot(forecasted_data['dates_cas'], forecasted_data['PREDICT'])
    pyplot.plot(forecasted_data['dates_cas'], forecasted_data['ACTUAL'])
    pyplot.axvline(predictions_after)
    pyplot.xlabel('Date')
    pyplot.ylabel('Total Vaccinations (millions)')
    pyplot.savefig('out.jpg', type='jpg')

    # return FileResponse('out.png')
    return {'plot': base64.b64encode(open('out.jpg', 'rb').read()), 'tbl': forecasted_data.to_html()}

Again, run the server using uvicorn main:app, and your new webservice will start!

3. Create a frontend web application for users to interact with

You can complete and design this part however you'd like. I built a basic page using Bulma for styling. I then wrote up a quick script using jQuery Ajax to send a request to our new server. You can view my frontend here.

Once we run our code, our web application will show both the plot and the forecasted data for our project!

Testing

You can run this forecasting model on any dataset similar to the one above. We can use Excel or pandas to create subsets of the data, filtered by state. You can then submit that state's specific data at any time to get a new forecast.