Data Labels on the Plot
October 27, 2024 ,

Data Labels on the Plot

=====================================================

In this article, we will explore some examples of scatter plots using JavaScript. A scatter plot is a type of chart that displays data points on a 2D graph with axes representing continuous variables. This type of chart is used to show the relationship between two or more variables.

Scatter Plot with a Color Dimension

In this example, we will create a simple scatter plot where each point has a different color based on its value. We use the marker property to define the size and color of each marker.

var trace1 = {
 y: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
 mode: 'markers',
 marker: {
 size: 40,
 color: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39]
 }
};

var data = [trace1];

var layout = {
 title: 'Scatter Plot with a Color Dimension'
};

Plotly.newPlot('myDiv', data, layout);

Grouped Scatter Plot

In this example, we will create a grouped scatter plot where multiple groups of data are plotted on the same graph. We use the name property to define the group name for each trace.

var trace1 = {
 x: ['South Korea', 'China', 'Canada'],
 y: [24, 10, 9],
 name: 'Gold',
 type: 'scatter',
 mode: 'markers'
};

var trace2 = {
 x: ['South Korea', 'China', 'Canada'],
 y: [13, 15, 12],
 name: 'Silver',
 type: 'scatter',
 mode: 'markers'
};

var trace3 = {
 x: ['South Korea', 'China', 'Canada'],
 y: [11, 8, 12],
 name: 'Bronze',
 type: 'scatter',
 mode: 'markers'
};

var data = [trace1, trace2, trace3];

var layout = {
 scattermode: 'group',
 title: 'Grouped by Country',
 xaxis: {title: 'Country'},
 yaxis: {title: 'Medals'}
};

Plotly.newPlot('myDiv', data, layout);

Grouped Scatter Plot with Custom Scatter Gap

In this example, we will create a grouped scatter plot with a custom scatter gap. We use the scattergap property to define the gap size between each group.

var trace1 = {
 x: ['South Korea', 'China', 'Canada'],
 y: [24, 10, 9],
 name: 'Gold',
 type: 'scatter',
 mode: 'markers'
};

var trace2 = {
 x: ['South Korea', 'China', 'Canada'],
 y: [13, 15, 12],
 name: 'Silver',
 type: 'scatter',
 mode: 'markers'
};

var trace3 = {
 x: ['South Korea', 'China', 'Canada'],
 y: [11, 8, 12],
 name: 'Bronze',
 type: 'scatter',
 mode: 'markers'
};

var data = [trace1, trace2, trace3];

var layout = {
 scattermode: 'group',
 title: 'Grouped by Country',
 xaxis: {title: 'Country'},
 yaxis: {title: 'Medals'},
 scattergap: 0.7
};

Plotly.newPlot('myDiv', data, layout);

###———-

In this article, we have explored some examples of scatter plots using JavaScript. We have seen how to create simple and grouped scatter plots with custom settings. By using these charts, you can effectively visualize relationships between variables and gain insights into your data.

Other Chart Types

  • Bar Charts: Use bar charts to compare categorical data across different groups.
  • Line Charts: Use line charts to show trends over time or other continuous variables.
  • Bubble Charts: Use bubble charts to show the relationship between three variables.

By using these different chart types, you can gain a deeper understanding of your data and make more informed decisions.

Tags:
Share this