VisualsAplenty.js Examples

Graph Setup:

const tvData = [
    {
        Show: "LOST",
        Count: 145,
        Img: "https://static.wikia.nocookie.net/lostpedia/images/a/ac/Lost-SeasonOneEdited.jpg"
    },
    {
        Show: "Sherlock",
        Count: 99,
        Img: "https://resizing.flixster.com/g8lv2hq9wqCD3gudbYa1_tTXAVA=/206x305/v2/https://flxt.tmsimg.com/assets/p8204516_b_v10_ao.jpg"
    },
    {
        Show: "Smallville",
        Count: 80,
        Img: "https://m.media-amazon.com/images/I/51oNKuccbGL._AC_.jpg"
    },
    {
        Show: "Hawkeye",
        Count: 66,
        Img: "https://lumiere-a.akamaihd.net/v1/images/p_disneyplusoriginals_hawkeye_poster_rebrand_22c56774.png"
    }
]

const tvTableDiv = document.querySelector('.tvTableDiv');

const favTVShow = new BarGraph("Favourite TV Show", tvData, "Count", "Show", tvTableDiv);
favTVShow.setMaxValueHonour(true); // set highest bar(s) as winner
favTVShow.setImages(null, 'Img'); // set images to be displayed on hover

Add Vote:

const dataToAdd = [];
const userInput = __; // retrieve user input
let dataAdded = false;

// check if Show entry exists and increment count if so
for (let element of favTVShow.dataAlias) {
    if (element['Show'] === value) {
        element['Count']++;
        dataAdded = true;
        break;
    }
}

// if show entry does not exist, create new entry with count 1
if (!dataAdded) {
    dataToAdd.push({
        Show: value,
        Count: 1
    });
}

// add data to graph and re-draw
favTVShow.addData(dataToAdd);

Adjust Size:

const val = __; // retrieve user input
graph.changeTableDimensions(300 + val, 200 + val); // update table
graph.outerDiv.parentElement.style.width = `${600 + val}px`; // adjust parent div if wanted

Graph Setup:

const winLoseData = [
    {
        Name: "Wipeout",
        Wins: 50,
        Losses: 80
    },
    {
        Name: "Visor",
        Wins: 30,
        Losses: 90
    },
    {
        Name: "Freeze",
        Wins: 5,
        Losses: 45
    },
    {
        Name: "Bowser",
        Wins: 15,
        Losses: 7
    }
]

const numWinLoseDiv = document.querySelector('.numWinLoseDiv');

const winLose = new ScatterPlot("Overwatch Win Rate 2021", winLoseData, "Wins", "Losses", numWinLoseDiv, 'Name');
winLose.setLegendVisibility(true);

Add Entry:

const values = [__, __, __]; // retrieve user input
// add data to Scatter Plot
winLose.addData([{
    Name: values[0].value,
    Wins: values[1].value,
    Losses: values[2].value
}]);

Adjust Size:

const val = __; // retrieve user input
graph.changeTableDimensions(300 + val, 200 + val); // update table
graph.outerDiv.parentElement.style.width = `${600 + val}px`; // adjust parent div if wanted

Adjust Dot Diameter:

const newSize = __; // retrieve user input
winLose.updateDotSize(newSize);

Graph Setup:

const birdWatchData = [
    {
        Count: 50,
        Name: "Sparrow"
    },
    {
        Count: 30,
        Name: "Falcon"
    },
    {
        Count: 5,
        Name: "Eagle"
    },
    {
        Count: 15,
        Name: "Robin"
    }
]

const pieChartDiv = document.querySelector('.pieChartDiv');

const pieChartExample = new PieChart("Bird Watching Data 2021", birdWatchData, "Count", "Name", pieChartDiv);

Add Vote:

const dataToAdd = [];
const userInput = __; // retrieve user input
let dataAdded = false;

// check if Show entry exists and increment count if so
for (let element of pieChartExample.dataAlias) {
    if (element['Name'] === value) {
        element['Count']++;
        dataAdded = true;
        break;
    }
}

// if show entry does not exist, create new entry with count 1
if (!dataAdded) {
    dataToAdd.push({
        Name: value,
        Count: 1
    });
}

// add data to graph and re-draw
pieChartExample.addData(dataToAdd);

Adjust Size:

const val = __; // retrieve user input
graph.changeTableDimensions(300 + val); // update diameter
graph.outerDiv.parentElement.style.width = `${600 + val}px`; // adjust parent div if wanted