Skip to content

Commit

Permalink
Basic legend functionality implemented.
Browse files Browse the repository at this point in the history
  • Loading branch information
@maciejkorzepa
maciejkorzepa committed May 10, 2016
1 parent 3fc53fc commit 437a346
Show file tree
Hide file tree
Showing 5 changed files with 359 additions and 134 deletions.
2 changes: 1 addition & 1 deletion examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@
</head>
<body ng-controller="AppController" layout="column" ng-cloak flex>

<lineage-plot value="treeData2" selected-nodes="selectedNodes"></lineage-plot>
<line-plot value="timeData"></line-plot>
<lineage-scatter-plot value="treeData" external-selection="selectedNodes" flex></lineage-scatter-plot>
<radial-lineage-plot value="radialPlotData"></radial-lineage-plot>
<radial-phylogenetic-tree value="phyloData" branchlength="showBranchLengths"></radial-phylogenetic-tree>
<lineage-plot value="treeData2" selected-nodes="selectedNodes"></lineage-plot>
<box-plot value="boxPlotData" selected="selectedNodes"></box-plot>
<violin-plot value="violinPlotData" selected="selectedNodes"></violin-plot>

Expand Down
30 changes: 23 additions & 7 deletions examples/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function createTreeLayout(nodesArray) {
parent: node.parent,
generation: node.generation,
children: [],
treeId: node.treeId
series: node.series
};
}

Expand Down Expand Up @@ -90,7 +90,7 @@ function createRandomBoxPlotData(nodes) {
let boxPlotData = [];
for (let node of nodes) {
let values = generateRandomValues(20);
boxPlotData.push({name: node.name, values: values, seriesName: "series " + node.treeId})
boxPlotData.push({name: node.name, values: values, seriesName: "series " + node.series})
}
return boxPlotData;
}
Expand Down Expand Up @@ -137,7 +137,7 @@ function createRandomLineageScatterPlotData(n) {
x: gen-1,
y: gen + j,
parent: parent,
treeId: i == 0 ? j : nodes.filter((d) => d.name == parent)[0].treeId
series: Math.floor(Math.random() * 20)//i == 0 ? j : nodes.filter((d) => d.name == parent)[0].series
};
_parents.push(node.name);
nodes.push(node);
Expand Down Expand Up @@ -224,7 +224,7 @@ function createRandomLineageScatterPlotData2(totalNodes, n) {
y: s * 10 + gen + j,
z: Math.random() > 0.7 ? undefined : Math.random() * 10,
parent: parent,
treeId: s,
series: 231 * Math.floor(Math.random() * 30),
type: Math.random() > 0.5 ? "type1" : "type2"
};
_parents.push(node.name);
Expand Down Expand Up @@ -291,7 +291,8 @@ let data2 = {
}
},
axis: {
gridOnly: true,
show: true,
//gridOnly: true,
valueProperty: "default"
},
labelCollisionDetection: {
Expand All @@ -302,7 +303,22 @@ let data2 = {
enabled: true
},
heatmap: {
enabled: true
enabled: true,
colourBar: {
show: true
}
},
legend: {
show: true,
position: {
"x": "right",
"y": "center"
},
anchor: {
"x": "outside",
"y": "inside"
},
orientation: "vertical"
}
}
};
Expand Down Expand Up @@ -375,7 +391,7 @@ for (let s = 0; s < data4.series.length; s++) {
}
}

let phylo = JSON.parse('{"data":[{"taxon":null,"length":null,"children":[{"taxon":null,"length":1.375,"children":[{"taxon":{"name":"H1","z":1,"parent":null,"treeId":0,"type":"pool"},"length":1,"children":[]},{"taxon":null,"length":0,"children":[{"taxon":{"name":"H2","parent":null,"z":2,"treeId":0,"type":"pool"},"length":1,"children":[]},{"taxon":null,"length":0,"children":[{"taxon":{"name":"H3","z":null,"parent":null,"treeId":0,"type":"pool"},"length":1,"children":[]},{"taxon":null,"length":1,"children":[{"taxon":{"name":"H4","parent":null,"z":4,"treeId":0,"type":"pool"},"length":0,"children":[]},{"taxon":{"name":"H55","parent":null,"z":3.2,"treeId":0,"type":"pool"},"length":0,"children":[]}]}]}]}]},{"taxon":null,"length":1.375,"children":[{"taxon":null,"length":2.75,"children":[{"taxon":null,"length":0.5833333333333334,"children":[{"taxon":{"name":"H5","treeId":0,"z":0,"type":"pool"},"length":0.2857142857142857,"children":[]},{"taxon":{"name":"H6","z":null,"parent":null,"treeId":0,"type":"pool"},"length":1.7142857142857144,"children":[]}]},{"taxon":{"name":"H8","z":null,"parent":null,"treeId":0,"type":"pool"},"length":0.41666666666666663,"children":[]}]},{"taxon":{"name":"H7","z":null,"parent":null,"treeId":0,"type":"pool"},"length":0.25,"children":[]}]}]}],"layout":{"nodeTypes":{"strain":{"r":4,"strokeWidth":3},"pool":{"r":6,"strokeWidth":1}},"groupSelection":{"enabled":true,"selectionRectangle":{"stroke-width":1,"stroke-dasharray":4,"rx":3,"ry":3,"stroke":"steelblue"}},"labelCollisionDetection":{"enabled":"onDelay","updateDelay":500},"showLeafNodes":true,"maxZoom":50,"title":"","size":600,"axis":{"title":"","show":true,"gridOnly":false,"valueProperty":"default"},"nodeLabel":{"font-size":12},"heatmap":{"enabled":true,"colourScale":[[0,"#008ae5"],[1,"yellow"]],"colourBar":{"show":true,"height":"70%","width":30},"circle":{"r":16},"opacity":0.4}}}');
let phylo = JSON.parse('{"data":[{"taxon":null,"length":null,"children":[{"taxon":null,"length":1.375,"children":[{"taxon":{"name":"H1","z":1,"parent":null,"series":0,"type":"pool"},"length":1,"children":[]},{"taxon":null,"length":0,"children":[{"taxon":{"name":"H2","parent":null,"z":2,"series":0,"type":"pool"},"length":1,"children":[]},{"taxon":null,"length":0,"children":[{"taxon":{"name":"H3","z":null,"parent":null,"series":0,"type":"pool"},"length":1,"children":[]},{"taxon":null,"length":1,"children":[{"taxon":{"name":"H4","parent":null,"z":4,"series":0,"type":"pool"},"length":0,"children":[]},{"taxon":{"name":"H55","parent":null,"z":3.2,"series":0,"type":"pool"},"length":0,"children":[]}]}]}]}]},{"taxon":null,"length":1.375,"children":[{"taxon":null,"length":2.75,"children":[{"taxon":null,"length":0.5833333333333334,"children":[{"taxon":{"name":"H5","series":0,"z":0,"type":"pool"},"length":0.2857142857142857,"children":[]},{"taxon":{"name":"H6","z":null,"parent":null,"series":0,"type":"pool"},"length":1.7142857142857144,"children":[]}]},{"taxon":{"name":"H8","z":null,"parent":null,"series":0,"type":"pool"},"length":0.41666666666666663,"children":[]}]},{"taxon":{"name":"H7","z":null,"parent":null,"series":0,"type":"pool"},"length":0.25,"children":[]}]}]}],"layout":{"nodeTypes":{"strain":{"r":4,"strokeWidth":3},"pool":{"r":6,"strokeWidth":1}},"groupSelection":{"enabled":true,"selectionRectangle":{"stroke-width":1,"stroke-dasharray":4,"rx":3,"ry":3,"stroke":"steelblue"}},"labelCollisionDetection":{"enabled":"onDelay","updateDelay":500},"showLeafNodes":true,"maxZoom":50,"title":"","size":600,"axis":{"title":"","show":true,"gridOnly":false,"valueProperty":"default"},"nodeLabel":{"font-size":12},"heatmap":{"enabled":true,"colourScale":[[0,"#008ae5"],[1,"yellow"]],"colourBar":{"show":true,"height":"70%","width":30},"circle":{"r":16},"opacity":0.4}}}');
phylo.data.push(JSON.parse(JSON.stringify(phylo.data[0])));

class AppController {
Expand Down
48 changes: 26 additions & 22 deletions lib/line-plot/line-plot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function LinePlotDirective($window, WindowResize) {
chart = null,
chartClipArea = null,
line = null,
visibleSeries = {},
visibleSeries = new Set(),
transitionDuration = 300;

let svg = d3.select(element[0])
Expand All @@ -59,7 +59,7 @@ function LinePlotDirective($window, WindowResize) {

function update(data) {

data = data.filter(d => visibleSeries[d.name]);
data = data.filter(d => visibleSeries.has(d.name));

let [xExtent, yExtent] = calculateExtents(data),
voronoiData = [];
Expand Down Expand Up @@ -217,7 +217,7 @@ function LinePlotDirective($window, WindowResize) {
seriesNames = data.map(d => d.name);

for(let name of seriesNames) {
visibleSeries[name] = true;
visibleSeries.add(name);
}

data = data.map(d => {
Expand Down Expand Up @@ -357,22 +357,23 @@ function LinePlotDirective($window, WindowResize) {

update(data);

let drawLegend = d3legend()
.splitAfter(0)
.seriesNames(seriesNames)
.colourScale(colours)
.anchorHorizontal("right")
.anchorVertical("bottom")
.onMouseOver(legendMouseOver)
.onMouseOut(legendMouseOut)
.onClick(legendClick)
.selectedItems(visibleSeries);


let legend = chart.append("g")
.attr("class", "plotify-legend")
.attr("transform", `translate(${width},${0})`)
.call(drawLegend);
//let drawLegend = d3legend()
// .splitAfter(0)
// .seriesNames(seriesNames)
// .colourScale(colours)
// .anchorHorizontal("right")
// .anchorVertical("bottom")
// .maxSize({width, height})
// .onMouseOver(legendMouseOver)
// .onMouseOut(legendMouseOut)
// .onClick(legendClick)
// .selectedItems(visibleSeries);
//
//
//let legend = chart.append("g")
// .attr("class", "plotify-legend")
// .attr("transform", `translate(${width},${0})`)
// .call(drawLegend);

function legendMouseOver(label) {
let focusItem = d3.select(this);
Expand All @@ -397,9 +398,12 @@ function LinePlotDirective($window, WindowResize) {

function legendClick(label) {
let clicked = d3.select(this);
visibleSeries[label] = !visibleSeries[label];
clicked.classed("legend-item-selected", visibleSeries[label]);
clicked.select("rect.shape").attr("fill", visibleSeries[label] ? colours(label) : "white");
if (visibleSeries.has(label))
visibleSeries.delete(label);
else
visibleSeries.add(label);
clicked.classed("legend-item-selected", visibleSeries.has(label));
clicked.select("rect.shape").attr("fill", visibleSeries.has(label) ? colours(label) : "white");
update(data);
}

Expand Down
Loading

0 comments on commit 437a346

Please sign in to comment.