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. Sign up for early access now.
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); 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); 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); // 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); 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); 