Merge pull request #55 from jamesleesaunders/v1.1.0

Build v1.1.0 Experimental Crosshair Plot Chart
jamesleesaunders · Feb 16, 2019 · 50472d7 · 50472d7
2 parents 5f1e816 + 7280dc3
commit 50472d7
Show file tree

Hide file tree

Showing 18 changed files with 591 additions and 116 deletions.
diff --git a/build/d3-x3dom.js b/build/d3-x3dom.js
diff --git a/build/d3-x3dom.min.js b/build/d3-x3dom.min.js
diff --git a/build/d3-x3dom.zip b/build/d3-x3dom.zip
diff --git a/examples/CrosshairPlot.html b/examples/CrosshairPlot.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>d3-x3dom : 3D Crosshair Plot (Experimental) Example</title>
+  <script src="https://d3js.org/d3.v5.min.js"></script>
+  <script src="https://x3dom.org/download/dev/x3dom-full.js"></script>
+  <link rel="stylesheet" href="https://x3dom.org/download/dev/x3dom.css" />
+  <script src="../build/d3-x3dom.js"></script>
+</head>
+
+<body>
+  <div id="chartholder"></div>
+
+  <script>
+    // Select chartholder
+    var chartHolder = d3.select("#chartholder");
+
+    // Generate some data
+    var myData = d3.x3dom.randomData.dataset3(10);
+
+    // Declare the chart component
+    var myChart = d3.x3dom.chart.crosshairPlot();
+
+    // Attach chart and data to the chartholder
+    chartHolder.datum(myData).call(myChart);
+
+  </script>
+
+  <div style="clear: both">Created with <a href="https://github.com/jamesleesaunders/d3-x3dom">d3-x3dom</a> D3 X3DOM Data Visualization Library.</div>
+</body>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "d3-x3dom",
-	"version": "1.0.23",
+	"version": "1.1.0",
 	"description": "D3 X3DOM Data Visualisation Library",
 	"license": "GPL-2.0",
 	"keywords": [

diff --git a/src/chart.js b/src/chart.js
@@ -1,6 +1,7 @@
 import chartBarChartMultiSeries from "./chart/barChartMultiSeries";
 import chartBarChartVertical from "./chart/barChartVertical";
 import chartBubbleChart from "./chart/bubbleChart";
+import chartCrosshairPlot from "./chart/crosshairPlot";
 import chartRibbonChartMultiSeries from "./chart/ribbonChartMultiSeries";
 import chartScatterPlot from "./chart/scatterPlot";
 import chartSurfacePlot from "./chart/surfacePlot";
@@ -10,6 +11,7 @@ export default {
 	barChartMultiSeries: chartBarChartMultiSeries,
 	barChartVertical: chartBarChartVertical,
 	bubbleChart: chartBubbleChart,
+	crosshairPlot: chartCrosshairPlot,
 	ribbonChartMultiSeries: chartRibbonChartMultiSeries,
 	scatterPlot: chartScatterPlot,
 	surfacePlot: chartSurfacePlot,

diff --git a/src/chart/barChartMultiSeries.js b/src/chart/barChartMultiSeries.js
@@ -3,7 +3,7 @@ import dataTransform from "../dataTransform";
 import component from "../component";
 
 /**
- * Reusable 3D Bar Chart
+ * Reusable 3D Multi Series Bar Chart
  *
  * @module
  *
@@ -97,19 +97,13 @@ export default function() {
 			.append("group")
 			.attr("class", (d) => d);
 
-		const viewpoint = component.viewpoint()
-			.centerOfRotation([dimensions.x / 2, dimensions.y / 2, dimensions.z / 2]);
-		scene.call(viewpoint);
-
-		scene.append("directionallight")
-			.attr("direction", "1 0 -1")
-			.attr("on", "true")
-			.attr("intensity", "0.4")
-			.attr("shadowintensity", "0");
-
 		scene.each((data) => {
 			init(data);
 
+			// Construct Viewpoint Component
+			const viewpoint = component.viewpoint()
+				.centerOfRotation([dimensions.x / 2, dimensions.y / 2, dimensions.z / 2]);
+
 			// Construct Axis Component
 			const axis = component.axisThreePlane()
 				.xScale(xScale)
@@ -123,12 +117,20 @@ export default function() {
 				.zScale(zScale)
 				.colors(colors);
 
+			scene.call(viewpoint);
+
 			scene.select(".axis")
 				.call(axis);
 
 			scene.select(".chart")
-				.datum(data)
+				.datum((d) => d)
 				.call(chart);
+
+			scene.append("directionallight")
+				.attr("direction", "1 0 -1")
+				.attr("on", "true")
+				.attr("intensity", "0.4")
+				.attr("shadowintensity", "0");
 		});
 	};
 

diff --git a/src/chart/barChartVertical.js b/src/chart/barChartVertical.js
@@ -3,7 +3,7 @@ import dataTransform from "../dataTransform";
 import component from "../component";
 
 /**
- * Reusable 3D Bar Chart
+ * Reusable 3D Vertical Bar Chart
  *
  * @module
  *
@@ -89,13 +89,13 @@ export default function() {
 			.append("group")
 			.attr("class", (d) => d);
 
-		const viewpoint = component.viewpoint()
-			.quickView("left");
-		scene.call(viewpoint);
-
 		scene.each((data) => {
 			init(data);
 
+			// Construct Viewpoint Component
+			const viewpoint = component.viewpoint()
+				.quickView("left");
+
 			// Construct Axis Components
 			const xAxis = component.axis()
 				.scale(xScale)
@@ -114,14 +114,16 @@ export default function() {
 				.yScale(yScale)
 				.colors(colors);
 
+			scene.call(viewpoint);
+
 			scene.select(".xAxis")
 				.call(xAxis);
 
 			scene.select(".yAxis")
 				.call(yAxis);
 
 			scene.select(".chart")
-				.datum(data)
+				.datum((d) => d)
 				.call(chart);
 		});
 	};

diff --git a/src/chart/bubbleChart.js b/src/chart/bubbleChart.js
@@ -102,19 +102,13 @@ export default function() {
 			.append("group")
 			.attr("class", (d) => d);
 
-		const viewpoint = component.viewpoint()
-			.centerOfRotation([dimensions.x / 2, dimensions.y / 2, dimensions.z / 2]);
-		scene.call(viewpoint);
-
-		scene.append("directionallight")
-			.attr("direction", "1 0 -1")
-			.attr("on", "true")
-			.attr("intensity", "0.4")
-			.attr("shadowintensity", "0");
-
 		scene.each((data) => {
 			init(data);
 
+			// Construct Viewpoint Component
+			const viewpoint = component.viewpoint()
+				.centerOfRotation([dimensions.x / 2, dimensions.y / 2, dimensions.z / 2]);
+
 			// Construct Axis Component
 			const axis = component.axisThreePlane()
 				.xScale(xScale)
@@ -129,12 +123,20 @@ export default function() {
 				.sizeScale(sizeScale)
 				.colorScale(colorScale);
 
+			scene.call(viewpoint);
+
 			scene.select(".axis")
 				.call(axis);
 
 			scene.select(".chart")
-				.datum(data)
+				.datum((d) => d)
 				.call(chart);
+
+			scene.append("directionallight")
+				.attr("direction", "1 0 -1")
+				.attr("on", "true")
+				.attr("intensity", "0.4")
+				.attr("shadowintensity", "0");
 		});
 	};