@decidables/prospectable-elements 0.5.0 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/lib/prospectableElements.esm.js +758 -743
- package/lib/prospectableElements.esm.js.map +1 -1
- package/lib/prospectableElements.esm.min.js +95 -95
- package/lib/prospectableElements.esm.min.js.map +1 -1
- package/lib/prospectableElements.umd.js +758 -743
- package/lib/prospectableElements.umd.js.map +1 -1
- package/lib/prospectableElements.umd.min.js +30 -30
- package/lib/prospectableElements.umd.min.js.map +1 -1
- package/package.json +6 -6
- package/src/components/cpt-space.js +99 -28
- package/src/components/decision-space.js +99 -28
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@decidables/prospectable-elements",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"description": "prospectable-elements: Web Components for visualizing Cumulative Prospect Theory",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web component",
|
|
@@ -57,15 +57,15 @@
|
|
|
57
57
|
"gulp": "^5.0.1"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@decidables/decidables-elements": "^0.5.
|
|
60
|
+
"@decidables/decidables-elements": "^0.5.7",
|
|
61
61
|
"@decidables/prospectable-math": "^0.3.5",
|
|
62
|
-
"@lit-labs/motion": "^1.0
|
|
62
|
+
"@lit-labs/motion": "^1.1.0",
|
|
63
63
|
"@observablehq/plot": "^0.6.17",
|
|
64
64
|
"bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
|
|
65
65
|
"color": "^5.0.3",
|
|
66
66
|
"d3": "^7.9.0",
|
|
67
|
-
"d3-3d": "^
|
|
68
|
-
"lit": "^3.3.
|
|
67
|
+
"d3-3d": "^2.0.0",
|
|
68
|
+
"lit": "^3.3.2"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "6fcd31a19c082ec41bde7d351bcb52161c5b654b"
|
|
71
71
|
}
|
|
@@ -474,7 +474,7 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
474
474
|
};
|
|
475
475
|
const startRotationX = (-0.85 * Math.PI) / 8;
|
|
476
476
|
const startRotationY = (3 * Math.PI) / 8;
|
|
477
|
-
const startRotationZ = 0;
|
|
477
|
+
const startRotationZ = 0.0000001; // Avoid d3-3d bug
|
|
478
478
|
|
|
479
479
|
const lineStrips3D = d33d.lineStrips3D()
|
|
480
480
|
.origin(startOrigin)
|
|
@@ -527,11 +527,11 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
527
527
|
}]);
|
|
528
528
|
// ENTER
|
|
529
529
|
const svgEnter = svgUpdate.enter().append('svg')
|
|
530
|
-
.classed('main', true)
|
|
530
|
+
.classed('main', true)
|
|
531
|
+
.call(svgDrag);
|
|
531
532
|
// MERGE
|
|
532
533
|
const svgMerge = svgEnter.merge(svgUpdate)
|
|
533
|
-
.attr('viewBox', `0 0 ${elementSize} ${elementSize}`)
|
|
534
|
-
.call(svgDrag);
|
|
534
|
+
.attr('viewBox', `0 0 ${elementSize} ${elementSize}`);
|
|
535
535
|
|
|
536
536
|
// Gradient Def
|
|
537
537
|
const gradientEnter = svgEnter.append('defs').append('linearGradient')
|
|
@@ -578,21 +578,24 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
578
578
|
lineStrips3D
|
|
579
579
|
.x((datum) => { return datum.x; })
|
|
580
580
|
.y(() => { return yScale.range()[0]; })
|
|
581
|
-
.z(() => { return zScale.range()[0]; })
|
|
581
|
+
.z(() => { return zScale.range()[0]; })
|
|
582
|
+
.data(xAxis),
|
|
582
583
|
);
|
|
583
584
|
const axisYUpdate = svgMerge.selectAll('.axis-y')
|
|
584
585
|
.data(
|
|
585
586
|
lineStrips3D
|
|
586
587
|
.x(() => { return xScale.range()[0]; })
|
|
587
588
|
.y((datum) => { return datum.y; })
|
|
588
|
-
.z(() => { return zScale.range()[1]; })
|
|
589
|
+
.z(() => { return zScale.range()[1]; })
|
|
590
|
+
.data(yAxis),
|
|
589
591
|
);
|
|
590
592
|
const axisZUpdate = svgMerge.selectAll('.axis-z')
|
|
591
593
|
.data(
|
|
592
594
|
lineStrips3D
|
|
593
595
|
.x(() => { return xScale.range()[0]; })
|
|
594
596
|
.y(() => { return yScale.range()[0]; })
|
|
595
|
-
.z((datum) => { return datum.z; })
|
|
597
|
+
.z((datum) => { return datum.z; })
|
|
598
|
+
.data(zAxis),
|
|
596
599
|
);
|
|
597
600
|
// ENTER
|
|
598
601
|
const axisXEnter = axisXUpdate.enter().append('path')
|
|
@@ -622,7 +625,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
622
625
|
return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
|
|
623
626
|
})
|
|
624
627
|
.y(() => { return yScale.range()[0] + this.rem * 1.75; })
|
|
625
|
-
.z(() => { return zScale.range()[0] + this.rem * 1.75; })
|
|
628
|
+
.z(() => { return zScale.range()[0] + this.rem * 1.75; })
|
|
629
|
+
.data(xAxis),
|
|
626
630
|
);
|
|
627
631
|
const titlePathYUpdate = svgMerge.selectAll('.title-path-y')
|
|
628
632
|
.data(
|
|
@@ -631,7 +635,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
631
635
|
.y((datum) => {
|
|
632
636
|
return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
|
|
633
637
|
})
|
|
634
|
-
.z(() => { return zScale.range()[1] - this.rem * 1.75; })
|
|
638
|
+
.z(() => { return zScale.range()[1] - this.rem * 1.75; })
|
|
639
|
+
.data(yAxis),
|
|
635
640
|
);
|
|
636
641
|
const titlePathZUpdate = svgMerge.selectAll('.title-path-z')
|
|
637
642
|
.data(
|
|
@@ -640,21 +645,40 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
640
645
|
.y(() => { return yScale.range()[0] + this.rem * 1.75; })
|
|
641
646
|
.z((datum) => {
|
|
642
647
|
return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
|
|
643
|
-
})
|
|
648
|
+
})
|
|
649
|
+
.data(zAxis),
|
|
644
650
|
);
|
|
645
651
|
const titleXUpdate = svgMerge.selectAll('.title-x')
|
|
646
652
|
.data(
|
|
647
|
-
|
|
653
|
+
lineStrips3D
|
|
654
|
+
.x((datum) => {
|
|
655
|
+
return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
|
|
656
|
+
})
|
|
657
|
+
.y(() => { return yScale.range()[0] + this.rem * 1.75; })
|
|
658
|
+
.z(() => { return zScale.range()[0] + this.rem * 1.75; })
|
|
659
|
+
.data(xAxis),
|
|
648
660
|
(datum) => { return datum[0].title; },
|
|
649
661
|
);
|
|
650
662
|
const titleYUpdate = svgMerge.selectAll('.title-y')
|
|
651
663
|
.data(
|
|
652
|
-
|
|
664
|
+
lineStrips3D
|
|
665
|
+
.x(() => { return xScale.range()[0] - this.rem * 1.75; })
|
|
666
|
+
.y((datum) => {
|
|
667
|
+
return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
|
|
668
|
+
})
|
|
669
|
+
.z(() => { return zScale.range()[1] - this.rem * 1.75; })
|
|
670
|
+
.data(yAxis),
|
|
653
671
|
(datum) => { return datum[0].title; },
|
|
654
672
|
);
|
|
655
673
|
const titleZUpdate = svgMerge.selectAll('.title-z')
|
|
656
674
|
.data(
|
|
657
|
-
|
|
675
|
+
lineStrips3D
|
|
676
|
+
.x(() => { return xScale.range()[0] - this.rem * 1.75; })
|
|
677
|
+
.y(() => { return yScale.range()[0] + this.rem * 1.75; })
|
|
678
|
+
.z((datum) => {
|
|
679
|
+
return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
|
|
680
|
+
})
|
|
681
|
+
.data(zAxis),
|
|
658
682
|
(datum) => { return datum[0].title; },
|
|
659
683
|
);
|
|
660
684
|
// ENTER
|
|
@@ -741,7 +765,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
741
765
|
})
|
|
742
766
|
.z((datum) => {
|
|
743
767
|
return datum.id === 'min' ? zScale.range()[0] : zScale.range()[0] + this.rem * 0.35;
|
|
744
|
-
})
|
|
768
|
+
})
|
|
769
|
+
.data(xTicks),
|
|
745
770
|
);
|
|
746
771
|
const ticksYUpdate = svgMerge.selectAll('.tick-y')
|
|
747
772
|
.data(
|
|
@@ -752,7 +777,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
752
777
|
.y((datum) => { return datum.y; })
|
|
753
778
|
.z((datum) => {
|
|
754
779
|
return datum.id === 'min' ? zScale.range()[1] : zScale.range()[1] - this.rem * 0.35;
|
|
755
|
-
})
|
|
780
|
+
})
|
|
781
|
+
.data(yTicks),
|
|
756
782
|
);
|
|
757
783
|
const ticksZUpdate = svgMerge.selectAll('.tick-z')
|
|
758
784
|
.data(
|
|
@@ -763,7 +789,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
763
789
|
.y((datum) => {
|
|
764
790
|
return datum.id === 'min' ? yScale.range()[0] : yScale.range()[0] + this.rem * 0.35;
|
|
765
791
|
})
|
|
766
|
-
.z((datum) => { return datum.z; })
|
|
792
|
+
.z((datum) => { return datum.z; })
|
|
793
|
+
.data(zTicks),
|
|
767
794
|
);
|
|
768
795
|
// ENTER
|
|
769
796
|
const ticksXEnter = ticksXUpdate.enter().append('path')
|
|
@@ -799,7 +826,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
799
826
|
return datum.id === 'min'
|
|
800
827
|
? zScale.range()[0] + this.rem * 4
|
|
801
828
|
: zScale.range()[0] + this.rem * 0.5;
|
|
802
|
-
})
|
|
829
|
+
})
|
|
830
|
+
.data(xTicks),
|
|
803
831
|
(datum) => { return datum[0].label; },
|
|
804
832
|
);
|
|
805
833
|
const labelPathsYUpdate = svgMerge.selectAll('.label-path-y')
|
|
@@ -815,7 +843,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
815
843
|
return datum.id === 'min'
|
|
816
844
|
? zScale.range()[1] - this.rem * 0.5
|
|
817
845
|
: zScale.range()[1] - this.rem * 4;
|
|
818
|
-
})
|
|
846
|
+
})
|
|
847
|
+
.data(yTicks),
|
|
819
848
|
(datum) => { return datum[0].label; },
|
|
820
849
|
);
|
|
821
850
|
const labelPathsZUpdate = svgMerge.selectAll('.label-path-z')
|
|
@@ -831,22 +860,59 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
831
860
|
? yScale.range()[0] + this.rem * 4
|
|
832
861
|
: yScale.range()[0] + this.rem * 0.5;
|
|
833
862
|
})
|
|
834
|
-
.z((datum) => { return datum.z; })
|
|
863
|
+
.z((datum) => { return datum.z; })
|
|
864
|
+
.data(zTicks),
|
|
835
865
|
(datum) => { return datum[0].label; },
|
|
836
866
|
);
|
|
837
867
|
const labelsXUpdate = svgMerge.selectAll('.label-x')
|
|
838
868
|
.data(
|
|
839
|
-
|
|
869
|
+
lineStrips3D
|
|
870
|
+
.x((datum) => { return datum.x; })
|
|
871
|
+
.y((datum) => {
|
|
872
|
+
return datum.id === 'min'
|
|
873
|
+
? yScale.range()[0] + this.rem * 4
|
|
874
|
+
: yScale.range()[0] + this.rem * 0.5;
|
|
875
|
+
})
|
|
876
|
+
.z((datum) => {
|
|
877
|
+
return datum.id === 'min'
|
|
878
|
+
? zScale.range()[0] + this.rem * 4
|
|
879
|
+
: zScale.range()[0] + this.rem * 0.5;
|
|
880
|
+
})
|
|
881
|
+
.data(xTicks),
|
|
840
882
|
(datum) => { return datum[0].label; },
|
|
841
883
|
);
|
|
842
884
|
const labelsYUpdate = svgMerge.selectAll('.label-y')
|
|
843
885
|
.data(
|
|
844
|
-
|
|
886
|
+
lineStrips3D
|
|
887
|
+
.x((datum) => {
|
|
888
|
+
return datum.id === 'min'
|
|
889
|
+
? xScale.range()[0] - this.rem * 0.5
|
|
890
|
+
: xScale.range()[0] - this.rem * 4;
|
|
891
|
+
})
|
|
892
|
+
.y((datum) => { return datum.y; })
|
|
893
|
+
.z((datum) => {
|
|
894
|
+
return datum.id === 'min'
|
|
895
|
+
? zScale.range()[1] - this.rem * 0.5
|
|
896
|
+
: zScale.range()[1] - this.rem * 4;
|
|
897
|
+
})
|
|
898
|
+
.data(yTicks),
|
|
845
899
|
(datum) => { return datum[0].label; },
|
|
846
900
|
);
|
|
847
901
|
const labelsZUpdate = svgMerge.selectAll('.label-z')
|
|
848
902
|
.data(
|
|
849
|
-
|
|
903
|
+
lineStrips3D
|
|
904
|
+
.x((datum) => {
|
|
905
|
+
return datum.id === 'min'
|
|
906
|
+
? xScale.range()[0] - this.rem * 4
|
|
907
|
+
: xScale.range()[0] - this.rem * 0.5;
|
|
908
|
+
})
|
|
909
|
+
.y((datum) => {
|
|
910
|
+
return datum.id === 'min'
|
|
911
|
+
? yScale.range()[0] + this.rem * 4
|
|
912
|
+
: yScale.range()[0] + this.rem * 0.5;
|
|
913
|
+
})
|
|
914
|
+
.z((datum) => { return datum.z; })
|
|
915
|
+
.data(zTicks),
|
|
850
916
|
(datum) => { return datum[0].label; },
|
|
851
917
|
);
|
|
852
918
|
// ENTER
|
|
@@ -908,7 +974,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
908
974
|
points3d
|
|
909
975
|
.x((datum) => { return xScale(datum.a); })
|
|
910
976
|
.y((datum) => { return yScale(datum.g); })
|
|
911
|
-
.z((datum) => { return zScale(datum.l); })
|
|
977
|
+
.z((datum) => { return zScale(datum.l); })
|
|
978
|
+
.data(
|
|
912
979
|
this.point
|
|
913
980
|
? [{
|
|
914
981
|
a: this.a,
|
|
@@ -987,7 +1054,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
987
1054
|
.rows(d3.range(this.range.g.start, this.range.g.stop + 0.01, this.range.g.step).length)
|
|
988
1055
|
.x((datum) => { return xScale(datum.a); })
|
|
989
1056
|
.y((datum) => { return yScale(datum.g); })
|
|
990
|
-
.z((datum) => { return zScale(datum.l); })
|
|
1057
|
+
.z((datum) => { return zScale(datum.l); })
|
|
1058
|
+
.data(this.boundary)
|
|
991
1059
|
.filter((datum) => {
|
|
992
1060
|
return (
|
|
993
1061
|
(datum[0].a >= this.range.a.start && datum[0].a <= this.range.a.stop)
|
|
@@ -1024,7 +1092,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
1024
1092
|
.rows(d3.range(this.range.g.start, this.range.g.stop + 0.01, this.range.g.step).length)
|
|
1025
1093
|
.x((datum) => { return xScale(datum.a); })
|
|
1026
1094
|
.y((datum) => { return yScale(datum.g); })
|
|
1027
|
-
.z((datum) => { return zScale(datum.l); })
|
|
1095
|
+
.z((datum) => { return zScale(datum.l); })
|
|
1096
|
+
.data(this.mapXY),
|
|
1028
1097
|
);
|
|
1029
1098
|
const mapXZUpdate = svgMerge.selectAll('.map-xz')
|
|
1030
1099
|
.data(
|
|
@@ -1032,7 +1101,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
1032
1101
|
.rows(d3.range(this.range.l.start, this.range.l.stop + 0.01, this.range.l.step).length)
|
|
1033
1102
|
.x((datum) => { return xScale(datum.a); })
|
|
1034
1103
|
.y((datum) => { return yScale(datum.g); })
|
|
1035
|
-
.z((datum) => { return zScale(datum.l); })
|
|
1104
|
+
.z((datum) => { return zScale(datum.l); })
|
|
1105
|
+
.data(this.mapXZ),
|
|
1036
1106
|
);
|
|
1037
1107
|
const mapYZUpdate = svgMerge.selectAll('.map-yz')
|
|
1038
1108
|
.data(
|
|
@@ -1040,7 +1110,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
1040
1110
|
.rows(d3.range(this.range.l.start, this.range.l.stop + 0.01, this.range.l.step).length)
|
|
1041
1111
|
.x((datum) => { return xScale(datum.a); })
|
|
1042
1112
|
.y((datum) => { return yScale(datum.g); })
|
|
1043
|
-
.z((datum) => { return zScale(datum.l); })
|
|
1113
|
+
.z((datum) => { return zScale(datum.l); })
|
|
1114
|
+
.data(this.mapYZ),
|
|
1044
1115
|
);
|
|
1045
1116
|
// ENTER
|
|
1046
1117
|
const mapXYEnter = mapXYUpdate.enter().append('path')
|
|
@@ -1089,7 +1160,7 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
|
|
|
1089
1160
|
mapYZUpdate.exit().remove();
|
|
1090
1161
|
|
|
1091
1162
|
// Depth sorting
|
|
1092
|
-
d3.select(this.renderRoot).selectAll('.d3-3d').sort(
|
|
1163
|
+
d3.select(this.renderRoot).selectAll('.d3-3d').sort(d33d.sort);
|
|
1093
1164
|
|
|
1094
1165
|
// Color Legend
|
|
1095
1166
|
// DATA-JOIN
|
|
@@ -544,7 +544,7 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
544
544
|
};
|
|
545
545
|
const startRotationX = (-0.85 * Math.PI) / 8;
|
|
546
546
|
const startRotationY = (3 * Math.PI) / 8;
|
|
547
|
-
const startRotationZ = 0;
|
|
547
|
+
const startRotationZ = 0.0000001; // Avoid d3-3d bug
|
|
548
548
|
|
|
549
549
|
const lineStrips3D = d33d.lineStrips3D()
|
|
550
550
|
.origin(startOrigin)
|
|
@@ -597,11 +597,11 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
597
597
|
}]);
|
|
598
598
|
// ENTER
|
|
599
599
|
const svgEnter = svgUpdate.enter().append('svg')
|
|
600
|
-
.classed('main', true)
|
|
600
|
+
.classed('main', true)
|
|
601
|
+
.call(svgDrag);
|
|
601
602
|
// MERGE
|
|
602
603
|
const svgMerge = svgEnter.merge(svgUpdate)
|
|
603
|
-
.attr('viewBox', `0 0 ${elementSize} ${elementSize}`)
|
|
604
|
-
.call(svgDrag);
|
|
604
|
+
.attr('viewBox', `0 0 ${elementSize} ${elementSize}`);
|
|
605
605
|
|
|
606
606
|
// Gradient Def
|
|
607
607
|
const gradientEnter = svgEnter.append('defs').append('linearGradient')
|
|
@@ -648,21 +648,24 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
648
648
|
lineStrips3D
|
|
649
649
|
.x((datum) => { return datum.x; })
|
|
650
650
|
.y(() => { return yScale.range()[0]; })
|
|
651
|
-
.z(() => { return zScale.range()[0]; })
|
|
651
|
+
.z(() => { return zScale.range()[0]; })
|
|
652
|
+
.data(xAxis),
|
|
652
653
|
);
|
|
653
654
|
const axisYUpdate = svgMerge.selectAll('.axis-y')
|
|
654
655
|
.data(
|
|
655
656
|
lineStrips3D
|
|
656
657
|
.x(() => { return xScale.range()[0]; })
|
|
657
658
|
.y((datum) => { return datum.y; })
|
|
658
|
-
.z(() => { return zScale.range()[1]; })
|
|
659
|
+
.z(() => { return zScale.range()[1]; })
|
|
660
|
+
.data(yAxis),
|
|
659
661
|
);
|
|
660
662
|
const axisZUpdate = svgMerge.selectAll('.axis-z')
|
|
661
663
|
.data(
|
|
662
664
|
lineStrips3D
|
|
663
665
|
.x(() => { return xScale.range()[0]; })
|
|
664
666
|
.y(() => { return yScale.range()[0]; })
|
|
665
|
-
.z((datum) => { return datum.z; })
|
|
667
|
+
.z((datum) => { return datum.z; })
|
|
668
|
+
.data(zAxis),
|
|
666
669
|
);
|
|
667
670
|
// ENTER
|
|
668
671
|
const axisXEnter = axisXUpdate.enter().append('path')
|
|
@@ -692,7 +695,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
692
695
|
return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
|
|
693
696
|
})
|
|
694
697
|
.y(() => { return yScale.range()[0] + this.rem * 1.75; })
|
|
695
|
-
.z(() => { return zScale.range()[0] + this.rem * 1.75; })
|
|
698
|
+
.z(() => { return zScale.range()[0] + this.rem * 1.75; })
|
|
699
|
+
.data(xAxis),
|
|
696
700
|
);
|
|
697
701
|
const titlePathYUpdate = svgMerge.selectAll('.title-path-y')
|
|
698
702
|
.data(
|
|
@@ -701,7 +705,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
701
705
|
.y((datum) => {
|
|
702
706
|
return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
|
|
703
707
|
})
|
|
704
|
-
.z(() => { return zScale.range()[1] - this.rem * 1.75; })
|
|
708
|
+
.z(() => { return zScale.range()[1] - this.rem * 1.75; })
|
|
709
|
+
.data(yAxis),
|
|
705
710
|
);
|
|
706
711
|
const titlePathZUpdate = svgMerge.selectAll('.title-path-z')
|
|
707
712
|
.data(
|
|
@@ -710,21 +715,40 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
710
715
|
.y(() => { return yScale.range()[0] + this.rem * 1.75; })
|
|
711
716
|
.z((datum) => {
|
|
712
717
|
return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
|
|
713
|
-
})
|
|
718
|
+
})
|
|
719
|
+
.data(zAxis),
|
|
714
720
|
);
|
|
715
721
|
const titleXUpdate = svgMerge.selectAll('.title-x')
|
|
716
722
|
.data(
|
|
717
|
-
|
|
723
|
+
lineStrips3D
|
|
724
|
+
.x((datum) => {
|
|
725
|
+
return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
|
|
726
|
+
})
|
|
727
|
+
.y(() => { return yScale.range()[0] + this.rem * 1.75; })
|
|
728
|
+
.z(() => { return zScale.range()[0] + this.rem * 1.75; })
|
|
729
|
+
.data(xAxis),
|
|
718
730
|
(datum) => { return datum[0].title; },
|
|
719
731
|
);
|
|
720
732
|
const titleYUpdate = svgMerge.selectAll('.title-y')
|
|
721
733
|
.data(
|
|
722
|
-
|
|
734
|
+
lineStrips3D
|
|
735
|
+
.x(() => { return xScale.range()[0] - this.rem * 1.75; })
|
|
736
|
+
.y((datum) => {
|
|
737
|
+
return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
|
|
738
|
+
})
|
|
739
|
+
.z(() => { return zScale.range()[1] - this.rem * 1.75; })
|
|
740
|
+
.data(yAxis),
|
|
723
741
|
(datum) => { return datum[0].title; },
|
|
724
742
|
);
|
|
725
743
|
const titleZUpdate = svgMerge.selectAll('.title-z')
|
|
726
744
|
.data(
|
|
727
|
-
|
|
745
|
+
lineStrips3D
|
|
746
|
+
.x(() => { return xScale.range()[0] - this.rem * 1.75; })
|
|
747
|
+
.y(() => { return yScale.range()[0] + this.rem * 1.75; })
|
|
748
|
+
.z((datum) => {
|
|
749
|
+
return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
|
|
750
|
+
})
|
|
751
|
+
.data(zAxis),
|
|
728
752
|
(datum) => { return datum[0].title; },
|
|
729
753
|
);
|
|
730
754
|
// ENTER
|
|
@@ -811,7 +835,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
811
835
|
})
|
|
812
836
|
.z((datum) => {
|
|
813
837
|
return datum.id === 'min' ? zScale.range()[0] : zScale.range()[0] + this.rem * 0.35;
|
|
814
|
-
})
|
|
838
|
+
})
|
|
839
|
+
.data(xTicks),
|
|
815
840
|
);
|
|
816
841
|
const ticksYUpdate = svgMerge.selectAll('.tick-y')
|
|
817
842
|
.data(
|
|
@@ -822,7 +847,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
822
847
|
.y((datum) => { return datum.y; })
|
|
823
848
|
.z((datum) => {
|
|
824
849
|
return datum.id === 'min' ? zScale.range()[1] : zScale.range()[1] - this.rem * 0.35;
|
|
825
|
-
})
|
|
850
|
+
})
|
|
851
|
+
.data(yTicks),
|
|
826
852
|
);
|
|
827
853
|
const ticksZUpdate = svgMerge.selectAll('.tick-z')
|
|
828
854
|
.data(
|
|
@@ -833,7 +859,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
833
859
|
.y((datum) => {
|
|
834
860
|
return datum.id === 'min' ? yScale.range()[0] : yScale.range()[0] + this.rem * 0.35;
|
|
835
861
|
})
|
|
836
|
-
.z((datum) => { return datum.z; })
|
|
862
|
+
.z((datum) => { return datum.z; })
|
|
863
|
+
.data(zTicks),
|
|
837
864
|
);
|
|
838
865
|
// ENTER
|
|
839
866
|
const ticksXEnter = ticksXUpdate.enter().append('path')
|
|
@@ -869,7 +896,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
869
896
|
return datum.id === 'min'
|
|
870
897
|
? zScale.range()[0] + this.rem * 4
|
|
871
898
|
: zScale.range()[0] + this.rem * 0.5;
|
|
872
|
-
})
|
|
899
|
+
})
|
|
900
|
+
.data(xTicks),
|
|
873
901
|
(datum) => { return datum[0].label; },
|
|
874
902
|
);
|
|
875
903
|
const labelPathsYUpdate = svgMerge.selectAll('.label-path-y')
|
|
@@ -885,7 +913,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
885
913
|
return datum.id === 'min'
|
|
886
914
|
? zScale.range()[1] - this.rem * 0.5
|
|
887
915
|
: zScale.range()[1] - this.rem * 4;
|
|
888
|
-
})
|
|
916
|
+
})
|
|
917
|
+
.data(yTicks),
|
|
889
918
|
(datum) => { return datum[0].label; },
|
|
890
919
|
);
|
|
891
920
|
const labelPathsZUpdate = svgMerge.selectAll('.label-path-z')
|
|
@@ -901,22 +930,59 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
901
930
|
? yScale.range()[0] + this.rem * 4
|
|
902
931
|
: yScale.range()[0] + this.rem * 0.5;
|
|
903
932
|
})
|
|
904
|
-
.z((datum) => { return datum.z; })
|
|
933
|
+
.z((datum) => { return datum.z; })
|
|
934
|
+
.data(zTicks),
|
|
905
935
|
(datum) => { return datum[0].label; },
|
|
906
936
|
);
|
|
907
937
|
const labelsXUpdate = svgMerge.selectAll('.label-x')
|
|
908
938
|
.data(
|
|
909
|
-
|
|
939
|
+
lineStrips3D
|
|
940
|
+
.x((datum) => { return datum.x; })
|
|
941
|
+
.y((datum) => {
|
|
942
|
+
return datum.id === 'min'
|
|
943
|
+
? yScale.range()[0] + this.rem * 4
|
|
944
|
+
: yScale.range()[0] + this.rem * 0.5;
|
|
945
|
+
})
|
|
946
|
+
.z((datum) => {
|
|
947
|
+
return datum.id === 'min'
|
|
948
|
+
? zScale.range()[0] + this.rem * 4
|
|
949
|
+
: zScale.range()[0] + this.rem * 0.5;
|
|
950
|
+
})
|
|
951
|
+
.data(xTicks),
|
|
910
952
|
(datum) => { return datum[0].label; },
|
|
911
953
|
);
|
|
912
954
|
const labelsYUpdate = svgMerge.selectAll('.label-y')
|
|
913
955
|
.data(
|
|
914
|
-
|
|
956
|
+
lineStrips3D
|
|
957
|
+
.x((datum) => {
|
|
958
|
+
return datum.id === 'min'
|
|
959
|
+
? xScale.range()[0] - this.rem * 0.5
|
|
960
|
+
: xScale.range()[0] - this.rem * 4;
|
|
961
|
+
})
|
|
962
|
+
.y((datum) => { return datum.y; })
|
|
963
|
+
.z((datum) => {
|
|
964
|
+
return datum.id === 'min'
|
|
965
|
+
? zScale.range()[1] - this.rem * 0.5
|
|
966
|
+
: zScale.range()[1] - this.rem * 4;
|
|
967
|
+
})
|
|
968
|
+
.data(yTicks),
|
|
915
969
|
(datum) => { return datum[0].label; },
|
|
916
970
|
);
|
|
917
971
|
const labelsZUpdate = svgMerge.selectAll('.label-z')
|
|
918
972
|
.data(
|
|
919
|
-
|
|
973
|
+
lineStrips3D
|
|
974
|
+
.x((datum) => {
|
|
975
|
+
return datum.id === 'min'
|
|
976
|
+
? xScale.range()[0] - this.rem * 4
|
|
977
|
+
: xScale.range()[0] - this.rem * 0.5;
|
|
978
|
+
})
|
|
979
|
+
.y((datum) => {
|
|
980
|
+
return datum.id === 'min'
|
|
981
|
+
? yScale.range()[0] + this.rem * 4
|
|
982
|
+
: yScale.range()[0] + this.rem * 0.5;
|
|
983
|
+
})
|
|
984
|
+
.z((datum) => { return datum.z; })
|
|
985
|
+
.data(zTicks),
|
|
920
986
|
(datum) => { return datum[0].label; },
|
|
921
987
|
);
|
|
922
988
|
// ENTER
|
|
@@ -978,7 +1044,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
978
1044
|
points3d
|
|
979
1045
|
.x((datum) => { return xScale(datum.xs); })
|
|
980
1046
|
.y((datum) => { return yScale(datum.pw); })
|
|
981
|
-
.z((datum) => { return zScale(datum.xw); })
|
|
1047
|
+
.z((datum) => { return zScale(datum.xw); })
|
|
1048
|
+
.data(
|
|
982
1049
|
this.choices.slice(
|
|
983
1050
|
this.point === 'rest' ? 1 : 0,
|
|
984
1051
|
this.point === 'first' ? 1 : undefined,
|
|
@@ -1056,7 +1123,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
1056
1123
|
)
|
|
1057
1124
|
.x((datum) => { return xScale(datum.xs); })
|
|
1058
1125
|
.y((datum) => { return yScale(datum.pw); })
|
|
1059
|
-
.z((datum) => { return zScale(datum.xw); })
|
|
1126
|
+
.z((datum) => { return zScale(datum.xw); })
|
|
1127
|
+
.data(this.boundary)
|
|
1060
1128
|
.filter((datum) => {
|
|
1061
1129
|
return (
|
|
1062
1130
|
(datum[0].pw >= this.range.pw.start && datum[0].pw <= this.range.pw.stop)
|
|
@@ -1093,7 +1161,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
1093
1161
|
.rows(d3.range(this.range.pw.start, this.range.pw.stop + 0.01, this.range.pw.step).length)
|
|
1094
1162
|
.x((datum) => { return xScale(datum.xs); })
|
|
1095
1163
|
.y((datum) => { return yScale(datum.pw); })
|
|
1096
|
-
.z((datum) => { return zScale(datum.xw); })
|
|
1164
|
+
.z((datum) => { return zScale(datum.xw); })
|
|
1165
|
+
.data(this.mapXY),
|
|
1097
1166
|
);
|
|
1098
1167
|
const mapXZUpdate = svgMerge.selectAll('.map-xz')
|
|
1099
1168
|
.data(
|
|
@@ -1101,7 +1170,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
1101
1170
|
.rows(d3.range(this.range.xw.start, this.range.xw.stop + 0.01, this.range.xw.step).length)
|
|
1102
1171
|
.x((datum) => { return xScale(datum.xs); })
|
|
1103
1172
|
.y((datum) => { return yScale(datum.pw); })
|
|
1104
|
-
.z((datum) => { return zScale(datum.xw); })
|
|
1173
|
+
.z((datum) => { return zScale(datum.xw); })
|
|
1174
|
+
.data(this.mapXZ),
|
|
1105
1175
|
);
|
|
1106
1176
|
const mapYZUpdate = svgMerge.selectAll('.map-yz')
|
|
1107
1177
|
.data(
|
|
@@ -1109,7 +1179,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
1109
1179
|
.rows(d3.range(this.range.xw.start, this.range.xw.stop + 0.01, this.range.xw.step).length)
|
|
1110
1180
|
.x((datum) => { return xScale(datum.xs); })
|
|
1111
1181
|
.y((datum) => { return yScale(datum.pw); })
|
|
1112
|
-
.z((datum) => { return zScale(datum.xw); })
|
|
1182
|
+
.z((datum) => { return zScale(datum.xw); })
|
|
1183
|
+
.data(this.mapYZ),
|
|
1113
1184
|
);
|
|
1114
1185
|
// ENTER
|
|
1115
1186
|
const mapXYEnter = mapXYUpdate.enter().append('path')
|
|
@@ -1158,7 +1229,7 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
|
|
|
1158
1229
|
mapYZUpdate.exit().remove();
|
|
1159
1230
|
|
|
1160
1231
|
// Depth sorting
|
|
1161
|
-
d3.select(this.renderRoot).selectAll('.d3-3d').sort(
|
|
1232
|
+
d3.select(this.renderRoot).selectAll('.d3-3d').sort(d33d.sort);
|
|
1162
1233
|
|
|
1163
1234
|
// Color Legend
|
|
1164
1235
|
// DATA-JOIN
|