component/particles.js

  1. import * as d3 from "d3";
  2. import dataTransform from "../dataTransform.js";
  3. import { dispatch } from "../events.js";
  4. import { colorParse } from "../colorHelper.js";
  6. /**
  7.  * Reusable 3D Particle Plot Component
  8.  *
  9.  * @module
  10.  */
  11. export default function() {
  13. 	/* Default Properties */
  14. 	let dimensions = { x: 40, y: 40, z: 40 };
  15. 	let colors = d3.schemeRdYlGn[8];
  16. 	let color;
  17. 	let classed = "d3X3dBubbles";
  18. 	let mappings;
  20. 	/* Scales */
  21. 	let xScale;
  22. 	let yScale;
  23. 	let zScale;
  24. 	let colorScale;
  26. 	/**
  27. 	 * Array to String
  28. 	 *
  29. 	 * @private
  30. 	 * @param {array} arr
  31. 	 * @returns {string}
  32. 	 */
  33. 	const array2dToString = function(arr) {
  34. 		return arr.reduce((a, b) => a.concat(b), [])
  35. 			.reduce((a, b) => a.concat(b), [])
  36. 			.join(" ");
  37. 	};
  39. 	/**
  40. 	 * Initialise Data and Scales
  41. 	 *
  42. 	 * @private
  43. 	 * @param {Array} data - Chart data.
  44. 	 */
  45. 	const init = function(data) {
  46. 		let newData = {};
  47. 		['x', 'y', 'z', 'color'].forEach((dimension) => {
  48. 			let set = {
  49. 				key: dimension,
  50. 				values: []
  51. 			};
  53. 			data.values.forEach((d) => {
  54. 				let key = mappings[dimension];
  55. 				let value = d.values.find((v) => v.key === key).value;
  56. 				set.values.push({ key: key, value: value });
  57. 			});
  59. 			newData[dimension] = dataTransform(set).summary();
  60. 		});
  62. 		let extentX = newData.x.valueExtent;
  63. 		let extentY = newData.y.valueExtent;
  64. 		let extentZ = newData.z.valueExtent;
  65. 		let extentColor = newData.color.valueExtent;
  67. 		if (typeof xScale === "undefined") {
  68. 			xScale = d3.scaleLinear()
  69. 				.domain(extentX)
  70. 				.range([0, dimensions.x]);
  71. 		}
  73. 		if (typeof yScale === "undefined") {
  74. 			yScale = d3.scaleLinear()
  75. 				.domain(extentY)
  76. 				.range([0, dimensions.y]);
  77. 		}
  79. 		if (typeof zScale === "undefined") {
  80. 			zScale = d3.scaleLinear()
  81. 				.domain(extentZ)
  82. 				.range([0, dimensions.z]);
  83. 		}
  85. 		if (color) {
  86. 			colorScale = d3.scaleQuantize()
  87. 				.domain(extentColor)
  88. 				.range([color, color]);
  89. 		} else if (typeof colorScale === "undefined") {
  90. 			colorScale = d3.scaleQuantize()
  91. 				.domain(extentColor)
  92. 				.range(colors);
  93. 		}
  94. 	};
  96. 	/**
  97. 	 * Constructor
  98. 	 *
  99. 	 * @constructor
  100. 	 * @alias particles
  101. 	 * @param {d3.selection} selection - The chart holder D3 selection.
  102. 	 */
  103. 	const my = function(selection) {
  104. 		selection.each(function(data) {
  105. 			init(data);
  107. 			const element = d3.select(this)
  108. 				.classed(classed, true)
  109. 				.attr("id", (d) => d.key);
  111. 			const particleData = function(data) {
  112. 				const pointCoords = function(Y) {
  113. 					return Y.values.map(function(d) {
  114. 						let xVal = d.values.find((v) => v.key === mappings.x).value;
  115. 						let yVal = d.values.find((v) => v.key === mappings.y).value;
  116. 						let zVal = d.values.find((v) => v.key === mappings.z).value;
  117. 						return [xScale(xVal), yScale(yVal), zScale(zVal)];
  118. 					})
  119. 				};
  121. 				const pointColors = function(Y) {
  122. 					return Y.values.map(function(d) {
  123. 						let colorVal = d.values.find((v) => v.key === mappings.color).value;
  124. 						let color = d3.color(colorScale(colorVal));
  125. 						return colorParse(color);
  126. 					})
  127. 				};
  129. 				data.point = array2dToString(pointCoords(data));
  130. 				data.color = array2dToString(pointColors(data));
  132. 				return [data];
  133. 			};
  135. 			const shape = (el) => {
  136. 				const shape = el.append("Shape");
  138. 				/*
  139. 				// FIXME: x3dom cannot have empty IFS nodes, we must to use .html() rather than .append() & .attr().
  140. 				const appearance = shape.append("Appearance");
  141. 				appearance.append("PointProperties")
  142. 					.attr("colorMode", "POINT_COLOR")
  143. 					.attr("pointSizeMinValue", 1)
  144. 					.attr("pointSizeMaxValue", 100)
  145. 					.attr("pointSizeScaleFactor", 5);
  147. 				const pointset = shape.append("PointSet");
  148. 				pointset.append("Coordinate")
  149. 					.attr("point", (d) => d.point);
  150. 				pointset.append("Color")
  151. 					.attr("color", (d) => d.color);
  152. 				*/
  154. 				shape.html((d) => `
  155. 					<Appearance>
  156. 						<PointProperties colorMode="POINT_COLOR" pointSizeMinValue="1" pointSizeMaxValue="100" pointSizeScaleFactor="5"></PointProperties>
  157. 					</Appearance>
  158. 					<PointSet>
  159. 						<Coordinate point="${d.point}"></Coordinate>
  160. 						<Color color="${d.color}"></Color>
  161. 					</IndexedFaceset>
  162. 				  `);
  163. 			};
  165. 			const particles = element.selectAll(".particle")
  166. 				.data((d) => particleData(d), (d) => d.key);
  168. 			particles.enter()
  169. 				.append("Group")
  170. 				.classed("particle", true)
  171. 				.call(shape)
  172. 				.merge(particles);
  174. 			const particleTransition = particles.transition().select("Shape");
  176. 			particleTransition.select("PointSet")
  177. 				.select("Coordinate")
  178. 				.attr("point", (d) => d.point);
  180. 			particleTransition.select("PointSet")
  181. 				.select("Color")
  182. 				.attr("color", (d) => d.color);
  183. 		});
  184. 	};
  186. 	/**
  187. 	 * Dimensions Getter / Setter
  188. 	 *
  189. 	 * @param {{x: number, y: number, z: number}} _v - 3D object dimensions.
  190. 	 * @returns {*}
  191. 	 */
  192. 	my.dimensions = function(_v) {
  193. 		if (!arguments.length) return dimensions;
  194. 		dimensions = _v;
  195. 		return this;
  196. 	};
  198. 	/**
  199. 	 * X Scale Getter / Setter
  200. 	 *
  201. 	 * @param {d3.scale} _v - D3 scale.
  202. 	 * @returns {*}
  203. 	 */
  204. 	my.xScale = function(_v) {
  205. 		if (!arguments.length) return xScale;
  206. 		xScale = _v;
  207. 		return my;
  208. 	};
  210. 	/**
  211. 	 * Y Scale Getter / Setter
  212. 	 *
  213. 	 * @param {d3.scale} _v - D3 scale.
  214. 	 * @returns {*}
  215. 	 */
  216. 	my.yScale = function(_v) {
  217. 		if (!arguments.length) return yScale;
  218. 		yScale = _v;
  219. 		return my;
  220. 	};
  222. 	/**
  223. 	 * Z Scale Getter / Setter
  224. 	 *
  225. 	 * @param {d3.scale} _v - D3 scale.
  226. 	 * @returns {*}
  227. 	 */
  228. 	my.zScale = function(_v) {
  229. 		if (!arguments.length) return zScale;
  230. 		zScale = _v;
  231. 		return my;
  232. 	};
  234. 	/**
  235. 	 * Color Scale Getter / Setter
  236. 	 *
  237. 	 * @param {d3.scale} _v - D3 color scale.
  238. 	 * @returns {*}
  239. 	 */
  240. 	my.colorScale = function(_v) {
  241. 		if (!arguments.length) return colorScale;
  242. 		colorScale = _v;
  243. 		return my;
  244. 	};
  246. 	/**
  247. 	 * Color Getter / Setter
  248. 	 *
  249. 	 * @param {string} _v - Color (e.g. "red" or "#ff0000").
  250. 	 * @returns {*}
  251. 	 */
  252. 	my.color = function(_v) {
  253. 		if (!arguments.length) return color;
  254. 		color = _v;
  255. 		return my;
  256. 	};
  258. 	/**
  259. 	 * Colors Getter / Setter
  260. 	 *
  261. 	 * @param {Array} _v - Array of colours used by color scale.
  262. 	 * @returns {*}
  263. 	 */
  264. 	my.colors = function(_v) {
  265. 		if (!arguments.length) return colors;
  266. 		colors = _v;
  267. 		return my;
  268. 	};
  270. 	/**
  271. 	 * Mappings Getter / Setter
  272. 	 *
  273. 	 * @param {Object} _v - Map properties to colour etc.
  274. 	 * @returns {*}
  275. 	 */
  276. 	my.mappings = function(_v) {
  277. 		if (!arguments.length) return mappings;
  278. 		mappings = _v;
  279. 		return my;
  280. 	};
  282. 	/**
  283. 	 * Dispatch On Getter
  284. 	 *
  285. 	 * @returns {*}
  286. 	 */
  287. 	my.on = function() {
  288. 		let value = dispatch.on.apply(dispatch, arguments);
  289. 		return value === dispatch ? my : value;
  290. 	};
  292. 	return my;
  293. }