| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Mon, 28 Jul 2025 08:04:55 GMT
etag: W/"687e6266-7d1b"
expires: Mon, 28 Jul 2025 08:14:55 GMT
last-modified: Mon, 21 Jul 2025 15:53:10 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: b1acb480f30c72164b487a326417130d416f179b
x-github-request-id: C7A6:91AA9:1DC993:23607A:68872F25
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210043-BOM
x-timer: S1753689896.531982,VS0,VE227
x-vercel-cache: MISS
x-vercel-id: bom1::kmp6d-1753689895520-9a0ad871e4c0
content-length: 8410
Dropdown events in JavaScript
Dropdown Events in JavaScript
Use Plotly to create custom dropdowns in D3.js-based JavaScript charts.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
function makeTrace(i) {
return {
y: Array.apply(null, Array(10)).map(() => Math.random()),
line: {
shape: 'spline' ,
color: 'red'
},
visible: i === 0,
name: 'Data set ' + i,
};
}
Plotly.newPlot('myDiv', [0, 1, 2, 3].map(makeTrace), {
updatemenus: [{
y: 0.8,
yanchor: 'top',
buttons: [{
method: 'restyle',
args: ['line.color', 'red'],
label: 'red'
}, {
method: 'restyle',
args: ['line.color', 'blue'],
label: 'blue'
}, {
method: 'restyle',
args: ['line.color', 'green'],
label: 'green'
}]
}, {
y: 1,
yanchor: 'top',
buttons: [{
method: 'restyle',
args: ['visible', [true, false, false, false]],
label: 'Data set 0'
}, {
method: 'restyle',
args: ['visible', [false, true, false, false]],
label: 'Data set 1'
}, {
method: 'restyle',
args: ['visible', [false, false, true, false]],
label: 'Data set 2'
}, {
method: 'restyle',
args: ['visible', [false, false, false, true]],
label: 'Data set 3'
}]
}],
});d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var allCountryNames = unpack(rows, 'country'),
allYear = unpack(rows, 'year'),
allGdp = unpack(rows, 'gdpPercap'),
listofCountries = [],
currentCountry,
currentGdp = [],
currentYear = [];
for (var i = 0; i < allCountryNames.length; i++ ){
if (listofCountries.indexOf(allCountryNames[i]) === -1 ){
listofCountries.push(allCountryNames[i]);
}
}
function getCountryData(chosenCountry) {
currentGdp = [];
currentYear = [];
for (var i = 0 ; i < allCountryNames.length ; i++){
if ( allCountryNames[i] === chosenCountry ) {
currentGdp.push(allGdp[i]);
currentYear.push(allYear[i]);
}
}
};
// Default Country Data
setBubblePlot('Afghanistan');
function setBubblePlot(chosenCountry) {
getCountryData(chosenCountry);
var trace1 = {
x: currentYear,
y: currentGdp,
mode: 'lines+markers',
marker: {
size: 12,
opacity: 0.5
}
};
var data = [trace1];
var layout = {
title: {text: 'Line and Scatter Plot'},
height: 400,
width: 480
};
Plotly.newPlot('myDiv', data, layout);
};
var innerContainer = document.querySelector('[data-num="0"'),
plotEl = innerContainer.querySelector('.plot'),
countrySelector = innerContainer.querySelector('.countrydata');
function assignOptions(textArray, selector) {
for (var i = 0; i < textArray.length; i++) {
var currentOption = document.createElement('option');
currentOption.text = textArray[i];
selector.appendChild(currentOption);
}
}
assignOptions(listofCountries, countrySelector);
function updateCountry(){
setBubblePlot(countrySelector.value);
}
countrySelector.addEventListener('change', updateCountry, false);
});