Skip to content

Latest commit

 

History

History
66 lines (47 loc) · 3.66 KB

anscombe.md

File metadata and controls

66 lines (47 loc) · 3.66 KB
Raw

Anscombe Quartet Scatter Plot

Now that we have had a chance to explore Anscombe's Quartet a bit, let's plot it out with D3! :D

We'll make a fairly basic plot with no interactions to start that will end up looking something like this:

Hopefully we'll have time to add interactions later.

Note: Since Mike doesn't technically make valid HTML pages, we're not going to either — here's how we'll start our own empty HTML pages from here on out:

<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">
  /*css to go here*/
</style>

<body></body>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
  //JS to go here
</script>

Steps:

  1. First, go to this pen and fork it. You'll notice the code is set up like above, plus I've added styling that will add a pink border around any svg we might draw.
svg {
  border: 1px solid #f0f;
}
  1. Make a Javascript object out of your tabular data and make sure you know how to manipulate it. (This is an annoying but useful exercise in getting useful in a text editor. Here's instructions on how to do multiple selections with codepen.) I'll use the data from the group number II, but you should chart whatever you drew.

Once you're done with it, it should look something like this:

var data = [
  {"group": "II", "x":10, "y" : 9.14},
  ...
  {"group": "II", "x":5, "y" : 4.74}
];
  1. Add an SVG element of width 720 and height 400.
  2. Using a data join, add a circle for every element of our array. Give it a radius 5 and a class, `anscombe-circle'. Inspect it in the console. (You can pull up a Javascript console by clicking console in the bottom left corner of the pen)
  3. Position the circles based on their x and y attributes. How does SVG interpret these positions?
  4. We need a scale. Let's go over a quick talk (tktk, add slides) about scales, and then create one!
  5. Let's label the coordinate positions of each using text. At this point, we'll talk about how we can avoid this second data join and make our code a bit more efficient.
  6. Redo the original join, using groups first, then appending circles and text. Note SVG transformation documentation, which is not that fun.
  7. Maybe axes are in order?
  8. We might need to move our axes around. We'll go through the math. Also, maybe add some styles?
  9. The margins are a problem, and they will always be. Here's a great trick we'll use on every chart we make from here on out.
  10. Let's style the chart to match our drawing. Things like tickSize might help.
  11. Let's add a sequential colorscale for fun.

Alright, we've done a lot! What we have should look pretty similar now to the plot above. Unfortunately, though, our chart isn't really better than what we get with the free tools. (Paste your data into Chartbuilder and feel free to weep.) What makes D3 different is its ability to create dynamic visualizations and things that tools aren't designed to create.

See an interactive version of this chart here.