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: "Step 2: Create chart dimensions"
description: "The second step: creating chart dimensions. This time, we learn how to create a square chart that fits within any browser window."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/053dlssxxw
code: https://gitlab.com/fullstackio/books/newline-course-apps/amelia-wattenberger-fullstack-d3-masterclass-app/-/tree/main/code/module_01/lesson_01.03/protected/code/02-making-a-scatterplot?ref_type=heads
---

# Create chart dimensions

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

Next up, we need to define the dimensions of our chart. Typically, scatterplots are square, with the x axis as wide as the y axis is tall. This makes it easier to look at the overall shape of the data points once they're plotted by not stretching or squashing one of the scales.

To make a square chart, we want the height to be the same as the width. We could use the same width we used in **Module 1** (`window.innerWidth * 0.9`), but then the chart might extend down the page, out of view on horizontal screens.

Ideally, **the chart will be as large as possible while still fitting on our screen**.

To fix this problem, we want to use either the height or the width of the `window`, **whichever one is smaller**. And because we want to leave a _little_ bit of whitespace around the chart, we'll multiply the value by `0.9` (so 90% of the total width or height).

**d3-array** can help us out here with the `d3.min` method. `d3.min` takes two arguments:

1.  an array of data points
2.  an accessor function to grab the value from each data point

Though in this case we won't need to specify the second parameter because it defaults to an identity function and returns the value.

```javascript { actualFilename=./protected/code/02-making-a-scatterplot/completed/chart.js endChar=377 endLine=17 startChar=289 startLine=14 statedFilename=code/02-making-a-scatterplot/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_01/lesson_01.03/protected/code/02-making-a-scatterplot/completed/chart.js#L14 }
const width = d3.min([
  window.innerWidth * 0.9,
  window.innerHeight * 0.9,
])
```

A>There is a native browser method (`Math.min`) that will also find the lowest number — why wouldn't we use that? `Math.min` is great, but there are a few benefits to `d3.min`:
A>
A>- `Math.min` will count any `null`s in the array as `0`, whereas `d3.min` will ignore them
A>- `Math.min` will return `NaN` if there is a value in the array that is `undefined` or can't be converted into a number, whereas `d3.min` will ignore it
A>- `d3.min` will prevent the need to create another array of values if we need to use an accessor function
A>- `Math.min` will return `Infinity` if the dataset is empty, whereas `d3.min` will return `undefined`
A>- `Math.min` uses numeric order, whereas `d3.min` uses natural order, which allows it to handle strings. Make sure to convert your values to numbers beforehand
A>
A>You can see how `d3.min` would be preferable when creating charts, especially when using dynamic data.

The second step: creating chart dimensions. This time, we learn how to create a square chart that fits within any browser window.