diff --git a/client_src/js/Overlay/VoronoiCell.mjs b/client_src/js/Overlay/VoronoiCell.mjs
index 6dad771..23cf3e6 100644
--- a/client_src/js/Overlay/VoronoiCell.mjs
+++ b/client_src/js/Overlay/VoronoiCell.mjs
@@ -7,9 +7,10 @@ import Vector2 from '../Helpers/Vector2.mjs';
  * @param	{Vector2}	point	The point at which the cell is located.
  */
 class VoronoiCell {
-	constructor(in_point) {
+	constructor(in_point, in_colour) {
 		this.point = in_point;
 		this.polygon = null;
+		this.colour = in_colour;
 	}
 }
 
diff --git a/client_src/js/Overlay/VoronoiManager.mjs b/client_src/js/Overlay/VoronoiManager.mjs
index 9d56f83..b61ed57 100644
--- a/client_src/js/Overlay/VoronoiManager.mjs
+++ b/client_src/js/Overlay/VoronoiManager.mjs
@@ -1,5 +1,9 @@
 "use strict";
 
+import chroma from 'chroma-js';
+
+import Config from '../Config.mjs';
+
 import VoronoiOverlay from './VoronoiOverlay.mjs';
 import VoronoiCell from './VoronoiCell.mjs';
 
@@ -35,13 +39,32 @@ class VoronoiManager {
 	}
 	
 	async set_data(datetime, reading_type) {
-		this.guage.set_spec(Specs[reading_type]);
+		this.spec = Specs[reading_type];
+		if(typeof this.spec.chroma == "undefined")
+			this.spec.chroma = chroma.scale(Object.values(this.spec.gradient))
+				.domain(Object.keys(this.spec.gradient));
+		this.guage.set_spec(this.spec);
 		this.guage.render();
 		
-		let result = JSON.parse(await GetFromUrl(
+		let dataset = JSON.parse(await GetFromUrl(
 			`${Config.api_root}?action=fetch-data&datetime=${encodeURIComponent(datetime.toISOString())}&reading_type=${encodeURIComponent(reading_type)}`
 		));
 		
+		let result = [];
+		for(let row of dataset) {
+			let device = this.device_data.get_by_id(row.device_id);
+			if(typeof device.latitude != "number" || typeof device.longitude != "number")
+				continue;
+			result.push(new VoronoiCell(
+				new Vector2(
+					device.longitude,
+					device.latitude
+				),
+				this.spec.chroma(row.value).toString()
+			));
+			
+		}
+		
 		console.log(result);
 	}
 }
diff --git a/package-lock.json b/package-lock.json
index c81095c..396fee4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -407,6 +407,11 @@
         "color-name": "^1.0.0"
       }
     },
+    "chroma-js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.0.3.tgz",
+      "integrity": "sha512-2kTvZZOFSV1O81/rm99t9vmkh9jQxsHqsRRoZevDVz/VCC3yKMyPuMK8M5yHG+UMg2tV6cRoqtZtgcD92udcBw=="
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
diff --git a/package.json b/package.json
index 48e6d0e..f219cd7 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
 	"homepage": "https://github.com/sbrl/ConnectedHumber-Air-Quality-Interface#readme",
 	"dependencies": {
 		"chart.js": "^2.8.0",
+		"chroma-js": "^2.0.3",
 		"d3-delaunay": "^4.1.5",
 		"dom-create-element-query-selector": "github:hekigan/dom-create-element-query-selector",
 		"iso8601-js-period": "^0.2.1",