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);

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

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);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var trace1 = {\n x: ['South Korea', 'China', 'Canada'],\n y: [24, 10, 9],\n name: 'Gold',\n type: 'scatter',\n mode: 'markers'\n};\n\nvar trace2 = {\n x: ['South Korea', 'China', 'Canada'],\n y: [13, 15, 12],\n name: 'Silver',\n type: 'scatter',\n mode: 'markers'\n};\n\nvar trace3 = {\n x: ['South Korea', 'China', 'Canada'],\n y: [11, 8, 12],\n name: 'Bronze',\n type: 'scatter',\n mode: 'markers'\n};\n\nvar data = [trace1, trace2, trace3];\n\nvar layout = {\n scattermode: 'group',\n title: {\n text: 'Grouped by Country'\n },\n xaxis: {\n title: {\n text: 'Country'\n }\n },\n yaxis: {\n title: {\n text: 'Medals'\n }\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n\n\n"}">

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);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var trace1 = {\n x: ['South Korea', 'China', 'Canada'],\n y: [24, 10, 9],\n name: 'Gold',\n type: 'scatter',\n mode: 'markers'\n};\n\nvar trace2 = {\n x: ['South Korea', 'China', 'Canada'],\n y: [13, 15, 12],\n name: 'Silver',\n type: 'scatter',\n mode: 'markers'\n};\n\nvar trace3 = {\n x: ['South Korea', 'China', 'Canada'],\n y: [11, 8, 12],\n name: 'Bronze',\n type: 'scatter',\n mode: 'markers'\n};\n\nvar data = [trace1, trace2, trace3];\n\nvar layout = {\n scattermode: 'group',\n title: {\n text: 'Grouped by Country'\n },\n xaxis: {\n title: {\n text: 'Country'\n }\n },\n yaxis: {\n title: {\n text: 'Medals'\n }\n },\n scattergap: 0.7\n};\n\nPlotly.newPlot('myDiv', data, layout);\n\n\n"}">