Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Creating our workspace"
description: We create our wrapper and learn about d3 selection objects.
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/63ggyggz5h
code: https://gitlab.com/fullstackio/books/newline-course-apps/amelia-wattenberger-fullstack-d3-masterclass-app/-/tree/main/code/module_00/lesson_00.04/protected/code?ref_type=heads
---

# Creating our workspace

<CodeSandboxEmbed
  src="//codesandbox.io/s/oiigh?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

Now we're set up and ready to start updating our webpage!

To add elements to our page, we'll need to specify an existing element that we want to append to.

Remember the `#wrapper` element already populated in `index.html`? One of d3's modules, [**d3-selection**](https://github.com/d3/d3-selection), has helper functions to select from and modify the DOM.

We create our wrapper and learn about d3 selection objects.