Visualiser NPM

Visualisation Tools for D3

Usage:

Import and create a visualiser object with specific width and height:

    const visualiser = require('visualiser');
    const inst = new visualiser({width : 1200, height : 1200});

To render (currently is equated to obtaining the HTML of the object - can be returned to a request):

    inst.visualise();

All functions have parameters which can either be a function (so for which point return a value) or an array (which specifies for each value an intended result. The array doesn't need to be the same length as the values that map to it. Values are picked with i % array.length, as it loops around).

Currently supports:

Radar (spider) chart:

Creates a radar chart:

    const visualiser = require('visualiser');
    const inst = new visualiser({width : 1200, height : 1200});
    const exampleData = [{"attack": 4, "defence": 2, "wisdom": 10, "charisma": 2, "dexterity": 0}, {"attack": 6, "defence": 4, "wisdom": 0, "charisma": 10, "dexterity": 6}];
    const exampleFeatures = ["attack", "defence", "wisdom", "charisma", "dexterity"]
    inst.radar({data: exampleData, features: exampleFeatures});

Radar Plot For redundancy we also provide spider chart with the same syntax as the radar. Requires a features array which specifies the features on each axis (can be of any length above 2). The data array contains objects which have a field for each of the features with a corresponding numeric value (between 0 and 10). The data array CAN contain other values as well! Other parameters are:

maxRadius -> the radius of the chart (default 100)

fillColors -> array of colour values for each object on the chart (default "rgba(0,255,0,0.7)", "rgba(255,0,0,0.7)")

centerHorizontalOffset -> the horizontal offset of the center of the spider/radar chart (default 200)

centerVerticalOffset -> the vertical offset of the center of the spider/radar chart (default 200)

labelFontSize -> the font size of the labels (default 10)

ticks -> array of numbers, giving which tick values to be shown on the spider chart (default 1, 2.5, 5, 7.5, 10 - this will show the position of the 1st, 2.5th, 5th, ect. values on the spider chart)

strokeColor -> function or array taking a tick value and mapping it to a colour (default (t) => "black")

strokeHighlight -> function or array taking a tick value and mapping it to width size (default (t) => t%5==0 ? 5 : 3)

axisColor -> function or array taking an axis number and mapping it to a colour (default (i) => "black")

axisWidth -> function or array taking an axis number and mapping it to a width size (default (i) => 1)

Donut chart:

Creates a donut chart:

    const visualiser = require('visualiser');
    const inst = new visualiser({width : 1200, height : 1200});
    const exampleDonutData = [{itm: 0, value: 10},{value: 35},{hs: 4, value: 8},{d: 4, value: 66}];
    inst.donut({data: exampleDonutData, colorRange: ["green", "#FF0000", "#0000FF"], text: "33%"});

Donut Plot

outterRadius -> the radius of the chart (default 100) innerRadius -> the radius of the inner hole (ex 60) offsetX -> offset of the graphic from the left side offsetY -> offset of the graphic from the top side colorRange -> an array of colours for ach element fontSize -> font size of the inner text text -> string text to put in the middle of the donut textOffsetX -> offset of the text from the left side of the hole textOffsetY -> offset of the graphic from the top side of the hole toInclude -> array of attributes to be included in the final elements! By default value and id are saved for each! YOU CAN USE THIS FOR INTERACTIVITY!

Line (connected scatterplot) chart:

Creates a line of connected dots (NOTE: By setting the fill colour of a dote to none, dots will not be displayed):

    const visualiser = require('visualiser');
    const inst = new visualiser({width : 1200, height : 1200});
    const exampleDataLine = [{x: 1, y: 300},{x: 2, y: 5},{x: 3, y: 8},{x: 4, y: 2},{x: 5, y: 6}];
    inst.line({data: exampleDataLine, lineWidth :  4});

Line Plot For redundancy we also provide connectedScatterPlot which does the same function with the same parameters The data array contains elements with each having an 'x' and 'y' attribute in numerical form. The line will connect the points in the order they appear in the array, so you might need to presort it according to the x axis. Other attributes: min_render -> The smallest value on the y-axis (default 0) max_render -> The highest value on the y-axis (default 1000) offsetX -> offset of the graphic from the left side offsetY -> offset of the graphic from the top side pointRadius -> the radius of each point min_el -> The smallest value on the x-axis max_el -> The largest value on the x-axis tickCount -> How many values to be on the x-axis lineWidth -> width of line (default : 5) lineColor -> color of line (default : "green") pointFill -> function or array, which given point returns a colour (default: (d) => "green") toInclude -> array of attributes to be included in the final elements! By default x and id are saved for each! YOU CAN USE THIS FOR INTERACTIVITY! xGridCount -> number of grid lines on the x-axis yGridCount -> number of grid lines on the y-axis xGridColour -> callable - for each tick on the x-axis provide a colour (default: (i)=> "rgba(0,0,200,0.5)") yGridColour -> callable - for each tick on the y-axis provide a colour (default: same as xGridColour) xFontSize -> callable - for each tick label on the x-axis define a font size (default: (i)=>"20px") yFontSize -> callable - for each tick label on the y-axis define a font size (default: same as xFontSize) xGridWidth -> callable - for each tick on the x-axis provide a thickness (default: (i)=> 1) yGridWidth -> callable - for each tick on the y-axis provide a thickness (default: same as xGridWidth)

Multiple (connected) Lines Chart:

Same as a regular line, but this time you can put multiple lines on the same graphic:

    const visualiser = require('visualiser');
    const inst = new visualiser({width : 1200, height : 1200});
    const exampleDataLines = [[{x: 1, y: 300},{x: 2, y: 5},{x: 3, y: 8},{x: 4, y: 2}],[{x: 6, y: 6},{x: 7, y: 20},{x: 8, y: 12},{x: 10, y: 108},{x: 12, y: 54}]];
    inst.lines({data: exampleDataLines,  max_el: 13, lineWidth : (i) =>4, max_render: 500, lineColor : (i) => i == 0 ? "blue" : "orange", pointFill : (i) => "rgba(0,0,0,0)"});

Lines Plot The data array contains elements which each is an array containing elements with each having an 'x' and 'y' attribute in numerical form. The lines will connect the points in the order they appear in the array, so you might need to presort it according to the x axis. Other attributes: min_render -> The smallest value on the y-axis max_render -> The highest value on the y-axis offsetX -> offset of the graphic from the left side offsetY -> offset of the graphic from the top side pointRadius -> the radius of each point min_el -> The smallest value on the x-axis max_el -> The largest value on the x-axis tickCount -> How many values to be on the x-axis pointFill -> function or array, which given the point returns a colour (default: (d) => "green") lineWidth -> function or array, which given the index of the line, returns its width (default : (i) => 5) lineColor -> function or array, which given the index of the line, returns the color of line (default : (i) => "green") toInclude -> array of attributes to be included in the final elements! By default x and id are saved for each! YOU CAN USE THIS FOR INTERACTIVITY! xGridCount -> number of grid lines on the x-axis yGridCount -> number of grid lines on the y-axis xGridColour -> callable - for each tick on the x-axis provide a colour (default: (i)=> "rgba(0,0,200,0.5)") yGridColour -> callable - for each tick on the y-axis provide a colour (default: same as xGridColour) xFontSize -> callable - for each tick label on the x-axis define a font size (default: (i)=>"20px") yFontSize -> callable - for each tick label on the y-axis define a font size (default: same as xFontSize) xGridWidth -> callable - for each tick on the x-axis provide a thickness (default: (i)=> 1) yGridWidth -> callable - for each tick on the y-axis provide a thickness (default: same as xGridWidth)

Scatterplot chart:

Creates a line chart where each element is emphasised with a circle:

    const visualiser = require('visualiser');
    const inst = new visualiser({width : 1200, height : 1200});
    const exampleDataLine = [{x: 1, y: 300},{x: 2, y: 5},{x: 3, y: 8},{x: 4, y: 2},{x: 5, y: 6},{x: 4, y: 20},{x: 9, y: 12},{x: 2, y: 108},{x: 6, y: 54}];
    inst.scatterPlot({data: exampleDataLine, max_render: 300});

Line Plot For redundancy we also provide connectedScatterPlot which does the same function with the same parameters The data array contains elements with each having an 'x' and 'y' attribute in numerical form. The line will connect the points in the order they appear in the array, so you might need to presort it according to the x axis. Other attributes: min_render -> The smallest value on the y-axis max_render -> The highest value on the y-axis offsetX -> offset of the graphic from the left side offsetY -> offset of the graphic from the top side pointRadius -> the radius of each point min_el -> The smallest value on the x-axis max_el -> The largest value on the x-axis tickCount -> How many values to be on the x-axis pointFill -> function or array, which given the point returns a colour (default: (d) => "green") pointFill -> function or array, which given the index of the point, returns a colour toInclude -> array of attributes to be included in the final elements! By default x and id are saved for each! YOU CAN USE THIS FOR INTERACTIVITY! xGridCount -> number of grid lines on the x-axis yGridCount -> number of grid lines on the y-axis xGridColour -> callable - for each tick on the x-axis provide a colour (default: (i)=> "rgba(0,0,200,0.5)") yGridColour -> callable - for each tick on the y-axis provide a colour (default: same as xGridColour) xFontSize -> callable - for each tick label on the x-axis define a font size (default: (i)=>"20px") yFontSize -> callable - for each tick label on the y-axis define a font size (default: same as xFontSize) xGridWidth -> callable - for each tick on the x-axis provide a thickness (default: (i)=> 1) yGridWidth -> callable - for each tick on the y-axis provide a thickness (default: same as xGridWidth)

Bar chart:

Creates a bar chart where the height represents the chosen value:

    const visualiser = require('visualiser');
    const inst = new visualiser({width : 1200, height : 1200});
    const exampleDataBars = [{"name": "books", value: 10}, {"name": "comics", value: 20}, {"name": "magazines", value: 30}, {"name": "movies", value: 50}];
    inst.bar({data: exampleDataBars, colorBar: (d) => d.name == "books" ? "red" : "green"});

Bar Plot

Area Under The Curve chart:

Creates an line chart with area under it highlighted:

    const visualiser = require('visualiser');
    const inst = new visualiser({width : 1200, height : 1200});
    const exampleAuc = [{x: 0, y: 300},{x: 2, y: 5},{x: 3, y: 8},{x: 4, y: 2},{x: 5, y: 6},{x: 9, y: 12},{x: 12, y: 108},{x: 16, y: 54}]
    inst.auc({data: exampleAuc, lineWidth : 4, max_render: 500, max_el: 16, areaColor: "rgba(0,170,170,0.6)", lineColor: "rgb(0,200,255)", pointRadius: 0});

Bar Plot

Legend:

Adds a legend:

    const visualiser = require('visualiser');
    const inst = new visualiser({width : 1200, height : 1200});
    const exampleDataLines = [[{x: 1, y: 300},{x: 2, y: 5},{x: 3, y: 8},{x: 4, y: 2}],[{x: 6, y: 6},{x: 7, y: 20},{x: 8, y: 12},{x: 10, y: 108},{x: 12, y: 54}]];
    let lines = inst.lines({data: exampleDataLines,  max_el: 13, lineWidth : (i) =>4, max_render: 500, lineColor : (i) => i == 0 ? "blue" : "orange", pointFill : (i) => "rgba(0,0,0,0)"});
    lines.legend({data: ["Profits", "Decline"], colours: ["blue", "orange"]})

Bar Plot