Skip to content
Permalink
Browse files

Added ColorScale support to Scatter Plot.

  • Loading branch information...
jamesleesaunders committed Nov 1, 2019
1 parent 77144b4 commit 42af87ad994aa9ef843d3e0d3c6143a94b7d73d1

This file was deleted.

Large diffs are not rendered by default.

BIN +115 Bytes (100%) dist/d3-x3d.zip
Binary file not shown.
@@ -19,7 +19,9 @@
var chartHolder = d3.select("#chartholder");
// Declare the chart component
var myChart = d3.x3d.chart.scatterPlot();
var myChart = d3.x3d.chart.scatterPlot()
.colors(d3.schemeRdYlGn[8])
.sizeRange([0.1, 1.5]);
var refreshChart = function() {
// Generate some data
@@ -20,7 +20,9 @@
var chartHolder = d3.select("#chartholder");
// Declare the chart component
var myChart = d3.x3d.chart.scatterPlot();
var myChart = d3.x3d.chart.scatterPlot()
.colors(d3.schemeRdYlGn[8])
.sizeRange([0.1, 1.5]);
var refreshChart = function() {
// Generate some data
@@ -28,6 +28,7 @@ export default function() {
let height = 500;
let dimensions = { x: 40, y: 40, z: 40 };
let colors = ["green", "red", "yellow", "steelblue", "orange"];
let sizeRange = [0.5, 3.5];
let classed = "d3X3dBubbleChart";
let debug = false;

@@ -37,7 +38,6 @@ export default function() {
let zScale;
let colorScale;
let sizeScale;
let sizeDomain = [0.5, 3.5];

/* Components */
const viewpoint = component.viewpoint();
@@ -74,7 +74,7 @@ export default function() {

sizeScale = d3.scaleLinear()
.domain(valueExtent)
.range(sizeDomain);
.range(sizeRange);
};

/**
@@ -251,14 +251,14 @@ export default function() {
};

/**
* Size Domain Getter / Setter
* Size Range Getter / Setter
*
* @param {number[]} _v - Size min and max (e.g. [0.5, 3.0]).
* @returns {*}
*/
my.sizeDomain = function(_v) {
if (!arguments.length) return sizeDomain;
sizeDomain = _v;
my.sizeRange = function(_v) {
if (!arguments.length) return sizeRange;
sizeRange = _v;
return my;
};

@@ -28,16 +28,18 @@ export default function() {
let width = 500;
let height = 500;
let dimensions = { x: 40, y: 40, z: 40 };
let color = "orange";
let colors = ["orange"];
let color;
let classed = "d3X3dScatterPlot";
let debug = false;

/* Scales */
let xScale;
let yScale;
let zScale;
let colorScale;
let sizeScale;
let sizeDomain = [0.2, 2.5];
let sizeRange = [0.2];

/* Components */
const viewpoint = component.viewpoint();
@@ -71,7 +73,17 @@ export default function() {

sizeScale = d3.scaleLinear()
.domain(valueExtent)
.range(sizeDomain);
.range(sizeRange);

if (color) {
colorScale = d3.scaleQuantize()
.domain(valueExtent)
.range([color, color]);
} else {
colorScale = d3.scaleQuantize()
.domain(valueExtent)
.range(colors);
}
};

/**
@@ -138,8 +150,8 @@ export default function() {
bubbles.xScale(xScale)
.yScale(yScale)
.zScale(zScale)
.color(color)
.sizeScale(sizeScale)
.colorScale(colorScale)
.on("d3X3dClick", function(e) {
const d = d3.select(e.target).datum();
scene.select(".crosshair")
@@ -241,6 +253,42 @@ export default function() {
return my;
};

/**
* Size Scale Getter / Setter
*
* @param {d3.scale} _v - D3 color scale.
* @returns {*}
*/
my.sizeScale = function(_v) {
if (!arguments.length) return sizeScale;
sizeScale = _v;
return my;
};

/**
* Size Range Getter / Setter
*
* @param {number[]} _v - Size min and max (e.g. [1, 9]).
* @returns {*}
*/
my.sizeRange = function(_v) {
if (!arguments.length) return sizeRange;
sizeRange = _v;
return my;
};

/**
* Color Scale Getter / Setter
*
* @param {d3.scale} _v - D3 color scale.
* @returns {*}
*/
my.colorScale = function(_v) {
if (!arguments.length) return colorScale;
colorScale = _v;
return my;
};

/**
* Color Getter / Setter
*
@@ -253,6 +301,18 @@ export default function() {
return my;
};

/**
* Colors Getter / Setter
*
* @param {Array} _v - Array of colours used by color scale.
* @returns {*}
*/
my.colors = function(_v) {
if (!arguments.length) return colors;
colors = _v;
return my;
};

/**
* Size Scale Getter / Setter
*
@@ -266,14 +326,14 @@ export default function() {
};

/**
* Size Domain Getter / Setter
* Size Range Getter / Setter
*
* @param {number[]} _v - Size min and max (e.g. [0.5, 3.0]).
* @returns {*}
*/
my.sizeDomain = function(_v) {
if (!arguments.length) return sizeDomain;
sizeDomain = _v;
my.sizeRange = function(_v) {
if (!arguments.length) return sizeRange;
sizeRange = _v;
return my;
};

@@ -37,7 +37,7 @@ export default function() {
let width = 500;
let height = 500;
let dimensions = { x: 40, y: 40, z: 40 };
let colors = d3.interpolateRdYlGn;
let colors = d3.schemeRdYlGn[8];
let classed = "d3X3dVectorFieldChart";
let debug = false;

@@ -47,7 +47,7 @@ export default function() {
let zScale;
let colorScale;
let sizeScale;
let sizeDomain = [2.0, 5.0];
let sizeRange = [2.0, 5.0];
let origin = { x: 0, y: 0, z: 0 };

/* Components */
@@ -108,13 +108,13 @@ export default function() {
.domain([minZ, maxZ])
.range([0, dimensionZ]);

colorScale = d3.scaleSequential()
.domain(extent.slice().reverse())
.interpolator(colors);

sizeScale = d3.scaleLinear()
.domain(extent)
.range(sizeDomain);
.range(sizeRange);

colorScale = d3.scaleQuantize()
.domain(extent)
.range(colors);

// TODO: Have a think about whether this is appropriate?
// Or, do we always want the origin to be 0,0,0 ?
@@ -299,14 +299,14 @@ export default function() {
};

/**
* Size Domain Getter / Setter
* Size Range Getter / Setter
*
* @param {number[]} _v - Size min and max (e.g. [0.5, 3.0]).
* @returns {*}
*/
my.sizeDomain = function(_v) {
if (!arguments.length) return sizeDomain;
sizeDomain = _v;
my.sizeRange = function(_v) {
if (!arguments.length) return sizeRange;
sizeRange = _v;
return my;
};

@@ -12,15 +12,17 @@ export default function() {

/* Default Properties */
let dimensions = { x: 40, y: 40, z: 40 };
let color = "orange";
let colors = d3.schemeRdYlGn[8];
let color;
let classed = "d3X3dBubbles";

/* Scales */
let xScale;
let yScale;
let zScale;
let colorScale;
let sizeScale;
let sizeDomain = [0.5, 4.0];
let sizeRange = [0.5, 4.0];

/**
* Initialise Data and Scales
@@ -54,7 +56,17 @@ export default function() {
if (typeof sizeScale === "undefined") {
sizeScale = d3.scaleLinear()
.domain(valueExtent)
.range(sizeDomain);
.range(sizeRange);
}

if (color) {
colorScale = d3.scaleQuantize()
.domain(valueExtent)
.range([color, color]);
} else if (typeof colorScale === "undefined") {
colorScale = d3.scaleQuantize()
.domain(valueExtent)
.range(colors);
}
};

@@ -83,7 +95,7 @@ export default function() {

shape.append("Appearance")
.append("Material")
.attr("diffuseColor", colorParse(color))
.attr("diffuseColor", (d) => colorParse(colorScale(d.value)))
.attr("ambientIntensity", 0.1);

return shape;
@@ -102,7 +114,7 @@ export default function() {
.select("Shape")
.select("Appearance")
.select("Material")
.attr("diffuseColor", colorParse(color));
.attr("diffuseColor", (d) => colorParse(colorScale(d.value)));

bubbles.exit()
.remove();
@@ -170,14 +182,26 @@ export default function() {
};

/**
* Size Domain Getter / Setter
* Size Range Getter / Setter
*
* @param {number[]} _v - Size min and max (e.g. [1, 9]).
* @returns {*}
*/
my.sizeDomain = function(_v) {
if (!arguments.length) return sizeDomain;
sizeDomain = _v;
my.sizeRange = function(_v) {
if (!arguments.length) return sizeRange;
sizeRange = _v;
return my;
};

/**
* Color Scale Getter / Setter
*
* @param {d3.scale} _v - D3 color scale.
* @returns {*}
*/
my.colorScale = function(_v) {
if (!arguments.length) return colorScale;
colorScale = _v;
return my;
};

@@ -193,6 +217,18 @@ export default function() {
return my;
};

/**
* Colors Getter / Setter
*
* @param {Array} _v - Array of colours used by color scale.
* @returns {*}
*/
my.colors = function(_v) {
if (!arguments.length) return colors;
colors = _v;
return my;
};

/**
* Dispatch On Getter
*

0 comments on commit 42af87a

Please sign in to comment.
You can’t perform that action at this time.