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);
Click to copy
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);
Click to copy
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);
Click to copy
// 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);
Click to copy
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);
Click to copy
