Skip to content

Commit

Permalink
Applied cohort finder results, and other minor code upgrades
Browse files Browse the repository at this point in the history
  • Loading branch information
Ren Zuo committed Dec 14, 2020
1 parent a650fd4 commit 9c6d5a0
Show file tree
Hide file tree
Showing 3 changed files with 329 additions and 131 deletions.
84 changes: 64 additions & 20 deletions UserInterface/scripts/bar_chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ function init_bar_canvas () {
.attr("width", $CHART.width())
.attr("height", $CHART.height())
.append("g")
.attr("transform", "translate(" + CHART_MARGIN.left + "," + CHART_MARGIN.top + ")");
.attr(
"transform",
"translate(" + CHART_MARGIN.left + "," + CHART_MARGIN.top + ")"
);
}


Expand All @@ -18,6 +21,7 @@ function init_bar_chart (dataset) {
var data = ORIGINAL_DATASET.map(function (d) {
return {
case_name: d["filename"],
groupid: d["groupid"],
attr_value: d[CURRENT_CHART_ATTRIBUTE]
};
});
Expand Down Expand Up @@ -47,9 +51,11 @@ function init_bar_chart (dataset) {
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return "<span style='color:#f94; font-size:10px'>" + d.case_name + "</span>" +
"</br>" +
"<span style='font-weight:100; font-size:10px'>" + d.attr_value.toFixed(5) + "</span>";
return "<span style='color:#f94; font-size:10px'>" +
d.case_name + "</span>" +
"</br>" +
"<span style='font-weight:100; font-size:10px'>" +
d.attr_value.toFixed(5) + "</span>";
});

svg.call(TIP);
Expand Down Expand Up @@ -86,10 +92,16 @@ function init_bar_chart (dataset) {
.data(data)
.enter().append("rect")
.attr("class", "background-bar")
.attr("x", function (d) { return xScale(d.case_name); })
.attr("x", function (d) {
return xScale(d.case_name);
})
.attr("width", Math.max(xScale.rangeBand() - 1, 1))
.attr("y", function (d) { return yScale(d.attr_value); })
.attr("height", function (d) { return chart_height - yScale(d.attr_value); });
.attr("y", function (d) {
return yScale(d.attr_value);
})
.attr("height", function (d) {
return chart_height - yScale(d.attr_value);
});

// Add blue foreground bar for focus.
foreground = svg.append("g")
Expand All @@ -105,16 +117,22 @@ function init_bar_chart (dataset) {
}
})
.style("display", function (d) {
if (selected_cases.length == 0 || selected_cases.indexOf(d.case_name) != -1) {
if (selected_cases.indexOf(d.case_name) != -1) {
return null;
} else {
return "none";
}
})
.attr("x", function (d) { return xScale(d.case_name); })
.attr("x", function (d) {
return xScale(d.case_name);
})
.attr("width", Math.max(xScale.rangeBand() - 1, 1))
.attr("y", function (d) { return yScale(d.attr_value); })
.attr("height", function (d) { return chart_height - yScale(d.attr_value); })
.attr("y", function (d) {
return yScale(d.attr_value);
})
.attr("height", function (d) {
return chart_height - yScale(d.attr_value);
})
.on('mouseover', TIP.show)
.on('mouseout', TIP.hide)
.on('click', function (d) {
Expand Down Expand Up @@ -146,6 +164,7 @@ function update_bar_chart (dataset) {
var data = ORIGINAL_DATASET.map(function (d) {
return {
case_name: d["filename"],
groupid: d["groupid"],
attr_value: d[CURRENT_CHART_ATTRIBUTE]
};
});
Expand Down Expand Up @@ -201,18 +220,26 @@ function update_bar_chart (dataset) {
.call(yAxis);

// update bars
var background_bars = CHART_SVG.select("g.background-bar-group").selectAll("rect").data(data);
var background_bars = CHART_SVG.select("g.background-bar-group")
.selectAll("rect").data(data);
background_bars.exit().remove();
background_bars.enter().append("rect");
background_bars.transition()
.duration(500)
.attr("class", "background-bar")
.attr("x", function (d) { return xScale(d.case_name); })
.attr("x", function (d) {
return xScale(d.case_name);
})
.attr("width", Math.max(xScale.rangeBand() - 1, 1))
.attr("y", function (d) { return yScale(d.attr_value); })
.attr("height", function (d) { return chart_height - yScale(d.attr_value); });
.attr("y", function (d) {
return yScale(d.attr_value);
})
.attr("height", function (d) {
return chart_height - yScale(d.attr_value);
});

var foreground_bars = CHART_SVG.select("g.foreground-bar-group").selectAll("rect").data(data);
var foreground_bars = CHART_SVG.select("g.foreground-bar-group").
selectAll("rect").data(data);
foreground_bars.exit().remove();
foreground_bars.enter().append("rect")
.on('mouseover', TIP.show)
Expand All @@ -234,16 +261,33 @@ function update_bar_chart (dataset) {
}
})
.style("display", function (d) {
if (selected_cases.length == 0 || selected_cases.indexOf(d.case_name) != -1) {
if (selected_cases.indexOf(d.case_name) != -1) {
return null;
} else {
return "none";
}
})
.attr("x", function (d) { return xScale(d.case_name); })
.style("fill", function (d) {
if (CURRENT_SELECTED === d.case_name) {
return "orangered";
} else {
if (d["groupid"] === -1) {
return FOREGROUND_COLOR;
} else {
return COLOR_PLATE[d["groupid"]];
}
}
})
.attr("x", function (d) {
return xScale(d.case_name);
})
.attr("width", Math.max(xScale.rangeBand() - 1, 1))
.attr("y", function (d) { return yScale(d.attr_value); })
.attr("height", function (d) { return chart_height - yScale(d.attr_value); });
.attr("y", function (d) {
return yScale(d.attr_value);
})
.attr("height", function (d) {
return chart_height - yScale(d.attr_value);
});
}


Expand Down
139 changes: 87 additions & 52 deletions UserInterface/scripts/parallel_chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ function init_parallel_canvas () {
.attr("width", $PARAC.width())
.attr("height", $PARAC.height())
.append("g")
.attr("transform", "translate(" + PARAC_MARGIN.left + "," + PARAC_MARGIN.top + ")");
.attr("transform",
"translate(" + PARAC_MARGIN.left + "," + PARAC_MARGIN.top + ")"
);
}


Expand Down Expand Up @@ -34,18 +36,24 @@ function init_parallel_coordinate (dataset) {
foreground;

var data = ORIGINAL_DATASET.map(function (d) {
attr_value_dict = {case_name: d["filename"]};
attr_value_dict = {
case_name: d["filename"],
gid: d["groupid"]
};
for (var i = 0; i < CURRENT_PARALLEL_ATTRIBUTES.length; i++) {
attr_value_dict[CURRENT_PARALLEL_ATTRIBUTES[i]] = d[CURRENT_PARALLEL_ATTRIBUTES[i]];
attr_value_dict[CURRENT_PARALLEL_ATTRIBUTES[i]] =
d[CURRENT_PARALLEL_ATTRIBUTES[i]];
}
return attr_value_dict;
});
var selected_cases = dataset.map(function (d) {return d["filename"];});

xScale.domain(dimensions = d3.keys(data[0]).filter(function (d) {
return d != "case_name" && (yScale[d] = d3.scale.linear()
.domain(d3.extent(data, function (p) { return p[d]; }))
.range([parac_height, 0]));
return d != "case_name" && d != "gid" && (
yScale[d] = d3.scale.linear()
.domain(d3.extent(data, function (p) { return p[d]; }))
.range([parac_height, 0])
);
}));

// Add grey background lines for context.
Expand All @@ -64,58 +72,73 @@ function init_parallel_coordinate (dataset) {
.data(data)
.enter().append("path")
.attr("class", function (d) {
if (CURRENT_SELECTED == d.case_name) {
if (CURRENT_SELECTED === d.case_name) {
return "selected-foreground-path";
} else {
return "foreground-path";
}
})
.style("display", function (d) {
if (selected_cases.length == 0 || selected_cases.indexOf(d.case_name) != -1) {
if (selected_cases.indexOf(d.case_name) != -1) {
return null;
} else {
return "none";
}
})
.style("stroke", function (d) {
if (CURRENT_SELECTED === d.case_name) {
return "orangered";
} else {
if (d["gid"] === -1) {
return FOREGROUND_COLOR;
} else {
return COLOR_PLATE[d["gid"]];
}
}
})
.attr("d", path);

// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function (d) { return "translate(" + xScale(d) + ")"; })
.call(d3.behavior.drag()
.origin(function (d) { return {x: xScale(d)}; })
.on("dragstart", function (d) {
dragging[d] = xScale(d);
background.attr("visibility", "hidden");
// foreground.attr("visibility", "hidden");
})
.on("drag", function (d) {
dragging[d] = Math.min(parac_width, Math.max(0, d3.event.x));
foreground.attr("d", path);
dimensions.sort(function (a, b) { return position(a) - position(b); });
xScale.domain(dimensions);
g.attr("transform", function (d) { return "translate(" + position(d) + ")"; })
})
.on("dragend", function (d) {
delete dragging[d];
transition(d3.select(this)).attr("transform", "translate(" + xScale(d) + ")");
transition(foreground).attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
// foreground
// .attr("d", path)
// .transition()
// .delay(500)
// .duration(0)
// .attr("visibility", null);
}));
.attr("transform", function (d) {
return "translate(" + xScale(d) + ")";
})
.call(
d3.behavior.drag()
.origin(function (d) { return {x: xScale(d)}; })
.on("dragstart", function (d) {
dragging[d] = xScale(d);
background.attr("visibility", "hidden");
// foreground.attr("visibility", "hidden");
})
.on("drag", function (d) {
dragging[d] = Math.min(parac_width, Math.max(0,d3.event.x));
foreground.attr("d", path);
dimensions.sort(function (a, b) {
return position(a) - position(b);
});
xScale.domain(dimensions);
g.attr("transform", function (d) {
return "translate(" + position(d) + ")";
});
})
.on("dragend", function (d) {
delete dragging[d];
transition(d3.select(this))
.attr("transform", "translate(" + xScale(d) + ")");
transition(foreground)
.attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
})
);

// Add an axis and title.
g.append("g")
Expand All @@ -134,16 +157,18 @@ function init_parallel_coordinate (dataset) {
g.append("g")
.attr("class", "brush")
.each(function (d) {
d3.select(this).call(yScale[d].brush = d3.svg.brush().y(yScale[d])
.on("brushstart", brushstart)
.on("brush", brush)
.on("brushend", brushend));
d3.select(this).call(
yScale[d].brush = d3.svg.brush().y(yScale[d])
.on("brushstart", brushstart)
.on("brush", brush)
.on("brushend", brushend));
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);

// functions for parallel coordinate, ref: https://bl.ocks.org/jasondavies/1341281
// functions for parallel coordinate,
// ref: https://bl.ocks.org/jasondavies/1341281
function position(d) {
var v = dragging[d];
return v == null ? xScale(d) : v;
Expand All @@ -155,7 +180,9 @@ function init_parallel_coordinate (dataset) {

// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function (p) { return [position(p), yScale[p](d[p])]; }));
return line(dimensions.map(function (p) {
return [position(p), yScale[p](d[p])];
}));
}

function brushstart() {
Expand All @@ -164,8 +191,12 @@ function init_parallel_coordinate (dataset) {

// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = dimensions.filter(function (p) { return !yScale[p].brush.empty(); }),
extents = actives.map(function (p) { return yScale[p].brush.extent(); });
var actives = dimensions.filter(function (p) {
return !yScale[p].brush.empty();
});
var extents = actives.map(function (p) {
return yScale[p].brush.extent();
});
foreground.style("display", function (d) {
return actives.every(function (p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
Expand All @@ -174,8 +205,12 @@ function init_parallel_coordinate (dataset) {
}

function brushend() {
var actives = dimensions.filter(function (p) { return !yScale[p].brush.empty(); }),
extents = actives.map(function (p) { return yScale[p].brush.extent(); });
var actives = dimensions.filter(function (p) {
return !yScale[p].brush.empty();
});
var extents = actives.map(function (p) {
return yScale[p].brush.extent();
});

PARA_COOR_SELECTED = [];
ORIGINAL_DATASET.forEach(function (d) {
Expand Down Expand Up @@ -208,7 +243,7 @@ function update_parallel_coordinate (dataset) {
}

// update currently selected numeric attributes
init_parallel_coordinate (dataset);
init_parallel_coordinate(dataset);
}


Expand Down Expand Up @@ -238,7 +273,7 @@ function init_parallel_vars_selector() {

function generate_option_html (key, value, selected = false) {
if (selected) {
return "<option value='" + value + "' selected>" + key + "</option>";
return "<option value='" + value + "' selected>" + key +"</option>";
} else {
return "<option value='" + value + "'>" + key + "</option>";
}
Expand Down
Loading

0 comments on commit 9c6d5a0

Please sign in to comment.