Generative Adversarial Networks (GANs) — Adobe Stock Image

Having a dataset is a key component to training any sort of machine learning model. But what about instances where you may not have access to the data? Not being able to use a dataset because of data regulation and privacy concerns poses a problem when trying to apply machine learning. How can we train models without being able to use the relevant dataset?

This is where deep learning can help!

Using generative adversarial networks, or GANs, we can generate a dataset for training. …

This project was created as part of a Data Science course by Master of Science in Artificial Intelligence (MSAI) students at Northwestern University.

When we first started our project with the Invisible Institute’s Citizen’s Police Data Project and learned about the Chicago Police Department, a story on the career of Eddie Johnson, the former Chicago Police Department Superintendent, caught our attention. He had a history of misconduct within the department, but was continuously promoted. Use of Force, Part 7 of The Intercept’s The Chicago Police Files, highlights a few cases Johnson and his team handled, and says “Johnson and the…

What is Naive Bayes?

Naive Bayes is a machine learning classifier. More specifically it’s a probabilistic classifier, which means it predicts the probability that a feature is of each class, rather than just telling you the one class it most likely belongs to.

It’s most commonly used for text classification and detecting spam. You can thank Naive Bayes for keeping so many spam emails out of your inbox.

In this short introduction to Naive Bayes, we’ll be using songs and lyrics from Spotify’s most streamed female artist of the decade, Ariana Grande.

How does it work?


To fit the data, we’ll start by using the Bayes rule. A…

You’ve made an awesome graph, but just tried to view it on your phone and yikes. It doesn’t resize. No worries, here’s a way to adjust the width and height of your graph based on the user’s window size.

Setting up our variables

First, let’s set variables for default width and height, and use them to calculate a default ratio. In this case, we’ll be using desktop as our default. The default width and height should be the dimensions you want your graph on a desktop view.

default_width = 700 - margin.left - margin.right;
default_height = 500 - - margin.bottom; …

This tutorial uses d3.js version 4.6.0 and builds off of a scatter plot I made a tutorial for previously. You can see the scatter plot with hover effects on my data visualization project or check it out in the gif below.

Hover effects — Where do they go?

Let’s start by identifying where this code needs to be. We need to find the code that draws our data points. That way, the effect can take place when the user hovers over any data point. Drawing our data points is happening here in our path variable, so that’s where we’ll be adding our hover effects.

var path =…

Getting started

This tutorial uses d3 v4.6. The CDN is hosted on Cloudflare, so you can start by adding this script tag to your html file:

<script src=""></script>

While still in your html file, add a div with an ID (I’m using #scatter in this tutorial) where you’d like the scatter plot to go:

<div id="scatter"></div>

Now onto the javascript. Create a new javascript file for your graph (don’t forget to go back to your html file and add a script tag for it!).

Next, we’ll need some data. We can add this directly to our javascript file. You can add dummy…

You’ve made it to a point with your data project that you’d like to add mouse over effects. First of all- congrats! You’ve made a graph! If you haven’t made a graph yet, I suggest following my donut chart tutorial. I’ll be building off of it here, so it may be a helpful reference.

Where should mouse-over code go?

To get started, let’s figure out where this code needs to be. Looking at our donut chart example, let’s find the path variable we created.

var path = svg.selectAll('path')
.attr('d', arc)
.attr('fill', function (d, i) {
return color(;
.attr('transform', 'translate(0, 0)')


Making a donut chart with d3.js is not as difficult as it may seem. We’ll start by making a simple donut chart, then add buttons to switch between data sets with a smooth, animated transition. See an example of my donut chart in action here.

First things first, this tutorial uses d3.js version 4.6.0. I’m using the CDN found on Cloudflare.

<script src=""></script>

I put this script tag at the end of my html before the script tags for my graphs.

Add a div with the ID #donut to your html where you’d like the donut chart to go.


KJ Schmidt

Software engineer and graduate student studying AI at Northwestern. Talking too much to my dog. Being a “cool” aunt. I like knowing things. She/Her

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store