JavaScript > Basic Charts > Bubble Charts
Suggest an edit to this page

Bubble Charts in JavaScript

How to make a D3.js-based bubble chart in javascript. Examples of scatter charts whose markers have variable color, size, and symbols.


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

Marker Size on Bubble Charts 

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  marker: {
    size: [40, 60, 80, 100]
  }
};

var data = [trace1];

var layout = {
  title: {
    text: 'Marker Size'
  },
  showlegend: false,
  height: 600,
  width: 600
};

Plotly.newPlot('myDiv', data, layout);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [1, 2, 3, 4],\n y: [10, 11, 12, 13],\n mode: 'markers',\n marker: {\n size: [40, 60, 80, 100]\n }\n};\n\nvar data = [trace1];\n\nvar layout = {\n title: {\n text: 'Marker Size'\n },\n showlegend: false,\n height: 600,\n width: 600\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

Marker Size and Color on Bubble Charts 

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  marker: {
    color: ['rgb(93, 164, 214)', 'rgb(255, 144, 14)',  'rgb(44, 160, 101)', 'rgb(255, 65, 54)'],
    opacity: [1, 0.8, 0.6, 0.4],
    size: [40, 60, 80, 100]
  }
};

var data = [trace1];

var layout = {
  title: {
    text: 'Marker Size and Color'
  },
  showlegend: false,
  height: 600,
  width: 600
};

Plotly.newPlot('myDiv', data, layout);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [1, 2, 3, 4],\n y: [10, 11, 12, 13],\n mode: 'markers',\n marker: {\n color: ['rgb(93, 164, 214)', 'rgb(255, 144, 14)', 'rgb(44, 160, 101)', 'rgb(255, 65, 54)'],\n opacity: [1, 0.8, 0.6, 0.4],\n size: [40, 60, 80, 100]\n }\n};\n\nvar data = [trace1];\n\nvar layout = {\n title: {\n text: 'Marker Size and Color'\n },\n showlegend: false,\n height: 600,\n width: 600\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

Hover Text on Bubble Charts 

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  text: ['A<br>size: 40', 'B<br>size: 60', 'C<br>size: 80', 'D<br>size: 100'],
  mode: 'markers',
  marker: {
    color: ['rgb(93, 164, 214)', 'rgb(255, 144, 14)',  'rgb(44, 160, 101)', 'rgb(255, 65, 54)'],
    size: [40, 60, 80, 100]
  }
};

var data = [trace1];

var layout = {
  title: {
    text: 'Bubble Chart Hover Text'
  },
  showlegend: false,
  height: 600,
  width: 600
};

Plotly.newPlot('myDiv', data, layout);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [1, 2, 3, 4],\n y: [10, 11, 12, 13],\n text: ['A<br>size: 40', 'B<br>size: 60', 'C<br>size: 80', 'D<br>size: 100'],\n mode: 'markers',\n marker: {\n color: ['rgb(93, 164, 214)', 'rgb(255, 144, 14)', 'rgb(44, 160, 101)', 'rgb(255, 65, 54)'],\n size: [40, 60, 80, 100]\n }\n};\n\nvar data = [trace1];\n\nvar layout = {\n title: {\n text: 'Bubble Chart Hover Text'\n },\n showlegend: false,\n height: 600,\n width: 600\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

Bubble Size Scaling on Charts 

// To scale the bubble size, use the attribute sizeref. We recommend using the following formula to calculate a sizeref value:
// sizeref = 2.0 * Math.max(...size) / (desired_maximum_marker_size**2)
// Note that setting 'sizeref' to a value greater than 1, decreases the rendered marker sizes, while setting 'sizeref' to less than 1, increases the rendered marker sizes. See https://plotly.com/python/reference/scatter/#scatter-marker-sizeref for more information. Additionally, we recommend setting the sizemode attribute: https://plotly.com/python/reference/scatter/#scatter-marker-sizemode to area.

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  text: ['A<br>size: 40', 'B<br>size: 60', 'C<br>size: 80', 'D<br>size: 100'],
  mode: 'markers',
  marker: {
    size: [400, 600, 800, 1000],
    sizemode: 'area'
  }
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [14, 15, 16, 17],
  text: ['A</br>size: 40</br>sixeref: 0.2', 'B</br>size: 60</br>sixeref: 0.2', 'C</br>size: 80</br>sixeref: 0.2', 'D</br>size: 100</br>sixeref: 0.2'],
  mode: 'markers',
  marker: {
    size: [400, 600, 800, 1000],
    //setting 'sizeref' to lower than 1 decreases the rendered size
    sizeref: 2,
    sizemode: 'area'
  }
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [20, 21, 22, 23],
  text: ['A</br>size: 40</br>sixeref: 2', 'B</br>size: 60</br>sixeref: 2', 'C</br>size: 80</br>sixeref: 2', 'D</br>size: 100</br>sixeref: 2'],
  mode: 'markers',
  marker: {
    size: [400, 600, 800, 1000],
    //setting 'sizeref' to less than 1, increases the rendered marker sizes
    sizeref: 0.2,
    sizemode: 'area'
  }
};

// sizeref using above formula
var desired_maximum_marker_size = 40;
var size = [400, 600, 800, 1000];
var trace4 = {
  x: [1, 2, 3, 4],
  y: [26, 27, 28, 29],
  text: ['A</br>size: 40</br>sixeref: 1.25', 'B</br>size: 60</br>sixeref: 1.25', 'C</br>size: 80</br>sixeref: 1.25', 'D</br>size: 100</br>sixeref: 1.25'],
  mode: 'markers',
  marker: {
    size: size,
    //set 'sizeref' to an 'ideal' size given by the formula sizeref = 2. * max(array_of_size_values) / (desired_maximum_marker_size ** 2)
    sizeref: 2.0 * Math.max(...size) / (desired_maximum_marker_size**2),
    sizemode: 'area'
  }
};

var data = [trace1, trace2, trace3, trace4];

var layout = {
  title: {
    text: 'Size Scaling in Bubble Charts'
  },
  showlegend: false,
  height: 600,
  width: 600
};

Plotly.newPlot('myDiv', data, layout);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"// To scale the bubble size, use the attribute sizeref. We recommend using the following formula to calculate a sizeref value:\n// sizeref = 2.0 * Math.max(...size) / (desired_maximum_marker_size**2)\n// Note that setting 'sizeref' to a value greater than 1, decreases the rendered marker sizes, while setting 'sizeref' to less than 1, increases the rendered marker sizes. See https://plotly.com/python/reference/scatter/#scatter-marker-sizeref for more information. Additionally, we recommend setting the sizemode attribute: https://plotly.com/python/reference/scatter/#scatter-marker-sizemode to area.\n\nvar trace1 = {\n x: [1, 2, 3, 4],\n y: [10, 11, 12, 13],\n text: ['A<br>size: 40', 'B<br>size: 60', 'C<br>size: 80', 'D<br>size: 100'],\n mode: 'markers',\n marker: {\n size: [400, 600, 800, 1000],\n sizemode: 'area'\n }\n};\n\nvar trace2 = {\n x: [1, 2, 3, 4],\n y: [14, 15, 16, 17],\n text: ['A</br>size: 40</br>sixeref: 0.2', 'B</br>size: 60</br>sixeref: 0.2', 'C</br>size: 80</br>sixeref: 0.2', 'D</br>size: 100</br>sixeref: 0.2'],\n mode: 'markers',\n marker: {\n size: [400, 600, 800, 1000],\n //setting 'sizeref' to lower than 1 decreases the rendered size\n sizeref: 2,\n sizemode: 'area'\n }\n};\n\nvar trace3 = {\n x: [1, 2, 3, 4],\n y: [20, 21, 22, 23],\n text: ['A</br>size: 40</br>sixeref: 2', 'B</br>size: 60</br>sixeref: 2', 'C</br>size: 80</br>sixeref: 2', 'D</br>size: 100</br>sixeref: 2'],\n mode: 'markers',\n marker: {\n size: [400, 600, 800, 1000],\n //setting 'sizeref' to less than 1, increases the rendered marker sizes\n sizeref: 0.2,\n sizemode: 'area'\n }\n};\n\n// sizeref using above formula\nvar desired_maximum_marker_size = 40;\nvar size = [400, 600, 800, 1000];\nvar trace4 = {\n x: [1, 2, 3, 4],\n y: [26, 27, 28, 29],\n text: ['A</br>size: 40</br>sixeref: 1.25', 'B</br>size: 60</br>sixeref: 1.25', 'C</br>size: 80</br>sixeref: 1.25', 'D</br>size: 100</br>sixeref: 1.25'],\n mode: 'markers',\n marker: {\n size: size,\n //set 'sizeref' to an 'ideal' size given by the formula sizeref = 2. * max(array_of_size_values) / (desired_maximum_marker_size ** 2)\n sizeref: 2.0 * Math.max(...size) / (desired_maximum_marker_size**2),\n sizemode: 'area'\n }\n};\n\nvar data = [trace1, trace2, trace3, trace4];\n\nvar layout = {\n title: {\n text: 'Size Scaling in Bubble Charts'\n },\n showlegend: false,\n height: 600,\n width: 600\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

Marker Size, Color, and Symbol as an Array 

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  marker: {
    color: ['hsl(0,100,40)', 'hsl(33,100,40)', 'hsl(66,100,40)', 'hsl(99,100,40)'],
    size: [12, 22, 32, 42],
    opacity: [0.6, 0.7, 0.8, 0.9]
  },
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [11, 12, 13, 14],
  mode: 'markers',
  marker: {
    color: 'rgb(31, 119, 180)',
    size: 18,
    symbol: ['circle', 'square', 'diamond', 'cross']
  },
  type: 'scatter'
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 13, 14, 15],
  mode: 'markers',
  marker: {
    size: 18,
    line: {
      color: ['rgb(120,120,120)', 'rgb(120,120,120)', 'red', 'rgb(120,120,120)'],
      width: [2, 2, 6, 2]
    }
  },
  type: 'scatter'
};

var data = [trace1, trace2, trace3];

var layout = {showlegend: false};

Plotly.newPlot('myDiv', data, layout);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [1, 2, 3, 4],\n y: [10, 11, 12, 13],\n mode: 'markers',\n marker: {\n color: ['hsl(0,100,40)', 'hsl(33,100,40)', 'hsl(66,100,40)', 'hsl(99,100,40)'],\n size: [12, 22, 32, 42],\n opacity: [0.6, 0.7, 0.8, 0.9]\n },\n type: 'scatter'\n};\n\nvar trace2 = {\n x: [1, 2, 3, 4],\n y: [11, 12, 13, 14],\n mode: 'markers',\n marker: {\n color: 'rgb(31, 119, 180)',\n size: 18,\n symbol: ['circle', 'square', 'diamond', 'cross']\n },\n type: 'scatter'\n};\n\nvar trace3 = {\n x: [1, 2, 3, 4],\n y: [12, 13, 14, 15],\n mode: 'markers',\n marker: {\n size: 18,\n line: {\n color: ['rgb(120,120,120)', 'rgb(120,120,120)', 'red', 'rgb(120,120,120)'],\n width: [2, 2, 6, 2]\n }\n },\n type: 'scatter'\n};\n\nvar data = [trace1, trace2, trace3];\n\nvar layout = {showlegend: false};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">