Scatter Plots in JavaScript

How to make D3.js-based line and scatter plots in JavaScript. Examples of basic and colored line and scatter plots.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Line and Scatter Plot

var trace1 = { x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers', type: 'scatter' }; var trace2 = { x: [2, 3, 4, 5], y: [16, 5, 11, 9], mode: 'lines', type: 'scatter' }; var trace3 = { x: [1, 2, 3, 4], y: [12, 9, 15, 12], mode: 'lines+markers', type: 'scatter' }; var data = [trace1, trace2, trace3]; Plotly.newPlot('myDiv', data);

Data Labels Hover

var trace1 = { x: [1, 2, 3, 4, 5], y: [1, 6, 3, 6, 1], mode: 'markers', type: 'scatter', name: 'Team A', text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'], marker: { size: 12 } }; var trace2 = { x: [1.5, 2.5, 3.5, 4.5, 5.5], y: [4, 1, 7, 1, 4], mode: 'markers', type: 'scatter', name: 'Team B', text: ['B-a', 'B-b', 'B-c', 'B-d', 'B-e'], marker: { size: 12 } }; var data = [ trace1, trace2 ]; var layout = { xaxis: { range: [ 0.75, 5.25 ] }, yaxis: { range: [0, 8] }, title: {text: 'Data Labels Hover'} }; Plotly.newPlot('myDiv', data, layout);

Data Labels on The Plot

var trace1 = { x: [1, 2, 3, 4, 5], y: [1, 6, 3, 6, 1], mode: 'markers+text', type: 'scatter', name: 'Team A', text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'], textposition: 'top center', textfont: { family: 'Raleway, sans-serif' }, marker: { size: 12 } }; var trace2 = { x: [1.5, 2.5, 3.5, 4.5, 5.5], y: [4, 1, 7, 1, 4], mode: 'markers+text', type: 'scatter', name: 'Team B', text: ['B-a', 'B-b', 'B-c', 'B-d', 'B-e'], textfont : { family:'Times New Roman' }, textposition: 'bottom center', marker: { size: 12 } }; var data = [ trace1, trace2 ]; var layout = { xaxis: { range: [ 0.75, 5.25 ] }, yaxis: { range: [0, 8] }, legend: { y: 0.5, yref: 'paper', font: { family: 'Arial, sans-serif', size: 20, color: 'grey', } }, title: {text: 'Data Labels on the Plot'} }; Plotly.newPlot('myDiv', data, layout);

Scatter Plot with a Color Dimension

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, 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: { text: 'Scatter Plot with a Color Dimension' } }; Plotly.newPlot('myDiv', data, layout);

Grouped Scatter Plot

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: { text: 'Grouped by Country' }, xaxis: { title: { text: 'Country' } }, yaxis: { title: { text: 'Medals' } } }; Plotly.newPlot('myDiv', data, layout);

Grouped Scatter Plot with Custom Scatter Gap

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: { text: 'Grouped by Country' }, xaxis: { title: { text: 'Country' } }, yaxis: { title: { text: 'Medals' } }, scattergap: 0.7 }; Plotly.newPlot('myDiv', data, layout);