Mercer

Mercer is a 3D data visualization library built using three.js.

It is named after a character in the book “Do Androids Dream of Electric Sheep?” and is a work in progress. Any suggestions on functionality can sent to my twitter @garethmarland and would be greatly appreciated.

Installation

Doing a view source on http://gmarland.github.io/mercer/ will show all you need to get going.

Graphs

Line Graph

Getting Started

HTML

Currently, a width and height need to be defined on the container div. This is done so it is easier to get the div size for rendering the graph on the page. This should probably be made better in the future.

<div id="line-graph-container" style="width:800px;height:600px;"></div>

JavaScript

This is a very basic example that renders a line graph into a container div. Further configuration may be applied to modify the appearance.

var lineData = { 
	data: [{ 
		title: "2013", 
		values: [{ 
			x: 100, 
			y: 200 
		}, { 
			x: 200, 
			y: 400 
		}, { 
			x: 300, 
			y: 200 
		}, { 
			x: 400, 
			y: 400 
		}]
	}, {
		title: "2014", 
		values: [{ 
			x: 300, 
			y: 200 
		}, { 
			x: 200, 
			y: 800 
		}, { 
			x: 100, 
			y: 300 
		}] 
	}]
};

var lineMercer = new Mercer();
lineMercer.LineGraph("line-graph-container", lineData);

Configuration

Row

data.title - the title of the data series as it will appear on the graph.
data.color - the hex color of the graph line for the data series. If this isn't specified then a random color is selected.

Global

lineWidth - the width of the lines as they appear on the graph.
rowSpace - the amount of space between each row on the graph
rowLabelSize - the font size for the row labels.
rowLabelColor - the default color for the row labels.
pointSpace - the space between point marker on the X axis.

Area Chart

Getting Started

HTML

<div id="area-chart-container" style="width:800px;height:600px;"></div>

JavaScript

This is a very basic example that randers an area chart into a container div. Further configuration may be applied to modify the appearance.

var areaData = { 
	data: [{ 
		title: "2013", 
		values: [{ 
			x: 100, 
			y: 200 
		}, { 
			x: 200, 
			y: 400 
		}, { 
			x: 300, 
			y: 200 
		}] 
	}. {
		title: "2014", 
		values: [{ 
			x: 300, 
			y: 200 
		}, { 
			x: 200, 
			y: 800 
		}, { 
			x: 100, 
			y: 300 
		}] 
	}]
};

var areaMercer = new Mercer();
areaMercer.AreaChart("area-chart-container", areaData);

Configuration

Row

data.title - the title of the data series as it will appear on the graph.
data.color - the hex color of the graph area for the data series. If this isn't specified then a random color is selected.

Global

areaWidth - the width of each area seaction as it appears on the graph.
rowSpace - the amount of space between each row on the graph
rowLabelSize - the font size for the row labels.
rowLabelColor - the default color for the row labels.
pointSpace - the space between point marker on the X axis.

Bar Chart

Getting Started

HTML

<div id="bar-chart-container" style="width:800px;height:600px;"></div>

JavaScript

This is a very basic example that renders a bar chart into a container div. Further configuration may be applied to modify the appearance.

var barData = {
	columnLabels: {
		values: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Apr", "Sept", "Oct", "Nov", "Dec" ]
	},
	data: [{
		title: "2013",
		color: "#0000ff",
		values: [ 100, 200, 400, 400, 300, 200, 200, 400, 400, 300, 200, 100 ]
	}, {
		title: "2014",
		color: "#ff0000",
		values: [ 300, 200, 200, 800, 100, 300, 200, 200, 800, 100, 300, 100 ]
	}, {
		title: "2015",
		values: [ 170, 200, 150, 140, 140, 130, 120, 180, 110, 130, 120, 190 ]
	}]
};

var barMercer = new Mercer();
barMercer.BarChart("bar-chart-container", barData);

Configuration

Row

data.title - the title of the data series as it will appear on the graph.
data.color - the hex color of the bar for the data series. If this isn't specified then a random color is selected.
data.showBarLabels - this is the individual setting for the bar which determines if the value should be shown above each bar.

Global

barWidth - the width of the bar within the graph.
barOpacity - the transparency of the bars as they appear within the graph.
showBarLabels - this is the global setting which defines if the value should be shown above each bar.
barLabelSize - the font size for the value of the bar if visible.
barLabelColor - the color of the value above the bar if visible.
rowSpace - the amount of space between each row on the graph.
rowLabelSize - the font size for the row label.
rowLabelColor - the default color for the row label.
columnSpace - the space between each column in a row.
columnLabelSize - the font size for the column label.
columnLabelColor - the default color for the column label.

Scatter Graph

Getting Started

HTML

<div id=" scatter-graph-container" style="width:800px;height:600px;"></div>

JavaScript

This is a very basic example that renders a scatter graph into a container div. Further configuration may be applied to modify the appearance.

var scatterData = {
	data: [{
		values: [{ 
			x: 300, 
			y: 200, 
			z: 200
		}, {
			x: 310, 
			y: 100, 
			z: 300
		}, {
			x: 200, 
			y: 200, 
			z: 150
		}, {
			x: 100, 
			y: 300, 
			z: 100
		}]
	}, {
		values: [{
			x: 170, 
			y: 200, 
			z: 150
		}, {
			x: 140, 
			y: 140, 
			z: 130
		}, {
			x: 120, 
			y: 180, 
			z: 110
		}, {
			x: 130, 
			y: 120, 
			z: 190
		}]
	}]
};

var scatterMercer = new Mercer();
scatterMercer.ScatterGraph("scatter-graph-container", scatterData);

Configuration

Row

data.color - the hex color of the points for the data series. If this isn't specified then a random color is selected.

Global

pointSize - the size of each point on the graph.
pointSpace - the space between each measurement point section along the x, y and z axis.

Global Configuration

General Display Settings

showMeasurementLines - a boolean setting that determines if the measurement lines on the Y axis should be shown.
startRotation - the initial rotation of the graph when it is initially rendered.
locked - if set to true the graph cannot be rotated after rendering. Default is false.

Background Settings

background - this is an optional hex color that can be specified to change the graph background.
backgroundTransparent - this is how transparent the background of the graph should be.

Graph Layout Settings

baseColor - the default base color for the graph.
baseThickness - the thickness of the base of the graph.
baseEdge - the edge in the base of the graph before the data visualization starts drawing.
baseWidth - the width of the base. This automatically figures itself out so usually shouldn't be set.
baseLength - the length of the base. This automatically figures itself out so usually shouldn't be set.
graphHeight - the height of the graph as it appears. This automatically figures itself out so usually shouldn't be set.

Measurement Line Settings

measurementLineColor - the color of the measurement lines if they are visible on the graph.
measurementLabelSize - the size of the label along the measurement line if it is visible.
measurementLabelColor - the color of the label along the measurement line if it is visible.

Directional Light Settings

These are the settings for the directional light and probably don't need to be touched unless you have a specific need.

directionalLight.color - the color of the directional light.
directionalLight.intensity - the intensity of the directional light.
directionalLight.position.x - the X position of the directional light.
directionalLight.position.y - the Y position of the directional light.
directionalLight.position.z - the Z position of the directional light.

Camera Settings

These settings are a little low level and control the positioning of the camera. The camera usually figures itself out but you might want to set this to get the position you need.

cameraX - the X position of the camera.
cameraY - the Y position of the camera.
cameraZ - the Z position of the camera.

Look At Settings

These, like camera settings, are a little low level and control the position the camera looks at. This is usually automatically determined but just in case you have a specific need.

lookAtX - the X position that the camera should be looking at.
lookAtY - the Y position that the camera should be looking at.
lookAtZ - the Z position that the camera should be looking at.

Author

My name is Gareth Marland. I’m a British programmer who currently lives in Toronto, Canada with my lovely Canadian wife.

gmarland/mercer

Mercer

Installation

Graphs

Line Graph

Getting Started

Configuration

Area Chart

Getting Started

Configuration

Bar Chart

Getting Started

Configuration

Scatter Graph

Getting Started

Configuration

Global Configuration

General Display Settings

Background Settings

Graph Layout Settings

Measurement Line Settings

Directional Light Settings

Camera Settings

Look At Settings

Author