| 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: Tue, 14 Oct 2025 18:33:20 GMT
etag: W/"68e952e4-81d1"
expires: Tue, 14 Oct 2025 18:43:19 GMT
last-modified: Fri, 10 Oct 2025 18:39:32 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: 51b79050216df608288cc78b1670dca0f008e0d5
x-github-request-id: 7DF5:34A873:DD46F:103874:68EE976D
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210084-BOM
x-timer: S1760466800.783716,VS0,VE281
x-vercel-cache: MISS
x-vercel-id: bom1::gq2b6-1760466799774-ce1c57864cf3
content-length: 8520
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. Try Plotly Studio 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);
});