Curriculum

Course: JavaScript Basic

Login

Curriculum

JavaScript Basic

JSHome

0/216

JS Versions

0/36

JS Objects

0/15

JS Funtions

0/22

JS Classes

0/3

JS Async

0/10

JS HTML DOM

0/25

JS Browser BOM

0/17

JS Web APIs

0/7

JS AJAX

0/11

JS JSON

0/16

JS vs jQuery

0/4

JS Graphics

0/7

Text lesson

Bubble Plots

Bubble plots are a variation of scatter plots where markers can vary in color, size, and shape.

This type of chart represents three dimensions using only two axes (x and y), with the size of each bubble indicating the third dimension.

bubble pots

Source Code

const xArray = [1,2,3,4];
const yArray = [10,20,30,40];

const trace1 = {
  x: xArray,
  y: yArray,
  mode: ‘markers’,
  marker: {
    color: [‘red’, ‘green’, ‘blue’, ‘orange’],
    size: [20, 30, 40, 50]
  }
};

const data = [trace1];

const layout = {
  title: “Plotting Bubbles”
};

Plotly.newPlot(‘myPlot’, data, layout);

Linear Graphs

Source Code

let exp = “x + 17”;

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 1) {
  yValues.push(eval(exp));
  xValues.push(x);
}

// Define Data
const data = [{
  x: xValues,
  y: yValues,
  mode: “lines”
}];

// Define Layout
const layout = {title: “y = “ + exp};

// Display using Plotly
Plotly.newPlot(“myPlot”, data, layout);

Multiple Lines

Source Code

let exp1 = “x”;
let exp2 = “1.5*x”;
let exp3 = “1.5*x + 7”;

// Generate values
const x1Values = [];
const x2Values = [];
const x3Values = [];
const y1Values = [];
const y2Values = [];
const y3Values = [];

for (let x = 0; x <= 10; x += 1) {
  x1Values.push(x);
  x2Values.push(x);
  x3Values.push(x);
  y1Values.push(eval(exp1));
  y2Values.push(eval(exp2));
  y3Values.push(eval(exp3));
}

// Define Data
const data = [
  {x: x1Values, y: y1Values, mode:“lines”},
  {x: x2Values, y: y2Values, mode:“lines”},
  {x: x3Values, y: y3Values, mode:“lines”}
];

// Define Layout
const layout = {title: “[y=” + exp1 + “] [y=” + exp2 + “] [y=” + exp3 + “]”};

// Display using Plotly
Plotly.newPlot(“myPlot”, data, layout);