Make a scatter plot with Svelte and D3
Tags: svelte, javascript
Published: 2021-10-15 07:02:53

 > This blog is second in a series of (unofficial) course notes for the Data Visualization with React and D3 series by Curran Kelleher. Read the introductory blog post [here](https://dev.to/learners/series-intro-data-visualization-with-svelte-and-d3-4c07).

The next chart in the series is a scatter plot based on the [Iris Flowers Dataset](https://archive.ics.uci.edu/ml/datasets/iris). I figured we could reuse a lot of the code from earlier examples than rewiriting everything from scratch. A properly cleaned version of the dataset by Curran is available [here](https://gist.githubusercontent.com/curran/9e04ccfebeb84bcdc76c/raw/3d0667367fce04e8ca204117c290c42cece7fde0/iris.csv).The dataset has four numerical columns namely `sepal_length,sepal_width,petal_length,petal_width` which we need to convert to numbers.  Let's change the `row` and `onMount` functions to reflect this:
```js
const  row  =  function  (data)  {
	data.sepal_length  =  +data.sepal_length;
	data.sepal_width  =  +data.sepal_width;
	data.petal_length  =  +data.petal_length;
	data.petal_width  =  +data.petal_width;

	return data;
};

onMount(async  ()  => {

	dataset  =  await  csv(
"https://gist.githubusercontent.com/curran/9e04ccfebeb84bcdc76c/raw/3d0667367fce04e8ca204117c290c42cece7fde0/iris.csv",
	row
	).then((data)  => {
		return  data;
	});
});
```

> in case you are wondering where this code came from, look up this [gist](https://gist.github.com/AnupJoseph/efda2eed51802c5cd9ef21f3a9a0cee8)

The `scaleBand` logic we used before doesn't make much sense in a scatter plot so we need to change that to `scaleLinear`. I am going to plot `petal_width` on X-axis and `petal_length` on Y-axis and so let's change the domain of  `xScale` and `yScale` respectively. Again doesn't matter too much, so feel free to change the X and Y axes to your liking

```js
$: xScale  =  scaleLinear()
	.domain(extent(dataset, (d)  =>  d.petal_width))
	.range([0, width]);	

$: yScale  =  scaleLinear()
	.domain(extent(dataset, (d)  =>  d.petal_length))
	.range([0, height]);
```
To make the dots for the scatter plot we can make use of the `<circle>` SVG tag. in the plotting logic let's replace the `<rect>` tag by `circle` and specify its attributes appropriately.
```html
<circle
	cx={xScale(data.petal_width)}
	cy={yScale(data.petal_length)}
	r="5"
/>
```
![scatter-basic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mlldez3uzpzxiqksljo.png)

Something you probably noticed here is that some dots appear to be cutoff from the SVG. The solution I can think of is to shift all the circles to the left. So I am going to wrap all the circles in a `<g>` apply the `transform` directive on it. Lets use the margins that we initialized way back before to translate it across:
```html
<g  transform={`translate(${margin.left},${margin.right})`}>
	{#each  dataset  as data, i}
		<circle
		cx={xScale(data.petal_width)}
		cy={yScale(data.petal_length)}
		r="5"
		/>
	{/each}
</g>
```
![scatter-cropped](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn4nfxghcljxk19rl5ul.png)
 
I am also going to reconfigure the scales so that we have more space to work with at the bottom of the page and left.
```js
const  innerHeight  =  height  -  margin.top  -  margin.bottom,
innerWidth  =  width  -  margin.left  -  margin.right;

$: xScale  =  scaleLinear()
	.domain(extent(dataset, (d)  =>  d.petal_width))
	.range([0, innerWidth]);

$: yScale  =  scaleLinear()
	.domain(extent(dataset, (d)  =>  d.petal_length))
	.range([0, innerHeight]);
```
The Iris flowers in this dataset are of three different species. I think it makes sense to represent them with  different colors. I am going to map an array of colors to the species using the `scaleOrdinal` function in D3.
```js
const classSet = new Set(dataset.map((d) => d.class));
$: colorScale = scaleOrdinal()
    .domain(classSet)
    .range(["#003049", "#d62828", "#f77f00"]);
```
And then change the `<circle>` element as follows:
```html
<circle
	cx={xScale(data.petal_width)}
	cy={yScale(data.petal_length)}	
	r="5"
	style={`fill:${colorScale(data.class)}`}
/>
```

![scatter-colored](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fq4ej7ctgp9rc3dmsyrc.png)

I think I'll make this a (slightly) more fully fleshed out chart and add labels and axes. First lets add x and y-axis labels. Labels are ofcourse just `<text>` elements.
We add the Y-axis label as follows:
```html
<text  transform={`translate(${-25},${innerHeight  /  2}) rotate(-90)`}
>Petal Length</text>
```
That cryptic transform essentially just shifts to the left of all the circles and then rotate it. The Y-axis label is added as follows:
```html
<text  x={innerWidth  /  2  }  y={innerHeight  +  30}>Petal Width</text>
```
![scatter-colored-axes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfamnx4ps3kcc5d7ez2w.png)
Let's add an X-axis and Y-axis. We could write our own Axis component but I saw a nice reusable axis component that I quite liked [here](https://github.com/TomFevrier/svelte-d3-demo/blob/master/src/Axis.svelte). I am going to make a few changes there and use it.
```html
<script>

	import { select, selectAll } from  "d3-selection";
	import { axisBottom, axisLeft } from  "d3-axis";

	  
	export let  innerHeight;
	export let  margin;
	export let  position;
	export let  scale;

	  

	let  transform;
	let  g;

	$: {

		select(g).selectAll("*").remove();

		let  axis;
		switch (position) {
			case  "bottom":
				axis  =  axisBottom(scale).tickSizeOuter(0);
				transform  =  `translate(0, ${innerHeight})`;
				break;

			case  "left":

				axis  =  axisLeft(scale).tickSizeOuter(0);
				transform  =  `translate(${margin}, 0)`;
	}
	select(g).call(axis);
}
</script>

<g  class="axis"  bind:this={g}  {transform} />
```
Finally lets import the axis component and add it in the `<g>` element like so:
```html
<Axis  {innerHeight}  {margin}  scale={xScale}  position="bottom" />
<Axis  {innerHeight}  {margin}  scale={yScale}  position="left" />
```

![Scatter plot with axes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uq38prlrdadzvuu1huki.png)

Yeah the Y-axis is inverted 😬. Turns out I have doing this a bit wrong. For the record, I did wonder how such thin petals were so long. But then again what do I know about Iris flowers. Fixing this is easy enough. Let's change `yScale` as follows:
```js
$: yScale  =  scaleLinear()
	.domain(extent(dataset, (d)  =>  d.petal_length))
	.range([innerHeight, 0]);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e32ylc7fi6fblv0tzynv.png)

{% gist https://gist.github.com/AnupJoseph/27a5f91d4a1ae6fae0b51cbe4394debd %}
If you want a simple scatter plot then this is probably all you need. I actually went on to add some more (completely unecessary) styling to it. I wanted to see if for each species of the flower we could have different shaped-petals. Not Iris petals shapes of course but petals nonetheless.

So I gathered some petal shapes from a [FrontendMasters](https://frontendmasters.com/courses/d3-js-react/) workshop by Shirley Wu [here](https://observablehq.com/@sxywu/workshop-utility-functions#petalPaths), modified them ever so slightly and saved as `paths.js`

```js
export const  petalPaths  =  [
	'M0 0 C5 5 5 10 0 10 C-5 10 -5 5 0 0',
	'M-3.5 0 C-2.5 2.5 2.5 2.5 3.5 0 C5 2.5 2.5 7.5 0 10 C-2.5 7.5 -5.0 2.5 -3.5 0',
	'M0 0 C5 2.5 5 7.5 0 10 C-5 7.5 -5 2.5 0 0'
]
```
Let's import the `petalpaths` and map them to species using D3 `scaleOrdinal`.
```js
import { petalPaths } from  "./paths";
$: shapeScale  =  scaleOrdinal().domain(classSet).range(petalPaths);
```
Finally instead of plotting circles, we plot a `<path>` element and set the d attribute to `shapeScale`.
```html
<path
	d={shapeScale(data.class)}
	fill={`${colorScale(data.class)}`}
/>
```
We wrap it in a `<g>` element and translate it to their respective position so that they dont overlap each other.
```html
<g

	transform={`translate(${xScale(data.petal_width)},${
	yScale(data.petal_length)  -  5
	})`}
	>
	<path
	d={shapeScale(data.class)}
	fill={`${colorScale(data.class)}`}
	/>
</g>
```
![Scatter plot with Shapes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4y8jnqfmd1nrd2itn353.png)
I love this plot! 
One thing to notice here however is that the plot does loose some accuracy on adding the shapes. So if that's an important concern then best stay away from it. Anyway, I think I'll end here.
Here's the full code - 
{% gist https://gist.github.com/AnupJoseph/44057936917ead0fa565dc6fb1448138 %}

So that's it for today. Have a nice day!