Scatter Plot Angular & D3.js
Welcome to the D3.js Angular graph gallery: a collection of simple charts made with d3.js & angular created by LAAKISSI Achraf. D3.js is a JavaScript library for manipulating documents based on data. This gallery of a few graphics, always providing reproducible and editable source code. If you are new to creating graphics with Angular & D3.js, this is probably the place to start.
This post describes how to build a grouped scatter plot chart using angular & d3.js. we’ve built a component you just need to add to your project, passing the input data, specifying other options and you get your chart easily. you can find the code on our website or in stackblitz.
A Scatter Chart (also called a scatter plot, scatter graph, or scatter diagram) is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data.
The scatterplot is one of the easiest charts to make with d3.js, and thus a good starting point if you’re discovering this tool.
Grouped scatter is a common practice in scatterplots. It allows to investigate how groups behave for the 2 numeric variables.
Input dataset provides the Sepal_Length, Sepal_Width, Petal_Length, Petal_Width, and Species
Component inputs :
- data: It is an array of object contained the Sepal_Length, Sepal_Width, Petal_Length, Petal_Width, and Species
- groupeLabales: It is an array of objects contained the name of xlabales, color.
https://stackblitz.com/edit/angular-d3-js-scatter-chart
Click here to check out some other awesome charts. Any feedback is highly encouraged. You can fill an issue on Github, drop me a message on Twitter / Linkedin, or send an email.
