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...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Data Visualization with D3 and AngularJS

By : Hanchett, Körner

Data Visualization with D3 and AngularJS

By: Hanchett, Körner

Overview of this book

Creating a simple scatter plot

Data Visualization with D3 and AngularJS

By : Hanchett, Körner

Data Visualization with D3 and AngularJS

By: Hanchett, Körner

Overview of this book

Creating a simple scatter plot

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access