Now that we have had a chance to explore Anscombe's Quartet a bit, let's plot it out with D3! :D
Our creation will end up looking something like this:
You can find a completed version of this on my bl.ocks page.
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>
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.
Let's get started!!
Steps
- Create an svg
- Using a data join, add a circle for every element of our array.
- Position the circles based on their x and y attributes.
- Add a scale!
- Add text to circles labeling the coordinate positions
- Redo original join using groups
- Add axes
- Add margins
- Add gridlines
- Add colorscale
- Add hover interactions
- Add buttons / dataswap function if time