Skip to content

Commit 7bdda02

Browse files
phamvanvungphamvanvung
committed
Updated documents
1 parent 371c4de commit 7bdda02

27 files changed

+778
-232
lines changed

‎index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ You can use these playground pages to explore the underlying scagnostics calcula
99

1010
nD: [https://idatavisualizationlab.github.io/ScagnosticsJS/scagnosticsnd/](https://idatavisualizationlab.github.io/ScagnosticsJS/scagnosticsnd/)
1111

12+
## Scagnostics measures and the exemplar plots they target
13+
![](supplementarydocuments/scagreaction.png)
14+
Figure 1: Scagnostics measures and exemplar plots that they target for 2D (a), 3D (b), and nD (c).
1215

1316
## [2D Version](#2d-version)
1417
### Installation

‎nrcdataset/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@
303303
startBinGridSize: startBinGridSize,
304304
isBinned: false
305305
}
306-
let scag = scagnostics(points, options);
306+
let scag = new scagnostics(points, options);
307307

308308
update(scag);
309309
}

‎scagnostics/build/js/scagnostics.min.js

Lines changed: 46 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scagnostics/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,8 @@
9999
</head>
100100
<body>
101101
<header>
102-
<h1 class="page"><a href="../documentation.html"><b>ScagnosticsJS</b></a> <span class="optional">Exploration Page</span>.</h1>
102+
<h1 class="page"><a href="../documentation.html"><b>ScagnosticsJS</b></a> <span
103+
class="optional">Exploration Page</span>.</h1>
103104
</header>
104105
<div id="top-controls">
105106
<div class="container page">
@@ -109,8 +110,8 @@ <h1 class="page"><a href="../documentation.html"><b>ScagnosticsJS</b></a> <span
109110
<select class="select multiple" id="scagnostics" onchange="changeDataset(this);">
110111
<option value="outlying">Outlying scatter plot</option>
111112
<option value="skewed">Skewed scatter plot</option>
112-
<option value="clumpy">Clumpy scatter plot</option>
113113
<option value="sparse">Sparse scatter plot</option>
114+
<option value="clumpy">Clumpy scatter plot</option>
114115
<option value="striated">Striated scatter plot</option>
115116
<option value="convex">Convex scatter plot</option>
116117
<option value="skinny">Skinny scatter plot</option>

‎scagnostics/index.js

Lines changed: 70 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
// let binType = "leader";
2-
let binType = "hexagon";
3-
var startBinGridSize = 20;
1+
let binType = "leader";
2+
// let binType = "hexagon";
3+
// let binType = "rectangular";
4+
var startBinGridSize = 40;
45
let animateTime = 20;
56
/*This is for the tooltip*/
67
var div = d3.select("body").append("div")
@@ -26,7 +27,7 @@ function createControlButtons(theContainer, theOptions) {
2627
createControlButtons("controlButtons", optionsBinLeader);
2728
//Display variables
2829
let dataPointRadius = 3;
29-
let pointColor = 'steelblue';
30+
let pointColor = 'black';
3031
let dataPointOpacity = 0.9;
3132
let binOpacity = 0.8;
3233
let origPoints = null;
@@ -65,9 +66,10 @@ const pi = Math.PI;
6566
const cos = Math.cos;
6667
const sin = Math.sin;
6768

68-
//<editor-fold desc="This section is for generation of the graphics for the paper only">
69+
// <editor-fold desc="This section is for generation of the graphics for the paper only">
6970
// d3.tsv("../data/faithful.tsv", (error, rawData) => {
7071
// if (error) throw error;
72+
// debugger
7173
// let points = rawData.map(d => [+d["eruptions"], +d["waiting"]]);
7274
// //Assign original points to the data.
7375
// points.forEach(p => {
@@ -76,21 +78,46 @@ const sin = Math.sin;
7678
// }
7779
// p.data.originalPoint = [p[0], p[1]];
7880
// });
79-
// let scag = scagnostics(points, {binType: "hexagon", startBinGridSize: 10});
81+
// let scag = new scagnostics(points, {binType: "hexagon", startBinGridSize: 10});
8082
//
8183
// drawContentBound(normalizedsvg);
8284
// drawContentBound(scagsvg);
8385
// drawNormalizedData(scag);
8486
// draw(scag);
8587
// });
86-
//</editor-fold>
8788

89+
// d3.json("../data/UnemploymentRate.json", (error, rawData) => {
90+
// if (error) throw error;
91+
// let origPoints = rawData.YearsData[3].s0.map((_, i)=>[rawData.YearsData[5].s0[i], rawData.YearsData[5].s1[i]]);
92+
// //Now add data.
93+
// let points = [];
94+
// origPoints.forEach(point=>{
95+
// points.push(point);
96+
// for (let i = 0; i < 3; i++) {
97+
// points.push([point[0] + d3.randomNormal(point[0], 0.1)(), point[1] + d3.randomNormal(point[1], 0.1)()]);
98+
// }
99+
// });
100+
//
101+
// //Filter NAN
102+
// points = points.filter(d=>typeof d[0] === "number" && typeof d[1] === "number");
103+
//
104+
// let scag = new scagnostics(points, {binType: binType, startBinGridSize: startBinGridSize});
105+
//
106+
// drawContentBound(normalizedsvg);
107+
// drawContentBound(scagsvg);
108+
// drawNormalizedData(scag);
109+
// draw(scag);
110+
// });
111+
// </editor-fold>
112+
113+
114+
//<editor-fold desc="Typical data">
88115
/***********OUTLYING DATA*******************/
89116
outlyingScatterPlot();
90117

91118
function outlyingScatterPlot() {
92-
let randomX = d3.randomNormal(svgWidth / 2, 50),
93-
randomY = d3.randomNormal(svgHeight / 2, 50),
119+
let randomX = d3.randomNormal(svgWidth / 20, 20),
120+
randomY = d3.randomNormal(svgHeight / 20, 20),
94121
points = d3.range(300).map(function () {
95122
return [randomX(), randomY()];
96123
});
@@ -118,6 +145,39 @@ function skewedScatterPlot() {
118145
datasets.push(points);
119146
}
120147

148+
/***********SPARSED DATA*******************/
149+
sparsedScatterPlot();
150+
151+
function sparsedScatterPlot() {
152+
let points = [];
153+
//Top left points
154+
let randomX = d3.randomNormal(svgWidth / 4, 3),
155+
randomY = d3.randomNormal(svgHeight / 4, 3);
156+
d3.range(20).map(function () {
157+
points.push([randomX(), randomY()]);
158+
});
159+
//Top right
160+
randomX = d3.randomNormal(3 * svgWidth / 4, 3),
161+
randomY = d3.randomNormal(svgHeight / 4, 3);
162+
d3.range(20).map(function () {
163+
points.push([randomX(), randomY()]);
164+
});
165+
//Bottom left
166+
randomX = d3.randomNormal(svgWidth / 4, 3);
167+
randomY = d3.randomNormal(3 * svgHeight / 4, 3);
168+
d3.range(20).map(function () {
169+
points.push([randomX(), randomY()]);
170+
});
171+
172+
//Bottom right
173+
randomX = d3.randomNormal(3 * svgWidth / 4, 3);
174+
randomY = d3.randomNormal(3 * svgHeight / 4, 3);
175+
d3.range(20).map(function () {
176+
points.push([randomX(), randomY()]);
177+
});
178+
datasets.push(points);
179+
}
180+
121181
/***********CLUMPY DATA*******************/
122182
clumpyScatterPlot();
123183

@@ -162,38 +222,7 @@ function clumpyScatterPlot() {
162222
datasets.push(points);
163223
}
164224

165-
/***********SPARSED DATA*******************/
166-
sparsedScatterPlot();
167-
168-
function sparsedScatterPlot() {
169-
let points = [];
170-
//Top left points
171-
let randomX = d3.randomNormal(svgWidth / 4, 3),
172-
randomY = d3.randomNormal(svgHeight / 4, 3);
173-
d3.range(20).map(function () {
174-
points.push([randomX(), randomY()]);
175-
});
176-
//Top right
177-
randomX = d3.randomNormal(3 * svgWidth / 4, 3),
178-
randomY = d3.randomNormal(svgHeight / 4, 3);
179-
d3.range(20).map(function () {
180-
points.push([randomX(), randomY()]);
181-
});
182-
//Bottom left
183-
randomX = d3.randomNormal(svgWidth / 4, 3);
184-
randomY = d3.randomNormal(3 * svgHeight / 4, 3);
185-
d3.range(20).map(function () {
186-
points.push([randomX(), randomY()]);
187-
});
188225

189-
//Bottom right
190-
randomX = d3.randomNormal(3 * svgWidth / 4, 3);
191-
randomY = d3.randomNormal(3 * svgHeight / 4, 3);
192-
d3.range(20).map(function () {
193-
points.push([randomX(), randomY()]);
194-
});
195-
datasets.push(points);
196-
}
197226

198227
/***********STRIATED DATA*******************/
199228
striatedScatterPlot();
@@ -321,6 +350,7 @@ function yLineScatterPlot() {
321350
});
322351
datasets.push(points);
323352
}
353+
//</editor-fold>
324354

325355
changeDataset(document.getElementById("scagnostics"));
326356
//Toggle some displays

‎scagnostics/src/scripts/modules/rectangularbinner.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {distance} from "./kruskal-mst";
2+
3+
export class RectangularBinner {
4+
constructor(points, gridNumber) {
5+
//TODO: Should check if there are more than 3 unique values here or even after the binning.
6+
//TODO: May need to clone the points to avoid modifying it, but we don't do to reserve other data or to make the process faster
7+
// //Clone these to avoid modifying them
8+
// this.points = points.map(p=>p.slice(0));
9+
this.points = points;
10+
this.gridNumber = gridNumber;
11+
this.gridSize = 1.0 / gridNumber;
12+
}
13+
14+
get rectangles() {
15+
let self = this;
16+
let points = this.points;
17+
let gridNumber = this.gridNumber;
18+
let gridSize = 1.0 / gridNumber;
19+
let bins = [];
20+
for (let i = 0; i < gridNumber; i++) {
21+
let b = [];
22+
for (let j = 0; j < gridNumber; j++) {
23+
b = [];//bin as an empty array.
24+
}
25+
bins.push(b);
26+
}
27+
28+
let n = points.length;
29+
for (let pi = 0; pi < n; pi++) {
30+
let point = points[pi];
31+
let x = point[0];
32+
let y = point[1];
33+
let j = x == 1 ? gridNumber - 1 : Math.floor(x / gridSize);
34+
let i = y == 0 ? gridNumber - 1 : Math.floor((1 - y) / gridSize);
35+
bins[i][j].push(point);
36+
}
37+
return bins;
38+
}
39+
}

‎scagnostics/src/scripts/scagnostics.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {LeaderBinner} from "./modules/leaderbinner";
1414
import {Binner} from "./modules/binner";
1515
import _ from "underscore";
1616
import {delaunayFromPoints} from "./modules/delaunay";
17+
import {RectangularBinner} from "./modules/rectangularbinner";
1718

1819
if (!window) {
1920
window = self;
@@ -92,7 +93,14 @@ if (!window) {
9293
binRadius = Math.sqrt(3) * shortDiagonal / 2;
9394
binner = new Binner().radius(binRadius).extent([[0, 0], [1, 1]]);//extent from [0, 0] to [1, 1] since we already normalized data.
9495
bins = binner.hexbin(normalizedPoints);
95-
} else if (!binType || binType === "leader") {
96+
}else if(binType === "rectangular"){
97+
// This section uses hexagon binning
98+
let binWidth = 1 / binSize;
99+
binRadius = binWidth;
100+
binner = new RectangularBinner(normalizedPoints, binSize);
101+
bins = binner.rectangles();
102+
}
103+
else if (!binType || binType === "leader") {
96104
// This section uses leader binner
97105
binRadius = 1 / (binSize * 2);
98106
binner = new LeaderBinner(normalizedPoints, binRadius);

‎scagnostics3d/data/HPCC_21Mar_9v.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎scagnostics3d/data/RealWorldData3d.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎scagnostics3d/data/ScagnosticsTypicalData3d.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎scagnostics3d/generateData.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<script src="lib/d3.v5.min.js"></script>
7+
<script src="build/js/scagnostics3d.min.js"></script>
8+
9+
<script src="globalVariables.js"></script>
10+
<script src="generateDataFunctions.js"></script>
11+
<script src="generateData.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
// generateDataFromTypicalSets();
16+
generateDataFromDS();
17+
</script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)