Skip to content

Commit

Permalink
Version 2.0.9 - Fix ordering of bar chart x-axis and z-axis.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesleesaunders
jamesleesaunders committed Jul 19, 2021
1 parent ee6b5e9 commit e2bfff1
Show file tree
Hide file tree
Showing 8 changed files with 109 additions and 147 deletions.
15 changes: 11 additions & 4 deletions dist/d3-x3d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

var d3__namespace = /*#__PURE__*/_interopNamespace(d3);

var version = "2.0.8";
var version = "2.0.9";
var license = "GPL-2.0";

function _extends() {
Expand Down Expand Up @@ -220,14 +220,21 @@
*
* @private
* @param {Array} array1 - First Array.
* @param {Array} array2 - First Array.
* @param {Array} array2 - Second Array.
* @returns {Array}
*/


var union = function union(array1, array2) {
var ret = [];
var arr = array1.concat(array2);
var arr;

if (array1.length > array2.length) {
arr = array2.concat(array1);
} else {
arr = array1.concat(array2);
}

var len = arr.length;
var assoc = {};

Expand Down Expand Up @@ -5796,7 +5803,7 @@
dimensionZ = _dimensions.z;
xScale = d3__namespace.scaleBand().domain(columnKeys).range([0, dimensionX]).padding(0.5).align(0.75);
yScale = d3__namespace.scaleLinear().domain(valueExtent).range([0, dimensionY]).nice();
zScale = d3__namespace.scaleBand().domain(rowKeys).range([0, dimensionZ]).padding(0.5).align(0.75);
zScale = d3__namespace.scaleBand().domain(rowKeys.reverse()).range([0, dimensionZ]).padding(0.5).align(0.75);
colorScale = d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);
};
/**
Expand Down
2 changes: 1 addition & 1 deletion dist/d3-x3d.min.js
View file

Large diffs are not rendered by default.

Binary file modified dist/d3-x3d.zip
View file
Binary file not shown.
81 changes: 43 additions & 38 deletions examples/X3DOM/chart/BarChartMultiSeries2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,56 +20,56 @@
{ row: 6, column: 14, val: 1 },
{ row: 1, column: 2, val: 4 },
{ row: 1, column: 3, val: 7 },
{ row: 2, column: 9, val: 8 },
{ row: 2, column: 10, val: 4 },
{ row: 2, column: 11, val: 2 },
{ row: 2, column: 12, val: 9 },
{ row: 3, column: 12, val: 5 },
{ row: 3, column: 13, val: 9 },
{ row: 3, column: 14, val: 1 },
{ row: 3, column: 15, val: 2 },
{ row: 4, column: 1, val: 2 },
{ row: 4, column: 2, val: 4 },
{ row: 4, column: 3, val: 7 },
{ row: 4, column: 4, val: 2 },
{ row: 2, column: 13, val: 3 },
{ row: 2, column: 14, val: 3 },
{ row: 2, column: 15, val: 2 },
// { row: 3, column: 1, val: 8 },
// { row: 3, column: 2, val: 3 },
// { row: 3, column: 3, val: 8 },
{ row: 3, column: 4, val: 1 },
{ row: 3, column: 5, val: 8 },
{ row: 2, column: 5, val: 5 },
{ row: 1, column: 4, val: 2 },
{ row: 1, column: 5, val: 4 },
{ row: 1, column: 6, val: 7 },
// { row: 1, column: 6, val: 7 },
{ row: 1, column: 7, val: 2 },
{ row: 1, column: 8, val: 4 },
{ row: 1, column: 11, val: 4 },
{ row: 1, column: 12, val: 7 },
{ row: 1, column: 13, val: 2 },
{ row: 1, column: 14, val: 4 },
{ row: 1, column: 9, val: 7 },
{ row: 1, column: 10, val: 2 },
// { row: 1, column: 10, val: 2 },
{ row: 1, column: 11, val: 4 },
{ row: 1, column: 12, val: 7 },
{ row: 1, column: 13, val: 2 },
{ row: 1, column: 14, val: 4 },
{ row: 1, column: 15, val: 7 },
{ row: 2, column: 1, val: 6 },
{ row: 2, column: 2, val: 5 },
{ row: 2, column: 3, val: 3 },
{ row: 2, column: 4, val: 2 },
{ row: 2, column: 5, val: 5 },
{ row: 2, column: 6, val: 7 },
{ row: 2, column: 7, val: 1 },
// { row: 2, column: 3, val: 3 },
// { row: 2, column: 4, val: 2 },
// { row: 2, column: 6, val: 7 },
// { row: 2, column: 7, val: 1 },
{ row: 2, column: 8, val: 1 },
{ row: 2, column: 9, val: 8 },
{ row: 2, column: 10, val: 4 },
{ row: 2, column: 11, val: 2 },
{ row: 2, column: 12, val: 9 },
{ row: 2, column: 13, val: 3 },
{ row: 2, column: 14, val: 3 },
{ row: 2, column: 15, val: 2 },
{ row: 3, column: 1, val: 8 },
{ row: 3, column: 2, val: 3 },
{ row: 3, column: 3, val: 8 },
{ row: 3, column: 4, val: 1 },
{ row: 3, column: 5, val: 8 },
{ row: 3, column: 6, val: 7 },
{ row: 3, column: 7, val: 4 },
{ row: 3, column: 8, val: 3 },
{ row: 3, column: 9, val: 2 },
{ row: 3, column: 10, val: 7 },
{ row: 3, column: 11, val: 5 },
{ row: 3, column: 12, val: 5 },
{ row: 3, column: 13, val: 9 },
{ row: 3, column: 14, val: 1 },
{ row: 3, column: 15, val: 2 },
{ row: 4, column: 1, val: 2 },
{ row: 4, column: 2, val: 4 },
{ row: 4, column: 3, val: 7 },
{ row: 4, column: 4, val: 2 },
{ row: 4, column: 5, val: 4 },
{ row: 4, column: 6, val: 7 },
{ row: 4, column: 7, val: 2 },
Expand All @@ -83,9 +83,9 @@
{ row: 4, column: 15, val: 7 },
{ row: 5, column: 1, val: 6 },
{ row: 5, column: 2, val: 5 },
{ row: 5, column: 3, val: 3 },
{ row: 5, column: 4, val: 2 },
{ row: 5, column: 5, val: 5 },
// { row: 5, column: 3, val: 3 },
// { row: 5, column: 4, val: 2 },
// { row: 5, column: 5, val: 5 },
{ row: 5, column: 6, val: 7 },
{ row: 5, column: 7, val: 1 },
{ row: 5, column: 8, val: 1 },
Expand All @@ -103,35 +103,40 @@
{ row: 6, column: 5, val: 8 },
{ row: 6, column: 6, val: 7 },
{ row: 6, column: 7, val: 4 },
{ row: 6, column: 8, val: 3 },
// { row: 6, column: 8, val: 3 },
{ row: 6, column: 9, val: 2 },
{ row: 1, column: 14, val: 4 },
{ row: 6, column: 15, val: 2 },
{ row: 6, column: 10, val: 7 },
{ row: 6, column: 11, val: 5 },
{ row: 6, column: 12, val: 5 },
// { row: 6, column: 12, val: 5 },
{ row: 6, column: 13, val: 9 },
{ row: 1, column: 11, val: 4 },
{ row: 1, column: 12, val: 7 },
{ row: 1, column: 13, val: 2 },
{ row: 1, column: 14, val: 4 },
{ row: 6, column: 15, val: 2 }
{ row: 1, column: 13, val: 2 }
];
console.log(data);

var formatData = d3.nest()
let formatData = d3.nest()
.key(function(d) { return d.row; })
.entries(data.sort((a, b) => +a.key - +b.key))
.entries(data.sort((a, b) => {
return +a.row - +b.row;
}))
.map((d) => {
return {
key: d.key, values: d3.nest()
.key((d) => {
return d.column;
})
.entries(d.values.sort((a, b) => +a.key - +b.key))
.entries(d.values.sort((a, b) => {
return +a.column - +b.column;
}))
.map((d) => {
return { key: d.key, value: d.values[0].val };
})
};
});

console.log(formatData);

var chartholder = d3.select("#chartholder");
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "d3-x3d",
"version": "2.0.8",
"version": "2.0.9",
"description": "3D Data Driven Charting Library with D3 and X3D",
"license": "GPL-2.0",
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion src/chart/barChartMultiSeries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default function() {
.nice();

zScale = d3.scaleBand()
.domain(rowKeys)
.domain(rowKeys.reverse())
.range([0, dimensionZ])
.padding(0.5)
.align(0.75);
Expand Down
12 changes: 10 additions & 2 deletions src/dataTransform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,19 @@ export default function dataTransform(data) {
*
* @private
* @param {Array} array1 - First Array.
* @param {Array} array2 - First Array.
* @param {Array} array2 - Second Array.
* @returns {Array}
*/
const union = function(array1, array2) {
const ret = [];
const arr = array1.concat(array2);
let arr;

if (array1.length > array2.length) {
arr = array2.concat(array1);
} else {
arr = array1.concat(array2);
}

let len = arr.length;
const assoc = {};

Expand Down Expand Up @@ -277,6 +284,7 @@ export default function dataTransform(data) {
row.values.forEach((d, i) => {
tmp[i] = d.key;
});

keys = union(keys, tmp);

return keys;
Expand Down
142 changes: 42 additions & 100 deletions test/dataTransformTest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,117 +179,59 @@ test.describe("Test Rotate", function() {
});










/* Custom Test for Reddit user pranavk26 */

function groupBy(array, f) {
var groups = {};
array.forEach(function(o) {
var group = JSON.stringify(f(o));
groups[group] = groups[group] || [];
groups[group].push(o);
});
return Object.keys(groups).map(function(group) {
return groups[group];
})
}

function sortByRow(array) {
return array.sort(function(a, b) {
var x = a.row;
var y = b.row;
return ((x < y) ? -1 : ((x > y ? 1 : 0)));
});
}

function sortByColumn(array) {
return array.sort(function(a, b) {
var x = a.column;
var y = b.column;
return ((x < y) ? -1 : ((x > y ? 1 : 0)));
});
}

function arrToJSON(array) {
var result = [];
sortByRow(array);
var columns = groupBy(array, function(item) {
return [item.row];
});
for (var a = 0; a < columns.length; a++) {
sortByColumn(columns[a]);
result.push({ key: columns[a][0]['row'].toString(), values: [] });
for (var b = 0; b < columns[a].length; b++) {
result[a]['values'].push({ key: columns[a][b]['column'].toString(), value: columns[a][b]['val'] });
}
}
return result;
}

var data = [
let data = [
{ row: 1, column: 1, val: 2 },
{ row: 1, column: 2, val: 4 },
{ row: 3, column: 1, val: 4 },
{ row: 1, column: 3, val: 7 },
{ row: 1, column: 4, val: 2 },
{ row: 1, column: 5, val: 4 },
{ row: 1, column: 6, val: 7 },
{ row: 1, column: 7, val: 2 },
{ row: 1, column: 8, val: 4 },
{ row: 1, column: 9, val: 7 },
{ row: 1, column: 10, val: 2 },
{ row: 1, column: 11, val: 4 },
{ row: 1, column: 12, val: 7 },
{ row: 1, column: 13, val: 2 },
{ row: 1, column: 14, val: 4 },
{ row: 1, column: 15, val: 7 },
{ row: 1, column: 16, val: 2 },
{ row: 1, column: 17, val: 4 },
{ row: 1, column: 18, val: 7 },
{ row: 1, column: 19, val: 2 },
{ row: 1, column: 20, val: 4 },
{ row: 1, column: 21, val: 7 },
{ row: 1, column: 22, val: 2 },
{ row: 1, column: 23, val: 4 },
{ row: 1, column: 24, val: 7 },
{ row: 2, column: 1, val: 2 },
{ row: 2, column: 2, val: 4 },
{ row: 2, column: 3, val: 7 },
{ row: 2, column: 4, val: 2 },
{ row: 2, column: 5, val: 4 },
{ row: 2, column: 6, val: 7 },
{ row: 2, column: 7, val: 2 },
{ row: 2, column: 8, val: 4 },
{ row: 2, column: 9, val: 7 },
{ row: 2, column: 10, val: 2 },
{ row: 2, column: 11, val: 4 },
{ row: 2, column: 12, val: 7 },
{ row: 2, column: 13, val: 2 },
{ row: 2, column: 14, val: 4 },
{ row: 2, column: 15, val: 7 },
{ row: 2, column: 16, val: 2 },
{ row: 2, column: 17, val: 4 },
{ row: 2, column: 18, val: 7 },
{ row: 2, column: 19, val: 2 },
{ row: 2, column: 20, val: 4 },
{ row: 2, column: 21, val: 7 },
{ row: 2, column: 22, val: 2 },
{ row: 2, column: 23, val: 4 },
{ row: 2, column: 24, val: 7 },
{ row: 2, column: 25, val: 2 },
{ row: 3, column: 2, val: 7 },
// { row: 2, column: 1, val: 7 },
// { row: 2, column: 2, val: 2 },
{ row: 2, column: 3, val: 4 },
{ row: 2, column: 4, val: 7 },
{ row: 2, column: 5, val: 2 },
{ row: 3, column: 3, val: 2 },
// { row: 3, column: 4, val: 4 },
{ row: 1, column: 2, val: 4 },
{ row: 3, column: 5, val: 7 }
];

let formatData = arrToJSON(data);
let formatData = d3.nest()
.key(function(d) { return d.row; })
.entries(data.sort((a, b) => {
return +a.row - +b.row;
}))
.map((d) => {
return {
key: d.key, values: d3.nest()
.key((d) => {
return d.column;
})
.entries(d.values.sort((a, b) => {
return +a.column - +b.column;
}))
.map((d) => {
return { key: d.key, value: d.values[0].val };
})
};
});

test.describe("Test rowKeys remain in order", function() {
let actual = d3X3d.dataTransform(formatData).summary().rowKeys;
let expected = ["1", "2", "3"];

test.it("should be equivalent", function(done) {
chai.expect(actual).to.be.deep.equal(expected);
done();
});
});

test.describe("Test columnKeys remain in order", function() {
let actual = d3X3d.dataTransform(formatData).summary().columnKeys;
let expected = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25"];
let expected = ["1", "2", "3", "4", "5"];

test.it("should be equivalent", function(done) {
chai.expect(actual).to.be.deep.equal(expected);
Expand Down

0 comments on commit e2bfff1

Please sign in to comment.