Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
let petsData = ; let categories = ['Length', 'Height', 'Weight']); let canvasWidth = 800; let canvasHeight = 600; function setup()) { createCanvas(canvasWidth, canvasHeight); // Generate random pet data (30 data points) for (let i = 0; i < 30; i++) { let pet = {Length: random(20, 50), Height: random(10, 30), Weight: random(5, 20)}; petsData.push(pet); } // Draw axes and labels drawAxes(); drawLabels(); // Plot data points plotData(); } function drawAxes() { // Draw X and Y axes stroke(0); line(50, canvasHeight - 50, canvasWidth - 50, canvasHeight -50); line(50, canvasHeight 50, 50, 50); } function drawLabels() { // Draw category labels textSize(16); textAlign(CENTER); for (let i = 0; i < categories.length; i++) { let x = map(1, 0, categories.length ■1, 100, canvasWidth 100); text(categories[i], x, canvasHeight - 20);}} function plotData() { // Plot data points as circles noStroke(); fill(66, 135, 245, 150); // Blue with transparency for (let i = 0; i < petsData.length; i++) { let x = map(1, 0, petsData.length - 1, 100, canvasWidth - 100); let length petsData[i]['Length']; let height = petsData[i]['Height']; let weight = petsData[i][' - - Weight']; // Map values to the canvas space let yLength = map(length, 20, 50, canvasHeight - 50, 50); let yHeight = map(height, 10, 30, canvasHeight - 50, 50); let yWeight = map(weight ' 5, 20, canvasHeight - 50, 50); // Draw a circle at each data point ellipse(x, yLength, 10, 10); ellipse(x, yHeight, 10, 10); ellipse(x, yWeight, 10, 10); } } function draw() { // Additional drawing or interactivity can be added here } CAn someone please help me to put this into JS to get the chart.

let petsData = ; let categories = ['Length', 'Height', 'Weight']); let canvasWidth = 800; let canvasHeight = 600; function setup()) { createCanvas(canvasWidth, canvasHeight); // Generate random pet data (30 data points) for (let i = 0; i < 30; i++) { let pet = {Length: random(20, 50), Height: random(10, 30), Weight: random(5, 20)}; petsData.push(pet); } // Draw axes and labels drawAxes(); drawLabels(); // Plot data points plotData(); } function drawAxes() { // Draw X and Y axes stroke(0); line(50, canvasHeight - 50, canvasWidth - 50, canvasHeight -50); line(50, canvasHeight 50, 50, 50); } function drawLabels() { // Draw category labels textSize(16); textAlign(CENTER); for (let i = 0; i < categories.length; i++) { let x = map(1, 0, categories.length ■1, 100, canvasWidth 100); text(categories[i], x, canvasHeight - 20);}} function plotData() { // Plot data points as circles noStroke(); fill(66, 135, 245, 150); // Blue with transparency for (let i = 0; i < petsData.length; i++) { let x = map(1, 0, petsData.length - 1, 100, canvasWidth - 100); let length petsData[i]['Length']; let height = petsData[i]['Height']; let weight = petsData[i][' - - Weight']; // Map values to the canvas space let yLength = map(length, 20, 50, canvasHeight - 50, 50); let yHeight = map(height, 10, 30, canvasHeight - 50, 50); let yWeight = map(weight ' 5, 20, canvasHeight - 50, 50); // Draw a circle at each data point ellipse(x, yLength, 10, 10); ellipse(x, yHeight, 10, 10); ellipse(x, yWeight, 10, 10); } } function draw() { // Additional drawing or interactivity can be added here } CAn someone please help me to put this into JS to get the chart.

EBK JAVA PROGRAMMING
EBK JAVA PROGRAMMING
9th Edition
ISBN:9781337671385
Author:FARRELL
Publisher:FARRELL
Chapter9: Advanced Array Concepts
Section: Chapter Questions
Problem 5RQ
See similar textbooks
icon
Related questions
Question
let petsData = ; let categories = ['Length', 'Height', 'Weight']); let canvasWidth = 800; let canvasHeight = 600; function setup()) { createCanvas(canvasWidth, canvasHeight); // Generate random pet data (30 data points) for (let i = 0; i < 30; i++) { let pet = {Length: random(20, 50), Height: random(10, 30), Weight: random(5, 20)}; petsData.push(pet); } // Draw axes and labels drawAxes(); drawLabels(); // Plot data points plotData(); } function drawAxes() { // Draw X and Y axes stroke(0); line(50, canvasHeight - 50, canvasWidth - 50, canvasHeight -50); line(50, canvasHeight 50, 50, 50); } function drawLabels() { // Draw category labels textSize(16); textAlign(CENTER); for (let i = 0; i < categories.length; i++) { let x = map(1, 0, categories.length ■1, 100, canvasWidth 100); text(categories[i], x, canvasHeight - 20);}} function plotData() { // Plot data points as circles noStroke(); fill(66, 135, 245, 150); // Blue with transparency for (let i = 0; i < petsData.length; i++) { let x = map(1, 0, petsData.length - 1, 100, canvasWidth - 100); let length petsData[i]['Length']; let height = petsData[i]['Height']; let weight = petsData[i][' - - Weight']; // Map values to the canvas space let yLength = map(length, 20, 50, canvasHeight - 50, 50); let yHeight = map(height, 10, 30, canvasHeight - 50, 50); let yWeight = map(weight ' 5, 20, canvasHeight - 50, 50); // Draw a circle at each data point ellipse(x, yLength, 10, 10); ellipse(x, yHeight, 10, 10); ellipse(x, yWeight, 10, 10); } } function draw() { // Additional drawing or interactivity can be added here } CAn someone please help me to put this into JS to get the chart.
Transcribed Image Text:let petsData = ; let categories = ['Length', 'Height', 'Weight']); let canvasWidth = 800; let canvasHeight = 600; function setup()) { createCanvas(canvasWidth, canvasHeight); // Generate random pet data (30 data points) for (let i = 0; i < 30; i++) { let pet = {Length: random(20, 50), Height: random(10, 30), Weight: random(5, 20)}; petsData.push(pet); } // Draw axes and labels drawAxes(); drawLabels(); // Plot data points plotData(); } function drawAxes() { // Draw X and Y axes stroke(0); line(50, canvasHeight - 50, canvasWidth - 50, canvasHeight -50); line(50, canvasHeight 50, 50, 50); } function drawLabels() { // Draw category labels textSize(16); textAlign(CENTER); for (let i = 0; i < categories.length; i++) { let x = map(1, 0, categories.length ■1, 100, canvasWidth 100); text(categories[i], x, canvasHeight - 20);}} function plotData() { // Plot data points as circles noStroke(); fill(66, 135, 245, 150); // Blue with transparency for (let i = 0; i < petsData.length; i++) { let x = map(1, 0, petsData.length - 1, 100, canvasWidth - 100); let length petsData[i]['Length']; let height = petsData[i]['Height']; let weight = petsData[i][' - - Weight']; // Map values to the canvas space let yLength = map(length, 20, 50, canvasHeight - 50, 50); let yHeight = map(height, 10, 30, canvasHeight - 50, 50); let yWeight = map(weight ' 5, 20, canvasHeight - 50, 50); // Draw a circle at each data point ellipse(x, yLength, 10, 10); ellipse(x, yHeight, 10, 10); ellipse(x, yWeight, 10, 10); } } function draw() { // Additional drawing or interactivity can be added here } CAn someone please help me to put this into JS to get the chart.
AI-Generated Solution
AI-generated content may present inaccurate or offensive content that does not represent bartleby’s views.
steps

Unlock instant AI solutions

Tap the button
to generate a solution

SEE SOLUTION
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
EBK JAVA PROGRAMMING
EBK JAVA PROGRAMMING
Computer Science
ISBN:
9781337671385
Author:
FARRELL
Publisher:
CENGAGE LEARNING - CONSIGNMENT
SEE MORE TEXTBOOKS