Scatter

Scatter chart

Each row is a marker. The first value column is the position across, the second the position up. The headers of those two columns are the titles of the axes. The name of the row is shown next to its marker.

The scatter chart is an additional type. To use it, load it before the charts are made. See Load it.

<figure data-chart="scatter">
	<figcaption><b>Harvest and price per variety</b></figcaption>
	<table>
		<thead>
			<tr><th>Variety</th><th>Harvest per tree (kg)</th><th>Price per kg (€)</th></tr>
		</thead>
		<tbody>
			<tr><th>Elstar</th><td>62</td><td>1.20</td></tr>
			<tr><th>Jonagold</th><td>75</td><td>1.05</td></tr>
			<tr><th>Braeburn</th><td>48</td><td>1.45</td></tr>
			<tr><th>Gala</th><td>55</td><td>1.30</td></tr>
			<tr><th>Cox</th><td>35</td><td>1.85</td></tr>
			<tr><th>Discovery</th><td>30</td><td>1.75</td></tr>
		</tbody>
	</table>
</figure>

The axes start a little below the lowest value and end a little above the highest value, so they do not always start at zero. The numbers along the axes have the same format as the numbers in the table, with the same text around them, such as %.

If a row has no number in one of the two columns, it has no marker. The row stays in the table.

Bubbles

If there is a third value column, it sets the size of each marker: the area of a marker matches its value. The largest marker is --tablechart-bubble-max wide, 24px by default. The header of the column is shown in the legend, with a small and a large circle.

<figure data-chart="scatter">
	<figcaption><b>Harvest, price and number of trees</b></figcaption>
	<table>
		<thead>
			<tr><th>Variety</th><th>Harvest per tree (kg)</th><th>Price per kg (€)</th><th>Trees</th></tr>
		</thead>
		<tbody>
			<tr><th>Elstar</th><td>62</td><td>1.20</td><td>420</td></tr>
			<tr><th>Jonagold</th><td>75</td><td>1.05</td><td>310</td></tr>
			<tr><th>Braeburn</th><td>48</td><td>1.45</td><td>180</td></tr>
			<tr><th>Gala</th><td>55</td><td>1.30</td><td>260</td></tr>
			<tr><th>Cox</th><td>35</td><td>1.85</td><td>120</td></tr>
			<tr><th>Discovery</th><td>30</td><td>1.75</td><td>60</td></tr>
		</tbody>
	</table>
</figure>

If two markers overlap, the smaller one is on top.

Groups

To show groups, add data-group to the header of a column with names, such as "Eating" and "Cooking". Each group then has its own colour, its own shape (a circle, a triangle, a square or a diamond) and an entry in the legend. The colours are --tablechart-color-1, --tablechart-color-2 and so on. See Colours.

<figure class="scatter-colours" data-chart="scatter">
	<figcaption><b>Eating and cooking apples</b></figcaption>
	<table>
		<thead>
			<tr><th>Variety</th><th>Harvest per tree (kg)</th><th>Price per kg (€)</th><th>Trees</th><th data-group>Use</th></tr>
		</thead>
		<tbody>
			<tr><th>Elstar</th><td>62</td><td>1.20</td><td>420</td><td>Eating</td></tr>
			<tr><th>Jonagold</th><td>75</td><td>1.05</td><td>310</td><td>Eating</td></tr>
			<tr><th>Braeburn</th><td>48</td><td>1.45</td><td>180</td><td>Eating</td></tr>
			<tr><th>Gala</th><td>55</td><td>1.30</td><td>260</td><td>Eating</td></tr>
			<tr><th>Cox</th><td>35</td><td>1.85</td><td>120</td><td>Eating</td></tr>
			<tr><th>Discovery</th><td>30</td><td>1.75</td><td>60</td><td>Eating</td></tr>
			<tr><th>Boskoop</th><td>70</td><td>0.95</td><td>200</td><td>Cooking</td></tr>
			<tr><th>Granny Smith</th><td>40</td><td>1.60</td><td>90</td><td>Cooking</td></tr>
			<tr><th>Bramley</th><td>70</td><td>0.95</td><td>140</td><td>Cooking</td></tr>
		</tbody>
	</table>
</figure>

.scatter-colours {
	--tablechart-color-1: #3f7fbf;
	--tablechart-color-2: #d9844f;
}

The group names are cells of the table, so screen readers read them. If the figure has data-chart-keys, each group name gets a translation key, such as apples-group1. See Translation.

Names

If there is room, a name is shown to the right of its marker. If not, it goes to the left, above, below, or to one of the corners. A name does not cover a marker or another name, and stays inside the axes. Larger markers get their place first.

If a name has no room at all, it is left out. The chart then has a tooltip: if you point at a marker, its name is shown. See Tooltips.

If rows have the same two numbers, their markers are in the same place. They then share one name, with the number of the other rows, such as Boskoop +1 above. The tooltip of that marker shows all their names.

To turn the names off, add data-chart-names="false". The tooltip then shows the name of the marker you point at. To turn them off on every scatter chart, set the names option to false.

<figure data-chart="scatter" data-chart-names="false">

If a chart has more than 400 markers, no names are placed. They are all left out, and the tooltip shows them.

Axes

To set the axis up yourself, add data-chart-scale. If you give two numbers, they are where the axis starts and ends. If you give three or more, they are the numbers along the axis. data-chart-scale-x does the same for the axis across. data-chart-scale-y is another name for data-chart-scale.

<figure data-chart="scatter" data-chart-scale-x="0 100" data-chart-scale="0 0.5 1 1.5 2">
	<figcaption><b>From zero</b></figcaption>
	<table>
		<thead>
			<tr><th>Variety</th><th>Harvest per tree (kg)</th><th>Price per kg (€)</th></tr>
		</thead>
		<tbody>
			<tr><th>Elstar</th><td>62</td><td>1.20</td></tr>
			<tr><th>Jonagold</th><td>75</td><td>1.05</td></tr>
			<tr><th>Braeburn</th><td>48</td><td>1.45</td></tr>
			<tr><th>Gala</th><td>55</td><td>1.30</td></tr>
			<tr><th>Cox</th><td>35</td><td>1.85</td></tr>
			<tr><th>Discovery</th><td>30</td><td>1.75</td></tr>
		</tbody>
	</table>
</figure>

If you do not give numbers, the axis goes up in steps of 1, 2 or 5 times 10, 100 and so on. If the chart is narrow, it shows fewer numbers, so they do not touch.

Gridlines

To add a light line at each number along both axes, add data-chart-grid. To add them to every chart, set the grid option to true.

<figure data-chart="scatter" data-chart-grid>
	<figcaption><b>With gridlines</b></figcaption>
	<table>
		<thead>
			<tr><th>Variety</th><th>Harvest per tree (kg)</th><th>Price per kg (€)</th></tr>
		</thead>
		<tbody>
			<tr><th>Elstar</th><td>62</td><td>1.20</td></tr>
			<tr><th>Jonagold</th><td>75</td><td>1.05</td></tr>
			<tr><th>Braeburn</th><td>48</td><td>1.45</td></tr>
			<tr><th>Gala</th><td>55</td><td>1.30</td></tr>
			<tr><th>Cox</th><td>35</td><td>1.85</td></tr>
			<tr><th>Discovery</th><td>30</td><td>1.75</td></tr>
		</tbody>
	</table>
</figure>

--tablechart-grid-color, --tablechart-grid-opacity and --tablechart-grid-width set how the gridlines look. --tablechart-axis-color, --tablechart-axis-width and --tablechart-axis-size set the axes and the text along them. See Axes and gridlines.

Load it

The scatter chart is not in the main script. It is an additional type, in a script of its own. See Additional types.

import { addType, init } from "@martinomagnifico/tablechart";
import { scatter } from "@martinomagnifico/tablechart/additional-types";

addType("scatter", scatter);
init();

If you use a script tag, load tablechart-additional-types.js after tablechart.js. It adds the scatter chart.

<script src="tablechart.js"></script>
<script src="tablechart-additional-types.js"></script>
<script>
	Tablechart.init();
</script>

What it does not do

A scatter chart has no steps, no stacks and no break in the scale. If a figure has one of those, the chart is shown whole. For a stack or a break, the console shows a warning. For steps, it shows a message if the debug option is on.

Next

To set the colours of the groups, see Colours. For all the attributes, see Attributes.