Shawn Koski Blog

D3 Scales

2019-03-03T16:00:00+00:00

So here we are, after months of learning Python, figuring out how to scrape data, and learning how to put circles and squares on the DOM, we’re finally ready to dive into D3.

I’m going to be honest, the first time I looked at D3 code I was very very confused. It definitely has some interesting quarks, like selecting elements that haven’t been created yet, but after a while even I could understand (most) of what was going on.

If your still not sure if D3 is right for you I highly recommend checking out bl.ocks.org and observablehq.com both of these sites have tons of amazing examples of what D3 is capable of. You will definitely be able to find something interesting to help motivate you to learn more.

I will also mention that D3 is currently on version 5 but you will probably run into code from every version as you look up different projects. Just keep this in mind if you ever run into code that looks especially different from what you’ve been learning.

I’ll also be honest (again) and say that there is way too much involved in D3 for me to fit into one blog post, so this will definitely be a two parter, or maybe a (D) 3 parter…*

Because this is going to be a multi part series I think it will be best to focus on introducing some of the common concepts and elements that you’ll often see, and we’ll start building something in the next post.

Scale

As I mentioned before, the first time I looked at D3 code I could not for the life of me figure out what was going on. Scales were definitely one of the main causes of this confusion, but they have also turned out to be one of the most important elements of D3 to understand. So even though they might seem confusing at first, once you start using them and understand how they work you will be thankful they exist.

So what exactly are scales?

Scales are used when we want to place elements on our chart, as well as to help us create the axis for our chart. It might seem like doing these things would be easy enough to do on our own, but using scales will let us handle these dynamically.

Ok, that sounds pretty great, but what do scales actually do?

Using scales we can tell D3 the range of numbers that we will be inputting into our chart and the size of our chart. D3 can then use these numbers to determine where on the chart our points should land. This way we can be sure our points are landing in the correct place regardless of how big or small our chart is. This is also how we will be able to dynamically control the axes of our chart.

Now that we know what scales do how do we set them up?

For most basic setups we will use three methods: a scale, domain, and range.

Depending on the type of data you are using will determine the scale method that you should use. The two most common are scaleLinear and scaleTime. You’ll use scaleLinear to make a continuous scale and, as you can probably guess, scaleTime when you are working with time data.

Next is the domain method. This will be the range of numbers that can be input into your chart. For example if you a charting something on a daily basis for a year your range might be 1 - 365, or if your charting the top 20 scorers in NBA history your range would be 25375 - 38387. To set up this range for your chart domain take an array with two values the minimum and maximum possible values for your chart.

Last is the range method. Like domain it will take an array of a minimum and maximum value, but instead of correlating to input values it is correlated to the output you want to display. In most instances this will zero and the height or width of your chart.

If you are still confused I’ll give you a quick example of how these methods work together. Lets imagine you are keeping track of the temperature for each day of a year. Your x-axis will be each day so your domain will be 1 - 365 representing all the possible days you might input for a year. Now imagine that your chart is 800 pixels wide so you’ll pass 0 - 800 into your range method. Now if you chart a value on April 10th, or the 100th day of the year, your marker for the day will be on the 219th pixels of your chart. By using the domain and range methods all the calculations for where elements are placed on your chart are taken care of for you.

Using this same pattern you could also setup a scale for your y-axis that is correlated to the height of your chart. In fact this will be the pattern you see in the vast majority (possibly all) of the D3 charts you run into. hese scales are commonly named either xScale/yScale or simply x/y.

One more interesting thing about these methods is that you can flip the correspondence between input and output by flipping the values you enter into range. For the previous example this means that if your input was 1 it would actually be charted on the 800th pixels of your chart. This flipping will become necessary when dealing with the y-axis on many charts, because as we learned before the y-coordinates of an SVG start with 0 at the top and move down as you increase the value.

Ok, this post has already become longer than I thought and something has become apparent. With my goal of keeping these posts in the 4-5 minute range it is going to take more than two or three posts to share everything I’ve learned about D3. I guess this is were we’ll leave it for now, but the next post on data joins will be out soon. (Future link to data joins blog post here)

*In my defence that joke sounded much funnier in my head ¯\_(ツ)_/¯.

SVGs

2019-02-24T16:00:00+00:00

Now that I’ve been able to collect and structure the data that I want to use it’s time to start thinking about how I want to display it. I’ve had an interest in the data visualization library D3.js for sometime now, so I feel like this will be a great opportunity to learn how to use it.

Upon looking into D3 one of the first things I notice is that all the visuals that it creates are made up of SVG elements.

SVGs, or scalable vector graphics, are XML-based vector images. In simple terms this means that the shapes and images you create can be resized without affecting the resolution, or No Pixelation! It also means they can be searched, indexed, scripted, and compressed, but let’s not worry about any of that now.

Now that we know the bare, bare bare minimum about SVGs let’s just dive in and see how we can make them. Here we can see the absolute most basic svg you could possibly imagine making:

<svg width="100" height="100"> </svg>

If you’re familiar with HTML this probably looks pretty familiar, even though it’s XML. With this code we are making an SVG element with a width of 100 pixels and a height of, you guessed it, 100 pixels. Pretty simple, right?

Now if you put this code into a file and pull it up on your browser you might notice that it doesn’t look like anything is on the page. And you would mostly be right, sort of… If you inspect the page you’ll be able to see the svg element in your developer tools, but won’t be able to see anything on the page.

At this point you might have a few questions like: if we already made our SVG why isn’t anything being displayed? Because we didn’t assign our SVG any styles to display. Why didn’t we apply any styles to our SVG? Because we don’t want to display the SVG on the screen. Why on earth would we make this SVG if we didn’t want to display it? OK, so this was the part I was kind of holding out on, but the SVG element isn’t so much something you want to display as it is a container for the other elements you will be displaying. You can think of it like a canvas, not to be confused with the HTML canvas element, that you will be “painting” other beautiful elements on.

So what are these other elements that we can put on our “canvas”? SVGs come in four basic shapes: rectangles, circles, ellipses, and lines. And I know a line might not actually be a shape but it is a simple SVG element so we’re just going to lump it in with the others anyways.

The first shape we’ll look at is a rectangle. Placing a rectangle onto the page is done by adding a <rect> tag inside <svg> tag we previously made as seen below.

<svg width="100" height="100">
  <rect x="0" y="0" width="50" height="50" fill="#ffffff"/>
</svg>

Let’s take a look at what’s going on here. As mentioned above <rect> tells us that we are going to make a rectangular element.

First, we have “x” and “y”, if you think these seem a lot like graph coordinates you would be right. These attributes will be where the top left corner of your rectangle is placed. Much like the graphs we all know and love the “x” attribute will determine the horizontal placement and the “y” attribute will determine the vertical placement. Unlike the graphs we all know and love, increasing the “y” value will move the point down toward the bottom of the page. This was one of the hardest things to get used to when I first started using SVGs. In this example the 0’s are measured in pixels, but you can also use % and vh/vw to change the placement of your rectangle based on the size of the SVG you are putting it into, or based on the current view-width or height.

Next, we have our rectangle’s width and height attributes. Just as it sounds these will determine how big our rectangle is. Currently they are being sized in pixels, but much like the x and y attributes you can also use % and vw/vh to dynamically determine the size of the element.

Last, we have the “fill” attribute. This is where you can determine the color of the rectangle. Fill can take any of the same color arguments that you can use with HTML such as color names, rgb values, or hex values as shown in this example.

When we add this rectangle element to our SVG element we created earlier you’ll get a yellow square that is 50x50 pixels in the top left of our SVG. Isn’t it beautiful?

Now that you know the basics of adding elements to our SVG the next few should be even easier to understand.

Adding a circle to our page is done by using the <circle> tag, pretty intuitive. This tag looks similar to the <rect> tag we previously made but with a few different attributes.

<circle cx="100" cy="350" r="100" fill="#ffffff" stroke="red" stroke-width="2"/>

The first thing you probably noticed is that our “x” and “y” attributes have been replace by “cx” and “cy”. So what do these mysterious c’s stand for? Is it for circle? Is it for center? Honestly I’m not sure, but it’s probably for one of those. Anyways, as you can probably guess by now these values will determine the position of the center of your circle.

The “r” attribute that comes next will determine the radius of your circle. In case you need a reminder the radius is the distance from the center of a circle to its edge. Because we are using the radius to determine the size of the circle it is important to remember that the height and width will be double whatever you assign to “r”.

For this circle I’ve included two new attributes that we can use to style the element, stroke and stroke-width. These will both be used to add an outline to the circle. Stroke will determine the color of the outline and stroke-width will, naturally, determine the width of the outline. As with fill, stroke can take many different types of input such as color names, rgb values, or hex values. Stroke-width will default to pixels but you can also use percentages (%) or vw/vh to determine the width dynamically.

The final shape I want to talk about today is the ellipse. Merriam-Webster describes an ellipse as “a closed plane curve generated by a point moving in such a way that the sums of its distances from two fixed points is a constant : a plane section of a right circular cone that is a closed curve.” Probably better known as an oval. The code for making an ellipse is as follows.

<ellipse cx="100" cy="600" rx="50" ry="100" fill="#ffffff"/>

Because an ellipse is just a long circle the code to make one is very similar to the code for a circle. You’ll notice that the only difference here is that instead of having an “r” attribute we have “rx” and “ry” attributes. As you can probably guess these attributes are used to determine the lengths of the radius across the x and y axis. If the “rx” attribute is larger you will get an oval stretched horizontally; if “ry” is larger you will have an oval stretched vertically.

I know I said ellipses were the last shape I wanted to talk about, but there is one more element that I feel would be good to mention. Lines.

<line x1="0" y1="0" x2="50" y2="50" stroke="#ffffff" stroke-width="2"/>

The easiest way to think about a line element is that it is a connection between to points on you SVG. Knowing that you can probably guess that “x1” and “y1” determine the placement of the first point and “x2” and “y2” the second point. In this example the line would start in the top left corner and end 50 pixels to the right and 50 pixels down from the starting point.

Unlike other elements a line does not have a fill attribute, instead the color can be changed using the stroke attribute. Along with the stroke attribute lines also have the stroke-width attribute that can be used to determine how thick the line will be.

That’s all for the basic SVG shapes and how to make them. Hopefully you learned a little about how to place and style the different shapes and hopefully this will be enough to know to be able to start using D3.js and getting some nice visuals for the data we have.

React Hooks

2018-10-28T16:00:00+00:00

Now that the 2018 React Conference is over I want to take a little time to look at what I thought was one of the coolest new features that was shown. Hooks.

Hooks allow us to add state to our functional components and will help us reduce our need to use classes.

Yep, you heard that right, your stateless components are stateless no more. But that’s not all, hooks will also give us access to lifecycle methods in our functional components.

First let’s take a look at a functional component that we’re used to using in React.

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h1>Count: {props.count}</h1>
      <h1>What's your name? </h1>
      <input value={props.name} />
    </div>
  (
}

MyComponent is pretty simple it displays a number count and a name that it receives from props. But what happens when we want to change the count? or if we want to change the name that is in the input?

Before the introduction of hooks we would have to rely on a parent component passing new props to this component anytime we wanted to change the output of the component. Now thanks to hooks we have the ability to change these properties inside the component itself.

Let’s look at how we can use hooks to give our functional component it’s own state.

import React, { useState } from ‘react’; The first step is to import ‘useState’ from React, this is the function that makes all this magic possible.

import React, { useState } from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Count: {count}</h1>
      <button type="button" 
        onClick={}>
        Increase Count
      </button>
    </div>
  (
}

Let’s start with the counter in our component. We can remove the props we are passing to the component because we will be using its own internal state (that’s the whole point of hooks after all.) Instead of props.count we will change it to just count. We will also add the button that we will use to increase the count, but what should we be calling in the buttons onClick?

<button type="button" onClick={() => {
          updateCount( prevState => prevState + 1)
        }}>
        Increase Count
</button>

This looks pretty good. Our onClick will call an updateCount function which will return our previous state + 1. Now we just have to figure out where that previous state is coming from.

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, updateCount] = useState(0)
  return ...
}

Remember that useState function? And remember how I said that’s what makes the magic possible? Now we get to see it in action. So what’s going on here? First we’re destructuring an array, ‘count’ will be the variable that holds our state and ‘updateCount’ will be the function we use to change our state. useState(0) will set our initial count state to 0.

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, updateCount] = useState(0)
  return (
    <div>
      <h1>Count: {count}</h1>
      <button type="button" 
        onClick={() => {
          updateCount( prevState => prevState + 1)
        }}>
        Increase Count
      </button>
    </div>
  (
}

Now that we have our counter working let’s figure out how we can get our name input to work the way we want it to.

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>What's your name? </h1>
      <input value={name} 
        onChange={handleNameChange}/>
    </div>
  (
}

Once again we can change props.name to just name. We also know that we want to be able to change the name in the input so we will give it an onChange event with a handleNameChange function that we will write.

const [name, setName] = useState('Billy')

Before we write our handleNameChange function lets get another useState set up, this time for our name state. Just like with count we will destructure an array with our state variable ‘name’ and the function that will be changing the state, ‘setName’ in this case. Once again we will also set ‘useState’ to our initial state.

function handleNameChange(e) {
  setName(e.target.value)
}

Now we can make our handleNameChange function. It’s a very basic function that uses the setName we made above to read the value of the input and change our state.

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, updateCount] = useState(0)
  const [name, setName] = useState('Billy')
  function handleNameChange(e) {
    setName(e.target.value)
  }
return (
    <div>
      <h1>Count: {count}</h1>
      <button type="button" 
        onClick={() => {
          updateCount( prevState => prevState + 1)
        }}>
        Increase Count
      </button>
      <h1>What's your name? </h1>
      <input value={name} 
        onChange={handleNameChange}/>
    </div>
  (
}

Our finished functional component now looks like this. It lets us change the count and name state in our component without having to change it from a functional component to a class. Pretty neat.