chart/scatterPlot.js

  1. import * as d3 from "d3";
  2. import dataTransform from "../dataTransform.js";
  3. import component from "../component.js";
  4. import { dispatch } from "../events.js";
  5. import { createScene } from "../base.js";
  7. /**
  8.  * Reusable 3D Scatter Plot Chart
  9.  *
  10.  * @module
  11.  *
  12.  * @example
  13.  * let chartHolder = d3.select("#chartholder");
  14.  *
  15.  * let myData = [...];
  16.  *
  17.  * let myChart = d3.x3d.chart.scatterPlot();
  18.  *
  19.  * chartHolder.datum(myData).call(myChart);
  20.  *
  21.  * @see https://datavizproject.com/data-type/3d-scatterplot/
  22.  */
  23. export default function() {
  25. 	/* Default Properties */
  26. 	let width = 500;
  27. 	let height = 500;
  28. 	let dimensions = { x: 40, y: 40, z: 40 };
  29. 	let colors = ["orange"];
  30. 	let color;
  31. 	let classed = "d3X3dScatterPlot";
  32. 	let mappings;
  33. 	let debug = false;
  35. 	/* Scales */
  36. 	let xScale;
  37. 	let yScale;
  38. 	let zScale;
  39. 	let colorScale;
  40. 	let sizeScale;
  41. 	let sizeRange = [0.2];
  43. 	/* Components */
  44. 	const viewpoint = component.viewpoint();
  45. 	const axis = component.axisThreePlane();
  46. 	const crosshair = component.crosshair();
  47. 	const label = component.label();
  48. 	const bubbles = component.bubbles();
  50. 	/**
  51. 	 * Initialise Data and Scales
  52. 	 *
  53. 	 * @private
  54. 	 * @param {Array} data - Chart data.
  55. 	 */
  56. 	const init = function(data) {
  58. 		let newData = {};
  59. 		['x', 'y', 'z', 'size', 'color'].forEach((dimension) => {
  60. 			let set = {
  61. 				key: dimension,
  62. 				values: []
  63. 			};
  65. 			data.values.forEach((d) => {
  66. 				let key = mappings[dimension];
  67. 				let value = d.values.find((v) => v.key === key).value;
  68. 				set.values.push({ key: key, value: value });
  69. 			});
  71. 			newData[dimension] = dataTransform(set).summary();
  72. 		});
  74. 		let extentX = newData.x.valueExtent;
  75. 		let extentY = newData.y.valueExtent;
  76. 		let extentZ = newData.z.valueExtent;
  77. 		let extentSize = newData.size.valueExtent;
  78. 		let extentColor = newData.color.valueExtent;
  80. 		xScale = d3.scaleLinear()
  81. 			.domain(extentX)
  82. 			.range([0, dimensions.x]);
  84. 		yScale = d3.scaleLinear()
  85. 			.domain(extentY)
  86. 			.range([0, dimensions.y]);
  88. 		zScale = d3.scaleLinear()
  89. 			.domain(extentZ)
  90. 			.range([0, dimensions.z]);
  92. 		sizeScale = d3.scaleLinear()
  93. 			.domain(extentSize)
  94. 			.range(sizeRange);
  96. 		if (color) {
  97. 			colorScale = d3.scaleQuantize()
  98. 				.domain(extentColor)
  99. 				.range([color, color]);
  100. 		} else {
  101. 			colorScale = d3.scaleQuantize()
  102. 				.domain(extentColor)
  103. 				.range(colors);
  104. 		}
  105. 	};
  107. 	/**
  108. 	 * Constructor
  109. 	 *
  110. 	 * @constructor
  111. 	 * @alias scatterPlot
  112. 	 * @param {d3.selection} selection - The chart holder D3 selection.
  113. 	 */
  114. 	const my = function(selection) {
  115. 		const layers = ["axis", "bubbles", "crosshair", "label"];
  116. 		const scene = createScene(selection, layers, classed, width, height, debug);
  118. 		selection.each((data) => {
  119. 			init(data);
  121. 			// Add Viewpoint
  122. 			viewpoint.centerOfRotation([dimensions.x / 2, dimensions.y / 2, dimensions.z / 2]);
  124. 			scene.call(viewpoint);
  126. 			// Add Axis
  127. 			axis.xScale(xScale)
  128. 				.yScale(yScale)
  129. 				.zScale(zScale);
  131. 			scene.select(".axis")
  132. 				.call(axis);
  134. 			// Add Crosshair
  135. 			crosshair.xScale(xScale)
  136. 				.yScale(yScale)
  137. 				.zScale(zScale);
  139. 			// Add Labels
  140. 			label.xScale(xScale)
  141. 				.yScale(yScale)
  142. 				.zScale(zScale)
  143. 				.offset(0.5);
  145. 			// Add Bubbles
  146. 			bubbles.xScale(xScale)
  147. 				.yScale(yScale)
  148. 				.zScale(zScale)
  149. 				.sizeScale(sizeScale)
  150. 				.colorScale(colorScale)
  151. 				.mappings(mappings)
  152. 				.on("d3X3dClick", function(e) {
  153. 					const datum = d3.select(e.target).datum();
  154. 					let xVal = datum.values.find((v) => v.key === "x").value;
  155. 					let yVal = datum.values.find((v) => v.key === "y").value;
  156. 					let zVal = datum.values.find((v) => v.key === "z").value;
  157. 					const d = { x: xVal, y: yVal, z: zVal };
  159. 					scene.select(".crosshair")
  160. 						.datum(d)
  161. 						.each(function() {
  162. 							d3.select(this).call(crosshair);
  163. 						});
  164. 				})
  165. 				.on("d3X3dMouseOver", function(e) {
  166. 					const datum = d3.select(e.target).datum();
  167. 					let xVal = datum.values.find((v) => v.key === "x").value;
  168. 					let yVal = datum.values.find((v) => v.key === "y").value;
  169. 					let zVal = datum.values.find((v) => v.key === "z").value;
  170. 					const d = { x: xVal, y: yVal, z: zVal, key: datum.key };
  172. 					scene.select(".label")
  173. 						.datum(d)
  174. 						.each(function() {
  175. 							d3.select(this).call(label);
  176. 						});
  177. 				})
  178. 				.on("d3X3dMouseOut", function(e) {
  179. 					scene.select(".label")
  180. 						.selectAll("*")
  181. 						.remove();
  182. 				});
  184. 			scene.select(".bubbles")
  185. 				.datum(data)
  186. 				.call(bubbles);
  187. 		});
  188. 	};
  190. 	/**
  191. 	 * Width Getter / Setter
  192. 	 *
  193. 	 * @param {number} _v - X3D canvas width in px.
  194. 	 * @returns {*}
  195. 	 */
  196. 	my.width = function(_v) {
  197. 		if (!arguments.length) return width;
  198. 		width = _v;
  199. 		return this;
  200. 	};
  202. 	/**
  203. 	 * Height Getter / Setter
  204. 	 *
  205. 	 * @param {number} _v - X3D canvas height in px.
  206. 	 * @returns {*}
  207. 	 */
  208. 	my.height = function(_v) {
  209. 		if (!arguments.length) return height;
  210. 		height = _v;
  211. 		return this;
  212. 	};
  214. 	/**
  215. 	 * Dimensions Getter / Setter
  216. 	 *
  217. 	 * @param {{x: number, y: number, z: number}} _v - 3D object dimensions.
  218. 	 * @returns {*}
  219. 	 */
  220. 	my.dimensions = function(_v) {
  221. 		if (!arguments.length) return dimensions;
  222. 		dimensions = _v;
  223. 		return this;
  224. 	};
  226. 	/**
  227. 	 * X Scale Getter / Setter
  228. 	 *
  229. 	 * @param {d3.scale} _v - D3 scale.
  230. 	 * @returns {*}
  231. 	 */
  232. 	my.xScale = function(_v) {
  233. 		if (!arguments.length) return xScale;
  234. 		xScale = _v;
  235. 		return my;
  236. 	};
  238. 	/**
  239. 	 * Y Scale Getter / Setter
  240. 	 *
  241. 	 * @param {d3.scale} _v - D3 scale.
  242. 	 * @returns {*}
  243. 	 */
  244. 	my.yScale = function(_v) {
  245. 		if (!arguments.length) return yScale;
  246. 		yScale = _v;
  247. 		return my;
  248. 	};
  250. 	/**
  251. 	 * Z Scale Getter / Setter
  252. 	 *
  253. 	 * @param {d3.scale} _v - D3 scale.
  254. 	 * @returns {*}
  255. 	 */
  256. 	my.zScale = function(_v) {
  257. 		if (!arguments.length) return zScale;
  258. 		zScale = _v;
  259. 		return my;
  260. 	};
  262. 	/**
  263. 	 * Size Scale Getter / Setter
  264. 	 *
  265. 	 * @param {d3.scale} _v - D3 color scale.
  266. 	 * @returns {*}
  267. 	 */
  268. 	my.sizeScale = function(_v) {
  269. 		if (!arguments.length) return sizeScale;
  270. 		sizeScale = _v;
  271. 		return my;
  272. 	};
  274. 	/**
  275. 	 * Size Range Getter / Setter
  276. 	 *
  277. 	 * @param {number[]} _v - Size min and max (e.g. [1, 9]).
  278. 	 * @returns {*}
  279. 	 */
  280. 	my.sizeRange = function(_v) {
  281. 		if (!arguments.length) return sizeRange;
  282. 		sizeRange = _v;
  283. 		return my;
  284. 	};
  286. 	/**
  287. 	 * Color Scale Getter / Setter
  288. 	 *
  289. 	 * @param {d3.scale} _v - D3 color scale.
  290. 	 * @returns {*}
  291. 	 */
  292. 	my.colorScale = function(_v) {
  293. 		if (!arguments.length) return colorScale;
  294. 		colorScale = _v;
  295. 		return my;
  296. 	};
  298. 	/**
  299. 	 * Color Getter / Setter
  300. 	 *
  301. 	 * @param {string} _v - Color (e.g. "red" or "#ff0000").
  302. 	 * @returns {*}
  303. 	 */
  304. 	my.color = function(_v) {
  305. 		if (!arguments.length) return color;
  306. 		color = _v;
  307. 		return my;
  308. 	};
  310. 	/**
  311. 	 * Colors Getter / Setter
  312. 	 *
  313. 	 * @param {Array} _v - Array of colours used by color scale.
  314. 	 * @returns {*}
  315. 	 */
  316. 	my.colors = function(_v) {
  317. 		if (!arguments.length) return colors;
  318. 		colors = _v;
  319. 		return my;
  320. 	};
  322. 	/**
  323. 	 * Size Scale Getter / Setter
  324. 	 *
  325. 	 * @param {d3.scale} _v - D3 color scale.
  326. 	 * @returns {*}
  327. 	 */
  328. 	my.sizeScale = function(_v) {
  329. 		if (!arguments.length) return sizeScale;
  330. 		sizeScale = _v;
  331. 		return my;
  332. 	};
  334. 	/**
  335. 	 * Size Range Getter / Setter
  336. 	 *
  337. 	 * @param {number[]} _v - Size min and max (e.g. [0.5, 3.0]).
  338. 	 * @returns {*}
  339. 	 */
  340. 	my.sizeRange = function(_v) {
  341. 		if (!arguments.length) return sizeRange;
  342. 		sizeRange = _v;
  343. 		return my;
  344. 	};
  346. 	/**
  347. 	 * Mappings Getter / Setter
  348. 	 *
  349. 	 * @param {Object} _v - Map properties to size, colour etc.
  350. 	 * @returns {*}
  351. 	 */
  352. 	my.mappings = function(_v) {
  353. 		if (!arguments.length) return mappings;
  354. 		mappings = _v;
  355. 		return my;
  356. 	};
  358. 	/**
  359. 	 * Debug Getter / Setter
  360. 	 *
  361. 	 * @param {boolean} _v - Show debug log and stats. True/False.
  362. 	 * @returns {*}
  363. 	 */
  364. 	my.debug = function(_v) {
  365. 		if (!arguments.length) return debug;
  366. 		debug = _v;
  367. 		return my;
  368. 	};
  370. 	/**
  371. 	 * Dispatch On Getter
  372. 	 *
  373. 	 * @returns {*}
  374. 	 */
  375. 	my.on = function() {
  376. 		let value = dispatch.on.apply(dispatch, arguments);
  377. 		return value === dispatch ? my : value;
  378. 	};
  380. 	return my;
  381. }