Feature/dendrogram plot

README.md

@@ -51,6 +51,7 @@ yarn run docs
 - GenomeTrackPlot
 - TrackPlot :white_check_mark:
 - MultiTrackPlot
+- DendrogramPlot :white_check_mark:
 - BoxPlot :white_check_mark:
 - MultiBoxPlot :white_check_mark:
 - ViolinPlot
@@ -59,7 +60,6 @@ yarn run docs
 ### Axis Components
 - Axis :white_check_mark:
 - GenomeAxis :white_check_mark:
-- DendrogramAxis
 
 
 ### Other Components

documentation.yml

@@ -7,6 +7,7 @@ toc:
  - MultiBoxPlot
  - TrackPlot
  - GenomeScatterPlot
+ - DendrogramPlot
  - mixin
  - Axis
  - GenomeAxis

examples-src/App.vue

@@ -184,10 +184,10 @@
 
  <h3>&lt;TrackPlot/&gt;</h3>
  <PlotContainer
- :pWidth="500"
+ :pWidth="700"
  :pHeight="40"
  :pMarginTop="10"
- :pMarginLeft="120"
+ :pMarginLeft="10"
  :pMarginRight="10"
  :pMarginBottom="180"
  >
@@ -265,23 +265,33 @@
  />
  </PlotContainer>
 
- <h3>&lt;DendrogramAxis/&gt;</h3>
+ <h3>&lt;DendrogramPlot/&gt;</h3>
  <PlotContainer
- :pWidth="900"
- :pHeight="10"
+ :pWidth="780"
+ :pHeight="500"
  :pMarginTop="200"
- :pMarginLeft="20"
+ :pMarginLeft="180"
  :pMarginRight="20"
  :pMarginBottom="20"
  >
- <DendrogramAxis
- slot="axisTop"
- data="clustering"
- variable="sample_id"
- side="top"
+ <Axis
+ slot="axisLeft"
+ variable="signature"
+ side="left"
+ :getScale="getScale"
+ :getStack="getStack"
+ />
+ <DendrogramPlot
+ slot="plot"
+ data="exposures_data"
+ h="clustering"
+ x="sample_id"
+ y="signature"
+ c="exposure"
  :getScale="getScale"
  :getStack="getStack"
  :getData="getData"
+ :clickHandler="exampleClickHandler"
  />
  </PlotContainer>
 
@@ -305,8 +315,8 @@
 <script>
 import { set as d3_set } from 'd3-collection';
 // Plots
-import { PlotContainer, Axis, GenomeAxis, DendrogramAxis } from '../src/index.js';
-import { StackedBarPlot, BarPlot, ScatterPlot, BoxPlot, MultiBoxPlot, TrackPlot } from '../src/index.js';
+import { PlotContainer, Axis, GenomeAxis } from '../src/index.js';
+import { StackedBarPlot, BarPlot, ScatterPlot, BoxPlot, MultiBoxPlot, TrackPlot, DendrogramPlot } from '../src/index.js';
 import { GenomeScatterPlot } from '../src/index.js';
 
 
@@ -524,7 +534,6 @@ export default {
  components: {
  PlotContainer,
  Axis,
- DendrogramAxis,
  GenomeAxis,
  StackedBarPlot,
  BarPlot,
@@ -534,7 +543,8 @@ export default {
  BoxPlot,
  MultiBoxPlot,
  TrackPlot,
- GenomeScatterPlot
+ GenomeScatterPlot,
+ DendrogramPlot
  },
  data() {
  return {

src/components/Axis.vue

@@ -221,12 +221,21 @@ export default {
 
  let scaleZoomedOut, scaleZoomedIn, tickSizeOuter;
  if(varScale.type === AbstractScale.types.DISCRETE) {
- scaleZoomedOut = d3_scaleBand()
- .domain(varScale.domain)
- .range(range);
- scaleZoomedIn = d3_scaleBand()
- .domain(varScale.domainFiltered)
- .range(range);
+ if(vm._orientation === ORIENTATIONS.HORIZONTAL) {
+ scaleZoomedOut = d3_scaleBand()
+ .domain(varScale.domain)
+ .range(range);
+ scaleZoomedIn = d3_scaleBand()
+ .domain(varScale.domainFiltered)
+ .range(range);
+ } else if(vm._orientation === ORIENTATIONS.VERTICAL) {
+ scaleZoomedOut = d3_scaleBand()
+ .domain(varScale.domain.slice().reverse())
+ .range(range);
+ scaleZoomedIn = d3_scaleBand()
+ .domain(varScale.domainFiltered.slice().reverse())
+ .range(range);
+ }
  tickSizeOuter = 0;
  } else if(varScale.type === AbstractScale.types.CONTINUOUS) {
  scaleZoomedOut = d3_scaleLinear()
@@ -367,7 +376,17 @@ export default {
  .attr("fill-opacity", 0.5)
  .attr("transform", "translate(" + zoomRectTranslateX + ",0)");
  } else if(varScale.type === AbstractScale.types.DISCRETE) {
- // TODO
+ let eachBand = vm.pHeight / varScale.domain.length;
+ for(let domainFilteredItem of varScale.domainFiltered) {
+ containerZoomedOut.append("rect")
+ .attr("width", axisBboxZoomedOut.width+betweenAxisMargin)
+ .attr("height", eachBand)
+ .attr("x", 0)
+ .attr("y", scaleZoomedOut(domainFilteredItem))
+ .attr("fill", "silver")
+ .attr("fill-opacity", 0.5)
+ .attr("transform", "translate(" + zoomRectTranslateX + ",0)");
+ }
  }
  } else if(vm._orientation === ORIENTATIONS.HORIZONTAL) {
  let zoomRectTranslateY;
@@ -418,7 +437,7 @@ export default {
  } else if(varScale.type === AbstractScale.types.DISCRETE) {
  brushed = () => {
  let s = d3_event.selection || scaleZoomedOut.range().slice().reverse();
- let eachBand = vm.pWidth / varScale.domain.length;
+ let eachBand = vm.pHeight / varScale.domain.length;
  let startIndex = Math.floor((s[0] / eachBand));
  let endIndex = Math.ceil((s[1] / eachBand));
  varScale.zoom(startIndex, endIndex);
@@ -447,7 +466,7 @@ export default {
  }
  } else if(varScale.type === AbstractScale.types.DISCRETE) {
  brushed = () => {
- let s = d3_event.selection || scaleZoomedOut.range();
+ let s = d3_event.selection || scaleZoomedOut.range().slice();
  let eachBand = vm.pWidth / varScale.domain.length;
  let startIndex = Math.floor((s[0] / eachBand));
  let endIndex = Math.ceil((s[1] / eachBand));