Skip to content

Commit b501da5

Browse files
ZipexpoZipexpo
committed
update
1 parent 09b6b7a commit b501da5

File tree

5 files changed

+31
-20
lines changed

5 files changed

+31
-20
lines changed

‎miniChalenge2_2020_ViolinMatrix/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@
3434
</ul>
3535
</form>
3636
</nav>
37-
<div class="container" style="margin-top: 56px">
38-
<div class="row" id="violinMatrixHolder" style="position: relative;height: calc(100vh - 96px);width: 100%; margin: 0px">
37+
<!-- <div class="container" style="margin-top: 56px">-->
38+
<div class="row" id="violinMatrixHolder" style="position: relative;height: calc(100vh - 96px);width: 100%; margin: 0px;margin-top: 56px">
3939
<svg id="violinMatrix_svg">
4040

4141
</svg>
4242
</div>
43-
</div>
43+
<!-- </div>-->
4444

4545
<!--JavaScript at end of body for optimized loading-->
4646
<link id="theme" rel="stylesheet" href="src/style/bootstrap.min.css">

‎miniChalenge2_2020_ViolinMatrix/src/js/main.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,21 @@ function handleDate(data){
2828
let maxSum = 0
2929
let nestByLabel = d3.nest().key(d=>d['Label']).rollup(d=>{
3030
d.summary = hist(d.map(e=>e.Score),range,d[0].Label);
31-
d.summary.data={Person: 'Total', Label : d[0].Label,q1:d.summary.q1,median:d.summary.median};
31+
d.summary.data={Person: 'Total', Label : d[0].Label,q1:d.summary.q1,
32+
median:d.summary.median,mean:d.summary.mean};
3233
d.summary.q1=undefined;
3334
// d.summary.median=undefined;
3435
let maxValue = d3.max(d.summary.arr,e=>e[1]);
3536
if(maxValue>maxSum)
3637
maxSum = maxValue;
3738
return d;
3839
}).entries(data);
39-
nestByLabel.sort((a,b)=>a.value.summary.data.median-b.value.summary.data.median)
40+
nestByLabel.sort((a,b)=>a.value.summary.data.mean-b.value.summary.data.mean)
4041
nestByLabel.domain = [0,maxSum];
4142
let nestByPerson = d3.nest().key(d=>d['Person']).rollup(d=>{
4243
d.summary = hist(d.map(e=>e.Score),range,d[0].Label);
43-
d.summary.data={Person: d[0].Person, Label : 'Total',q1:d.summary.q1,median:d.summary.median};
44+
d.summary.data={Person: d[0].Person, Label : 'Total',q1:d.summary.q1,
45+
median:d.summary.median,mean:d.summary.mean};
4446
d.summary.q1=undefined;
4547
// d.summary.median=undefined;
4648
let maxValue = d3.max(d.summary.arr,e=>e[1]);
@@ -49,6 +51,7 @@ function handleDate(data){
4951
return d;
5052
}).entries(data);
5153
nestByPerson.domain = [0,maxSum];
54+
nestByPerson.sort((a,b)=>a.value.summary.data.mean-b.value.summary.data.mean)
5255
let summary = {y:{domain:[0,maxDist/2]},x:{domain:range}};
5356
return {nestData,nestByLabel,nestByPerson,summary};
5457
}
@@ -61,7 +64,7 @@ function hist(d,range,key) {
6164
.domain(range);
6265
var histogram = d3.histogram()
6366
.domain(x.domain())
64-
.thresholds(x.ticks(20)) // Important: how many bins approx are going to be made? It is the 'resolution' of the violin plot
67+
.thresholds(x.ticks(10)) // Important: how many bins approx are going to be made? It is the 'resolution' of the violin plot
6568
.value(d => d);
6669
let hisdata = histogram(d);
6770

@@ -71,6 +74,7 @@ function hist(d,range,key) {
7174
q1: ss.quantileSorted(d,0.25) ,
7275
q3: ss.quantileSorted(d,0.75),
7376
median: ss.medianSorted(d) ,
77+
mean: ss.mean(d) ,
7478
// outlier: ,
7579
arr: sumstat};
7680
r.outlier = []
@@ -87,6 +91,7 @@ function hist(d,range,key) {
8791
q1: undefined ,
8892
q3: undefined,
8993
median: undefined ,
94+
mean: undefined ,
9095
outlier: [],
9196
arr: []};
9297
}
@@ -145,7 +150,7 @@ function update({nestData,nestByLabel,nestByPerson,summary}){
145150
customrange:summary.x.domain,
146151
opt:{dataformated:true},
147152
tick:{visibile:false}});
148-
violiin_chart.rangeY(summary.y.domain);
153+
violiin_chart.rangeY(summary.y.domain).distributionScale('Sqrt');
149154

150155
let data = _.flatten(nestData.map(d=>d.values.map(d=>d.value.summary)));
151156
nestByPerson.forEach(n=>data.push(n.value.summary));
@@ -177,7 +182,7 @@ function update({nestData,nestByLabel,nestByPerson,summary}){
177182
if (axis.empty()){
178183
axis = svg_.append('g')
179184
.attr('class','axis')
180-
.attr('transform',`translate(${graphicopt.margin.left},${graphicopt.margin.top})`);
185+
// .attr('transform',`translate(${graphicopt.margin.left},${graphicopt.margin.top})`);
181186
axis.append('g')
182187
.attr('class','Xaxis')
183188
.attr('transform',`translate(0,${graphicopt.heightG()})`);;
@@ -189,18 +194,18 @@ function update({nestData,nestByLabel,nestByPerson,summary}){
189194
var yAxis = d3.axisLeft(y);
190195
gX = axis.select('g.Xaxis');
191196
gX.call(d3.axisBottom(x));
192-
gY = axis.select('g.Yaxis');
197+
gY = axis.select('g.Yaxis').attr('transform',`translate(${graphicopt.margin.left},0)`);
193198
gY.call(d3.axisLeft(y));
194199
if (isfirst)
195200
svg.call(graphicopt.zoom.transform, d3.zoomIdentity);
196201
function zoomed(){
197-
// svg.attr("transform", d3.event.transform);
198-
202+
svg.attr("transform", d3.event.transform);
203+
199204
x.range([0, graphicopt.widthG()].map(d => d3.event.transform.applyX(d)));
200205
y.range([graphicopt.heightG(),0].map(d => d3.event.transform.applyY(d)));
201-
person_g
202-
.attr('transform',d=>`translate(${x(d.data.Person)},${y(d.data.Label)})`)
203-
206+
// person_g
207+
// .attr('transform',d=>`translate(${x(d.data.Person)},${y(d.data.Label)})`)
208+
//
204209
gX.call(xAxis);
205210
gY.call(yAxis);
206211
}

‎miniChalenge2_2020_ViolinMatrix/src/js/setting.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const filepath = 'data';
22

33
let graphicopt = {
4-
margin: {top: 0, right: 0, bottom: 0, left: 0},
4+
margin: {top: 0, right: 50, bottom: 20, left: 100},
55
width: window.innerWidth,
66
height: window.innerHeight,
77
scalezoom: 1,

‎miniChalenge2_2020_ViolinMatrix/src/js/violinChart.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ d3.viiolinChart = function () {
4949
.x1(function(d){ return(xNum(d[1])) } )
5050
.y(function(d){ return(h(d[0])) } )
5151
// .curve(d3.curveLinear)
52-
.curve(d3.curveCardinal.tension(0.3))
52+
.curve(d3.curveCardinal.tension(0.5))
5353
;
5454
let circleoption = function (d){
5555
return {
@@ -125,15 +125,16 @@ d3.viiolinChart = function () {
125125
y: -2,
126126
}).style('fill','black')
127127

128-
let median_rect = viol_chart.selectAll('rect.median').data(d=>d.median!=undefined?[d.median]:[]);
128+
// let median_rect = viol_chart.selectAll('rect.median').data(d=>d.median!=undefined?[d.median]:[]);
129+
let median_rect = viol_chart.selectAll('rect.median').data(d=>d.mean!=undefined?[d.mean]:[]);
129130
median_rect.exit().remove();
130131
median_rect.enter().append('rect').attrs({
131132
class: 'median',
132133
width:1,
133134
height: 6,
134135
x: d=>h(d),
135136
y: -3,
136-
}).style('fill','red')
137+
}).style('fill','black')
137138

138139
const circledata = arr[0].outlier.map(d=>{return d.x?d:{x:d}});
139140

@@ -300,6 +301,11 @@ d3.viiolinChart = function () {
300301

301302
};
302303

304+
viiolinplot.distributionScale = function (_) {
305+
return arguments.length ? (xNum = d3[`scale${_}`]().range(xNum.range()).domain(xNum.domain()), viiolinplot) : kernel;
306+
307+
};
308+
303309
viiolinplot.graphicopt = function (_) {//Put all of the options into a variable called graphicopt
304310
if (arguments.length) {
305311
for (let i in _) {

‎miniChalenge2_2020_ViolinMatrix/src/style/graph.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.violin .violin path {
2-
fill: rgba(0, 0, 0, 0.65)!important;
2+
fill: rgba(102, 0, 0, 0.5)!important;
33
}
44
.violin.total .violin path{
55
fill: steelblue !important;

0 commit comments

Comments
 (0)