Commit fc46e104 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

added significance meassure bar

parent b152abee
......@@ -25,7 +25,7 @@ class FractalJS {
}
// noinspection JSMethodCanBeStatic
setSubsets (...subsets) {
setSubsets (subsets) {
store.dispatch('setSubsets', subsets)
}
......
......@@ -30,41 +30,47 @@
<g class="fjs-boxplot-axis fjs-y-axis"></g>
<g class="fjs-box"
:transform="`translate(${scales.x(label)}, 0)`"
v-tooltip="{title: label, options: {position: 'bottom'}}"
v-tooltip="{position: 'bottom'}"
:title="label"
:data-label="label"
@mouseenter="showTooltip(label)"
@mouseleave="hideTooltip(label)"
v-for="label in labels" >
<line class="fjs-upper-whisker"
v-tooltip="{title: results.statistics[label].u_wsk, options: {position: 'right'}}"
:title="results.statistics[label].u_wsk"
v-tooltip="{position: 'right'}"
:x1="- boxplotWidth / 6"
:y1="tweened.boxes[label].u_wsk"
:x2="boxplotWidth / 6"
:y2="tweened.boxes[label].u_wsk">
</line>
<line class="fjs-lower-whisker"
v-tooltip="{title: results.statistics[label].l_wsk, options: {position: 'right'}}"
:title="results.statistics[label].l_wsk"
v-tooltip="{position: 'right'}"
:x1="- boxplotWidth / 6"
:y1="tweened.boxes[label].l_wsk"
:x2="boxplotWidth / 6"
:y2="tweened.boxes[label].l_wsk">
</line>
<line class="fjs-upper-quartile"
v-tooltip="{title: results.statistics[label].u_qrt, options: {position: 'left'}}"
:title="results.statistics[label].u_qrt"
v-tooltip="{position: 'left'}"
:x1="- boxplotWidth / 2"
:y1="tweened.boxes[label].u_qrt"
:x2="boxplotWidth / 2"
:y2="tweened.boxes[label].u_qrt">
</line>
<line class="fjs-lower-quartile"
v-tooltip="{title: results.statistics[label].l_qrt, options: {position: 'left'}}"
:title="results.statistics[label].l_qrt"
v-tooltip="{position: 'left'}"
:x1="- boxplotWidth / 2"
:y1="tweened.boxes[label].l_qrt"
:x2="boxplotWidth / 2"
:y2="tweened.boxes[label].l_qrt">
</line>
<line class="fjs-median"
v-tooltip="{title: results.statistics[label].median, options: {position: 'right'}}"
:title="results.statistics[label].median"
v-tooltip="{position: 'right'}"
:x1="- boxplotWidth / 2"
:y1="tweened.boxes[label].median"
:x2="boxplotWidth / 2"
......@@ -89,7 +95,8 @@
:height="tweened.boxes[label].l_qrt - tweened.boxes[label].median">
</rect>
<circle class="fjs-points"
v-tooltip="{title: point.tooltip, options: {arrow: true, theme: 'light'}}"
:title="point.tooltip"
v-tooltip="{arrow: true, theme: 'light'}"
:cx="point.jitter"
:cy="scales.y(point.value)"
r="4"
......
......@@ -53,11 +53,13 @@
r="4"
:fill="categoryColors[categories.indexOf(point.category) % categoryColors.length]"
:stroke="subsetColors[point.subset]"
v-tooltip="{title: point.tooltip}"
:title="point.tooltip"
v-tooltip
v-for="point in shownPoints.all">
</circle>
<line class="fjs-lin-reg-line"
v-tooltip="{title: regLine.tooltip, options: {followCursor: true}}"
:title="regLine.tooltip"
v-tooltip="{followCursor: true}"
:x1="tweened.regLine.x1"
:x2="tweened.regLine.x2"
:y1="tweened.regLine.y1"
......
......@@ -26,18 +26,30 @@
v-for="label in labels.variables">
{{ label.text }}
</text>
<rect class="fjs-sig-bar"
:x="bar.x"
:y="bar.y"
:height="bar.height"
:width="bar.width"
:fill="bar.fill"
:title="bar.tooltip"
v-tooltip
v-for="bar in sigBars">
</rect>
<rect class="fjs-cell"
:x="cell.x"
:y="cell.y"
:height="cell.height"
:width="cell.width"
:fill="cell.fill"
v-tooltip="{title: cell.tooltip}"
:title="cell.tooltip"
v-tooltip
v-for="cell in cells">
</rect>
</g>
</svg>
</div>
<task-view></task-view>
</div>
</template>
......@@ -58,8 +70,10 @@
height: 500,
colorScale: d3.interpolateCool,
numericArrayDataIds: [],
currentSigMeassure: 'logFC',
results: {
data: []
data: [],
stats: []
}
}
},
......@@ -76,7 +90,7 @@
return this.numericArrayDataIds.length > 0
},
margin () {
const left = 50
const left = this.width / 5
const top = this.height / 10
const right = this.width / 10
const bottom = 50
......@@ -108,6 +122,16 @@
.range(this.uniqueVariables.map((d, i) => i * this.gridBox.height))
return { x, y }
},
currentStats () {
return this.results.stats.map(d => d[this.currentSigMeassure])
},
sigScales () {
const x = d3.scaleLinear()
.domain(d3.extent(this.currentStats))
.range([0, this.margin.left])
const y = this.scales.y // has the same y scale than the heatmap grid
return { x, y }
},
cells () {
return this.results.data.map(d => {
return {
......@@ -127,6 +151,19 @@
}
})
},
sigBars () {
return this.results.stats.map(d => {
return {
x: - this.sigScales.x(d[this.currentSigMeassure]),
y: this.sigScales.y(d.variable),
width: this.sigScales.x(d[this.currentSigMeassure]),
height: this.gridBox.height,
fill: d[this.currentSigMeassure] < 0 ? '#0072ff' : '#ff006a',
tooltip: `
`
}
})
},
labels () {
const ids = this.uniqueIds.map(id => {
const transform = `translate(${this.scales.x(id) + this.gridBox.width / 2}, -10)rotate(-45)`
......@@ -137,7 +174,7 @@
return { transform, fontSize, text }
})
const variables = this.uniqueVariables.map(variable => {
const transform = `translate(${this.padded.width + 10}, ${this.scales.y(variable) + this.gridBox.height / 2})`
const transform = `translate(${this.padded.width + 10}, ${this.scales.y(variable) + this.gridBox.height})`
const fontSize = `${this.gridBox.height}px`
const text = truncateTextUntil(
{text: variable, font: `${this.gridBox.height}px Roboto`, maxWidth: this.margin.right})
......@@ -152,8 +189,11 @@
.then(response => {
const results = JSON.parse(response)
const data = JSON.parse(results.data)
const stats = JSON.parse(results.stats)
results.data = Object.keys(data).map(key => data[key])
results.stats = Object.keys(stats).map(key => stats[key])
deepFreeze(results) // massively improve performance by telling Vue that the objects properties won't change
deepFreeze(stats) // massively improve performance by telling Vue that the objects properties won't change
this.results = results
})
},
......@@ -222,4 +262,7 @@
shape-rendering: crispEdges
.fjs-cell:hover
opacity: 0.4
.fjs-sig-bar
stroke-width: none
shape-rendering: crispEdges
</style>
\ No newline at end of file
......@@ -7,20 +7,13 @@ export default {
vnode.context._tippyInstances = {}
}
const uuid = uuid4()
el.setAttribute('title', binding.value.title)
el.setAttribute('data-uuid', uuid)
const tip = tippy(el, Object.assign({
performance: true,
arrow: true,
theme: 'light'
}, binding.value.options))
theme: 'light',
dynamicTitle: true
}, binding.value))
vnode.context._tippyInstances[uuid] = tip
},
update (el, binding, vnode) {
const uuid = el.getAttribute('data-uuid')
const tip = vnode.context._tippyInstances[uuid]
const popper = tip.getPopperElement(el)
el.setAttribute('title', binding.value.title)
tip.update(popper)
}
}
......@@ -24,6 +24,9 @@
return credentials1
}
})
fjs.setSubsets([['59810bf1f700004b0430179f', '59810bf1f700004b043017a0', '59810bf1f700004b043017a1', '59810bf1f700004b043017a2', '59810bf1f700004b043017a3', '59810bf1f700004b043017a4', '59810bf1f700004b043017a5', '59810bf1f700004b043017a6', '59810bf1f700004b043017a7', '59810bf1f700004b043017a8', '59810bf1f700004b043017a9', '59810bf1f700004b043017aa', '59810bf1f700004b043017ab', '59810bf1f700004b043017ac', '59810bf1f700004b043017ad', '59810bf1f700004b043017ae', '59810bf1f700004b043017af', '59810bf1f700004b043017b0', '59810bf1f700004b043017b1', '59810bf1f700004b043017b2', '59810bf1f700004b043017b3', '59810bf1f700004b043017b4', '59810bf1f700004b043017b5'], ['59810bf1f700004b043017b6', '59810bf1f700004b043017b7', '59810bf1f700004b043017b8', '59810bf1f700004b043017b9', '59810bf1f700004b043017ba', '59810bf1f700004b043017bb', '59810bf1f700004b043017bc', '59810bf1f700004b043017bd', '59810bf1f700004b043017be', '59810bf1f700004b043017bf', '59810bf1f700004b043017c0', '59810bf1f700004b043017c1', '59810bf1f700004b043017c2', '59810bf1f700004b043017c3', '59810bf1f700004b043017c4', '59810bf1f700004b043017c5', '59810bf1f700004b043017c6', '59810bf1f700004b043017c7', '59810bf1f700004b043017c8', '59810bf1f700004b043017c9', '59810bf1f700004b043017ca', '59810bf1f700004b043017cb', '59810bf1f700004b043017cc', '59810bf1f700004b043017cd', '59810bf1f700004b043017ce', '59810bf1f700004b043017cf', '59810bf1f700004b043017d0', '59810bf1f700004b043017d1', '59810bf1f700004b043017d2', '59810bf1f700004b043017d3', '59810bf1f700004b043017d4', '59810bf1f700004b043017d5', '59810bf1f700004b043017d6', '59810bf1f700004b043017d7', '59810bf1f700004b043017d8', '59810bf1f700004b043017d9', '59810bf1f700004b043017da', '59810bf1f700004b043017db', '59810bf1f700004b043017dc', '59810bf2f700004b043017dd', '59810bf2f700004b043017de', '59810bf2f700004b043017df', '59810bf2f700004b043017e0', '59810bf2f700004b043017e1', '59810bf2f700004b043017e2', '59810bf2f700004b043017e3', '59810bf2f700004b043017e4', '59810bf2f700004b043017e5', '59810bf2f700004b043017e6', '59810bf2f700004b043017e7', '59810bf2f700004b043017e8']])
function loadData () {
fjs.loadData([
{
......@@ -47,6 +50,7 @@
data_set: 'egait.features'
}
])
}
function deleteData () {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment