@ohdsi/atlascharts
Version:
Visualizations is a collection of JavaScript modules to support D3 visualizations in web-based applications
295 lines (239 loc) • 9.23 kB
JavaScript
/*
Copyright 2017 Observational Health Data Sciences and Informatics
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Authors: Christopher Knoll
*/
define(["d3", "./boxplot"],
function(d3, Boxplot) {
"use strict";
class SplitBoxplot extends Boxplot {
render(data, target, w, h, chartOptions) {
// options
const defaults = {
showXAxis: true,
showMinMarkers: true,
showMaxMarkers: true,
boxHeight: 10,
valueFormatter: this.formatters.formatSI(3),
margins: {
top: 0,
right: 0,
bottom: 0,
left: 0,
}
};
const options = this.getOptions(defaults, chartOptions);
// container
const svg = this.createSvg(target, w, h);
const valueFormatter = options.valueFormatter;
this.useTip(this.defaultTip, options);
// assign a category if it is absent
data.forEach(d => d.Category = d.Category || "Default");
let width = w - options.margins.left - options.margins.right;
let height = h - options.margins.top - options.margins.bottom;
// the orientaiton of this plot is horizontal, where the x axis will contain the units in the distrubiton, and the y axis will be the different categories of data
// define the intial scale (range will be updated after we determine the final dimensions)
const x = d3.scaleLinear()
.range([0, width])
.domain([options.xMin || d3.min(data, d => Math.min(d.target.min, d.compare.min)), options.xMax || d3.max(data, d => Math.max(d.target.max, d.compare.max))]);
const y = d3.scaleBand()
.range([0, height])
.round(1.0 / data.length)
.domain(data.map(d => d.Category));
const xAxis = d3.axisBottom()
.scale(x)
.tickFormat(valueFormatter)
.ticks(5);
const yAxis = d3.axisLeft()
.scale(y);
let xAxisHeight = 0, xAxisWidth = xAxisHeight;
if (options.showXAxis) {
// create temporary x axis
const tempXAxis = svg.append('g').attr('class', 'axis');
tempXAxis.call(xAxis);
// update width & height based on temp xaxis dimension and remove
xAxisHeight = Math.round(tempXAxis.node().getBBox().height) + 2;
xAxisWidth = Math.round(tempXAxis.node().getBBox().width) + 4;
height -= xAxisHeight;
width -= Math.max(0, (xAxisWidth - width)); // trim width if
// xAxisWidth bleeds over the allocated width.
tempXAxis.remove();
}
let yAxisWidth = 0;
if (options.showYAxis) {
// create temporary y axis
const tempYAxis = svg.append('g').attr('class', 'axis');
tempYAxis.call(yAxis);
// update height based on temp xaxis dimension and remove
yAxisWidth = Math.round(tempYAxis.node().getBBox().width);
width -= yAxisWidth;
tempYAxis.remove();
}
const boxHeight = options.boxHeight;
let boxOffset = (y.bandwidth() / 2) - (boxHeight / 2);
let whiskerHeight = boxHeight / 2;
let endMarkerSize = whiskerHeight / 10;
if (options.showMinMarkers) {
if (endMarkerSize > yAxisWidth)
width -= 2 * endMarkerSize - yAxisWidth; // subtract from width any endMarkerSize's exceess over the yAxis Width.
else
width -= endMarkerSize; // subtract only the right side's end-marker width.
}
// reset axis ranges
x.range([0, width]);
y.range([height, 0]);
const chart = svg.append('g')
.attr('transform', `translate(
${options.margins.left + Math.max(yAxisWidth, endMarkerSize)},
${options.margins.top}
)`);
if (options.showLegend) {
const legend = svg.append('g')
.attr('class', 'legend');
const targetLegendItem = legend.append('g');
const compareLegendItem = legend.append('g');
let maxWidth = 0;
targetLegendItem.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', 10)
.attr('height', 10)
.attr('class', 'target');
targetLegendItem.append('text')
.attr('x', 15)
.attr('y', 9)
.text('Target');
compareLegendItem.append('rect')
.attr('x', targetLegendItem.node().getBBox().width + 10)
.attr('y', 0)
.attr('width', 10)
.attr('height', 10)
.attr('class', 'compare');
compareLegendItem.append('text')
.attr('x', targetLegendItem.node().getBBox().width + 25)
.attr('y', 9)
.text('Compare');
// maxWidth = Math.max(legend.node().getBBox().width + 12, maxWidth);
legend.attr('transform', `translate(
${(w - legend.node().getBBox().width) / 2},
0
)`);
}
// draw main box and whisker plots
const boxplots = chart.selectAll('.boxplot')
.data(data)
.enter().append('g')
.attr('class', 'boxplot')
.attr('transform', d => `translate(0, ${y(d.Category)})`);
const self = this;
// set up scale for drawing box height
const topScale = d3.scaleLinear()
.range([boxHeight/2, 0])
.domain([0,boxHeight]);
const bottomScale = d3.scaleLinear()
.range([0,boxHeight/2])
.domain([0,boxHeight]);
const bandWidth = y.bandwidth();
// for each g element (containing the boxplot render surface), draw the whiskers, bars and rects
boxplots.each(function (boxplotData) {
const boxplot = d3.select(this);
const boxplotContainer = boxplot.append('g')
.attr('transform', () => `translate(0, ${boxOffset})`);
const targetBox = boxplotContainer.append('g')
.datum( boxplotData.target)
.attr('class', 'target');
const compareBox = boxplotContainer.append('g')
.datum(boxplotData.compare)
.attr('class', 'compare')
.attr('transform', () => `translate(0, ${boxHeight/2 + 2})`);
let parts = [
{ "boxPlotData": boxplotData.target, "boxplot": targetBox, boxScale: topScale},
{ "boxPlotData": boxplotData.compare, "boxplot": compareBox, boxScale: bottomScale, "tipDirection": "s", tipOffset: [10,0]}
];
parts.forEach(part => {
let d = part.boxPlotData;
let boxplot = part.boxplot;
let boxScale = part.boxScale;
if (d.LIF != d.q1) { // draw whisker
boxplot.append('line')
.attr('class', 'bar')
.attr('x1', x(d.LIF))
.attr('y1', boxScale(0))
.attr('x2', x(d.LIF))
.attr('y2', boxScale(whiskerHeight));
boxplot.append('line')
.attr('class', 'whisker')
.attr('x1', x(d.LIF))
.attr('y1', boxScale(0))
.attr('x2', x(d.q1))
.attr('y2', boxScale(0));
}
boxplot.append('rect')
.attr('class', 'box')
.attr('x', x(d.q1))
.attr('y', Math.min(boxScale(0), boxScale(boxHeight)))
.attr('width', Math.max(1, x(d.q3) - x(d.q1)))
.attr('height', Math.abs(boxScale(0) - boxScale(boxHeight)))
.on('mouseover', d => self.tip.show(Object.assign({}, d, { tipDirection: part.tipDirection, tipOffset: part.tipOffset }), event.target))
.on('mouseout', d => self.tip.hide(d, event.target));
boxplot.append('line')
.attr('class', 'median')
.attr('x1', x(d.median))
.attr('y1', boxScale(0))
.attr('x2', x(d.median))
.attr('y2', boxScale(boxHeight));
if (d.UIF != d.q3) { // draw whisker
boxplot.append('line')
.attr('class', 'bar')
.attr('x1', x(d.UIF))
.attr('y1', boxScale(0))
.attr('x2', x(d.UIF))
.attr('y2', boxScale(whiskerHeight));
boxplot.append('line')
.attr('class', 'whisker')
.attr('x1', x(d.q3))
.attr('y1', boxScale(0))
.attr('x2', x(d.UIF))
.attr('y2', boxScale(0));
}
if (options.showMinMarkers) {
boxplot.append('circle')
.attr('cx', x(d.min))
.attr('cy', boxScale(whiskerHeight/2))
.attr('r', endMarkerSize);
}
if (options.showMaxMarkers) {
boxplot.append('circle')
.attr('cx', x(d.max))
.attr('cy', boxScale(whiskerHeight/2))
.attr('r', endMarkerSize);
}
});
});
// draw x and y axis
if (options.showXAxis) {
chart.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
}
if (options.showYAxis) {
chart.append('g')
.attr('class', 'y axis')
.attr('transform', `translate(0, 0)`)
.call(yAxis)
.selectAll('.tick text')
.call(this.wrap, y.bandwidth() || y.range());
}
}
}
return SplitBoxplot;
});