Creating a simple scatter plot

In this chapter, we have so far gathered a lot of knowledge that we want to apply to a real-world application. Let me briefly summarize what you learned so far: creating a Selection of circles, binding an array of data to the Selection, creating new circles if there are new values in the array, and changing their attributes depending on the bound data. These are all the necessary prerequisites to create a first scatter chart. In the following figure, we can already see what we want to create:

Simple scatter chart

To go one step further, we want to add and delete data points to the chart to use and see the power of data joins. Let's start with a simple setup and create the parent container of the chart:

<svg width="800" height="500"></svg>
<script type="text/javascript">
// Our code goes here
</script>

Now, we need to create an array of data points that we want to draw. These points can differ in the coordinates...