From 2547949486f8d6a11a7b86628a108e2ab2a30b13 Mon Sep 17 00:00:00 2001 From: Klaus Eckelt Date: Thu, 22 Apr 2021 19:13:05 +0200 Subject: [PATCH] Create boxplot with vega #12 --- dist/app/TouringPanel.d.ts | 1 - dist/app/TouringPanel.js | 1 - dist/app/TouringPanel.js.map | 2 +- dist/measure_visualization/BoxPlot.js | 199 +++--------------- dist/measure_visualization/BoxPlot.js.map | 2 +- package.json | 12 +- src/app/TouringPanel.ts | 1 - src/measure_visualization/BoxPlot.ts | 242 ++++------------------ 8 files changed, 75 insertions(+), 385 deletions(-) diff --git a/dist/app/TouringPanel.d.ts b/dist/app/TouringPanel.d.ts index e9eac48..bbe3ec7 100644 --- a/dist/app/TouringPanel.d.ts +++ b/dist/app/TouringPanel.d.ts @@ -1,5 +1,4 @@ import 'd3.parsets/d3.parsets'; -import 'd3-grubert-boxplot/box'; import { LocalDataProvider } from 'lineupjs'; import { PanelTab } from 'tdp_core/dist/lineup/internal/panel/PanelTab'; import { IPanelTabExtensionDesc } from 'tdp_core/dist/lineup/internal/LineUpPanelActions'; diff --git a/dist/app/TouringPanel.js b/dist/app/TouringPanel.js index a65d653..afbc482 100644 --- a/dist/app/TouringPanel.js +++ b/dist/app/TouringPanel.js @@ -1,7 +1,6 @@ import { RankingAdapter } from '../tasks/RankingAdapter'; import * as d3 from 'd3'; import 'd3.parsets/d3.parsets'; -import 'd3-grubert-boxplot/box'; import { PanelTab } from 'tdp_core/dist/lineup/internal/panel/PanelTab'; import { RowComparison } from '../tasks/RowComparisonTask'; import { ColumnComparison } from '../tasks/ColumnComparisonTask'; diff --git a/dist/app/TouringPanel.js.map b/dist/app/TouringPanel.js.map index dab43a1..200039a 100644 --- a/dist/app/TouringPanel.js.map +++ b/dist/app/TouringPanel.js.map @@ -1 +1 @@ -{"version":3,"file":"TouringPanel.js","sourceRoot":"","sources":["../../src/app/TouringPanel.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"TouringPanel.js","sourceRoot":"","sources":["../../src/app/TouringPanel.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/dist/measure_visualization/BoxPlot.js b/dist/measure_visualization/BoxPlot.js index c483f50..30a4062 100644 --- a/dist/measure_visualization/BoxPlot.js +++ b/dist/measure_visualization/BoxPlot.js @@ -1,178 +1,41 @@ -import * as d3 from 'd3'; +import vegaEmbed from 'vega-embed'; export class BoxPlot { formatData(setParameters) { - // console.log('Box Plot - formatData'); - const rowBoxData = []; - let label = ''; - // setA - const setABoxData = []; - let min = Infinity; - let max = -Infinity; - if (setParameters.setACategory && setParameters.setACategory.label) { - label = setParameters.setACategory.label; - } - // if(setParameters.setACategory && setParameters.setACategory.label) { - // label = setParameters.setACategory.label; - // } - setABoxData.push('' + label); + var _a, _b, _c, _d, _e, _f; + const labelA = ((_a = setParameters.setACategory) === null || _a === void 0 ? void 0 : _a.label) || ''; const setAValid = setParameters.setA.filter((item) => { return (item !== undefined) && (item !== null) && (!Number.isNaN(item)); }); - setABoxData.push(setAValid); - min = Math.min(min, Math.min(...setAValid)); - max = Math.max(max, Math.max(...setAValid)); - setABoxData.push({ 'min': min, 'max': max }); - // add the boxplot to all boxplots for this row - rowBoxData.push(setABoxData); - // setB - const setBBoxData = []; - min = Infinity; - max = -Infinity; - // if(setParameters.setBCategory) { - // label = setParameters.setBCategory; - // } - if (setParameters.setBCategory && setParameters.setBCategory.label) { - label = setParameters.setBCategory.label; - } - setBBoxData.push('' + label); + const colorA = ((_b = setParameters.setADesc) === null || _b === void 0 ? void 0 : _b.color) || ((_c = setParameters.setACategory) === null || _c === void 0 ? void 0 : _c.color) || '#EFEFEF'; + const labelB = ((_d = setParameters.setBCategory) === null || _d === void 0 ? void 0 : _d.label) || ''; const setBValid = setParameters.setB.filter((item) => { return (item !== undefined) && (item !== null) && (!Number.isNaN(item)); }); - min = Math.min(min, Math.min(...setBValid)); - max = Math.max(max, Math.max(...setBValid)); - // second elemnt is an array with all the values - setBBoxData.push(setBValid); - setBBoxData.push({ 'min': min, 'max': max }); - // add the boxplot to all boxplots for this row - rowBoxData.push(setBBoxData); - const boxColor = setParameters.setBDesc.color ? setParameters.setBDesc.color : '#EFEFEF'; - const rowBoxObj = { - color: boxColor, - data: rowBoxData, - domainMin: setParameters.setBDesc.domain ? setParameters.setBDesc.domain[0] : Math.min(rowBoxData[0][2].min, rowBoxData[1][2].min), - domainMax: setParameters.setBDesc.domain ? setParameters.setBDesc.domain[1] : Math.min(rowBoxData[0][2].max, rowBoxData[1][2].max) - }; - return rowBoxObj; + const colorB = ((_e = setParameters.setBDesc) === null || _e === void 0 ? void 0 : _e.color) || ((_f = setParameters.setBCategory) === null || _f === void 0 ? void 0 : _f.color) || '#EFEFEF'; + return [ + ...setAValid.map((valA) => ({ 'group': labelA, 'value': valA, color: colorA })), + ...setBValid.map((valB) => ({ 'group': labelB, 'value': valB, color: colorB })), + ]; } generateVisualization(miniVisualisation, setParameters, score) { - const formatData = this.formatData(setParameters); - // console.log('Box Plot - generateVisualization'); - let data = formatData.data; - let min = Math.min(...data.map((a) => (a[2].min))); - let max = Math.max(...data.map((a) => (a[2].max))); - // check if the min and may are not infinte - min = isFinite(min) ? min : formatData.domainMin; - max = isFinite(max) ? max : formatData.domainMax; - // start min with 0 or highest negatice value - min = Math.min(min, 0); - // remove all empty sets - data = data.filter((item) => { return (item[1].length !== 0); }); - // console.log('BoxPlot: ',{data,min,max}); - const containerWidth = Number(miniVisualisation.style('width').slice(0, -2)) - 25; // -25 because of the scroll bar - const calcWidth = Math.max(containerWidth, data.length * 50 + 30); - const maxHeight = 220; - const margin = { top: 10, right: 0, bottom: 50, left: 55 }; - const width = calcWidth - margin.left - margin.right; - const height = maxHeight - margin.top - margin.bottom; - const chart = d3.box() - .whiskers(function (d) { - const q1 = d.quartiles[0], q3 = d.quartiles[2], iqr = (q3 - q1) * 1.5; - let i = -1, j = d.length; - // tslint:disable-next-line:curly - while (d[++i] < q1 - iqr) - ; - // tslint:disable-next-line:curly - while (d[--j] > q3 + iqr) - ; - return [i, j]; - }) - .height(height) - .domain([min, max]) - .showLabels(false); - const svgCanvas = miniVisualisation.append('svg') - .attr('width', width + margin.left + margin.right) - .attr('height', height + margin.top + margin.bottom); - const svgFigureGroup = svgCanvas.append('g') - .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') - .attr('class', 'boxplot'); - // the x-axis - const x = d3.scale.ordinal() - .domain(data.map(function (d) { return d[0]; })) - .rangeRoundBands([0, width], 0.7, 0.3); - const xAxis = d3.svg.axis() - .scale(x) - .orient('bottom'); - // the y-axis - const y = d3.scale.linear() - .domain([min, max]).nice() - .range([height + margin.top, 0 + margin.top]); - const yAxis = d3.svg.axis() - .scale(y) - .orient('left'); - yAxis.tickFormat((d) => { - if ((Math.abs(d) < 1000 && Math.abs(d) > 0.01) || d === 0) { - return '' + Math.round(d * 100) / 100; + const spec = { + '$schema': 'https://vega.github.io/schema/vega-lite/v4.json', + data: { values: this.formatData(setParameters) }, + title: setParameters.setBDesc.label, + width: { step: 30 }, + mark: { + type: 'boxplot', + median: { color: 'black' } + }, + encoding: { + x: { field: 'group', type: 'nominal', axis: { labelAngle: 45 }, title: null }, + color: { field: 'color', type: 'nominal', legend: null, scale: null }, + y: { + field: 'value', + type: 'quantitative', + scale: { zero: false }, + axis: { grid: false }, + title: null + } } - return d3.format('0.1e')(d); - }); - // draw the boxplots - svgFigureGroup.selectAll('.boxplot') - .data(data) - .enter().append('g') - .attr('class', function (d, i) { - const classString = 'box-element'; - const dataLabel = `${d[0]}`; - const colorLabel = `category-gray`; - return `${classString} ${dataLabel} ${colorLabel}`; - }) - .attr('transform', function (d) { return 'translate(' + x(d[0]) + ',' + margin.top + ')'; }) - .call(chart.width(x.rangeBand())); - // add a title - svgFigureGroup.append('text') - .attr('x', (width / 2)) - .attr('y', 0 + (margin.top / 2)) - .attr('text-anchor', 'middle') - .style('font-size', '18px') - // .style('text-decoration', 'underline') - .text(setParameters.setBDesc.label); - // draw y axis - svgFigureGroup.append('g') - .attr('class', 'y axis') - .call(yAxis); - // .append('text') // and text1 - // .attr('transform', 'rotate(-90)') - // .attr('y', 6) - // .attr('dy', '.71em') - // .style('text-anchor', 'end') - // .style('font-size', '16px') - // .text(cell.columnLabel); - // draw x axis - svgFigureGroup.append('g') - .attr('class', 'x axis') - .attr('transform', 'translate(0,' + (height + margin.top + 10) + ')') - .call(xAxis); - // .append('text') // text label for the x axis - // .attr('x', (width / 2) ) - // .attr('y', 10 ) - // .attr('dy', '.71em') - // .style('text-anchor', 'middle') - // .style('font-size', '16px') - // .text(cell.columnLabel); - const boxElements = svgFigureGroup.selectAll('g.box-element').classed('selected', true); - const cirlceElements = boxElements.selectAll('circle') - .attr('r', 2); - if (formatData.color) { - const rectElements = boxElements.selectAll('rect').style('fill', formatData.color); - const cirlceElements = boxElements.selectAll('circle').style('fill', formatData.color).style('stroke', 'black'); - } - // tooltip - boxElements.append('title') - .classed('tooltip.measure', true) - .text(function (d) { - const min = (d[1][0]).toFixed(2); - const q1 = (d[1].quartiles[0]).toFixed(2); - const median = (d[1].quartiles[1]).toFixed(2); - const q3 = (d[1].quartiles[2]).toFixed(2); - const max = (d[1][d[1].length - 1]).toFixed(2); - const text = `min = ${min}\nq1 = ${q1}\nmedian = ${median}\nq3 = ${q3}\nmax = ${max}`; - return text; - }); + }; + vegaEmbed(miniVisualisation.append('div').node(), spec, { actions: false, renderer: 'canvas' }); } } //# sourceMappingURL=BoxPlot.js.map \ No newline at end of file diff --git a/dist/measure_visualization/BoxPlot.js.map b/dist/measure_visualization/BoxPlot.js.map index 9fe7639..18c81a7 100644 --- a/dist/measure_visualization/BoxPlot.js.map +++ b/dist/measure_visualization/BoxPlot.js.map @@ -1 +1 @@ -{"version":3,"file":"BoxPlot.js","sourceRoot":"","sources":["../../src/measure_visualization/BoxPlot.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"BoxPlot.js","sourceRoot":"","sources":["../../src/measure_visualization/BoxPlot.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/package.json b/package.json index fca4873..4066682 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,11 @@ "dist": "mkdir lib && cd dist && tar cvzf ../lib/tourdino.tar.gz *" }, "devDependencies": { + "@types/d3": "~3.5.36", "@types/jest": "~26.0.20", + "@types/jquery": "~3.5.0", + "@types/node": "^13.7.7", + "@types/select2": "4.0.44", "identity-obj-proxy": "~3.0.0", "jest": "~26.6.3", "jest-raw-loader": "~1.0.1", @@ -69,19 +73,17 @@ "tslint": "~5.20.1", "typedoc": "~0.19.2", "typescript": "~3.9.7", - "@types/d3": "~3.5.36", - "@types/jquery": "~3.5.0", - "@types/node": "^13.7.7", - "@types/select2": "4.0.44", "worker-loader": "^2.0.0" }, "dependencies": { "tdp_core": "github:datavisyn/tdp_core#develop", "d3": "~3.5.17", "d3.parsets": "git+https://github.com/jasondavies/d3-parsets.git#v1.2.4", - "d3-grubert-boxplot": "gist:366430a0ac8e6e55ce09b040b5b493a6", "jstat": "^1.9.4", "lodash": "~4.17.20", + "vega": "^5.13.0", + "vega-embed": "^6.10.0", + "vega-lite": "^4.14.1", "xxhashjs": "^0.2.2" } } diff --git a/src/app/TouringPanel.ts b/src/app/TouringPanel.ts index 610c7b1..26ac075 100644 --- a/src/app/TouringPanel.ts +++ b/src/app/TouringPanel.ts @@ -1,7 +1,6 @@ import {RankingAdapter} from '../tasks/RankingAdapter'; import * as d3 from 'd3'; import 'd3.parsets/d3.parsets'; -import 'd3-grubert-boxplot/box'; import {LocalDataProvider} from 'lineupjs'; import {PanelTab} from 'tdp_core/dist/lineup/internal/panel/PanelTab'; import {IPanelTabExtensionDesc} from 'tdp_core/dist/lineup/internal/LineUpPanelActions'; diff --git a/src/measure_visualization/BoxPlot.ts b/src/measure_visualization/BoxPlot.ts index ea9105a..40f525a 100644 --- a/src/measure_visualization/BoxPlot.ts +++ b/src/measure_visualization/BoxPlot.ts @@ -1,221 +1,49 @@ import * as d3 from 'd3'; import {IMeasureResult, IMeasureVisualization, ISetParameters} from '../base/interfaces'; +import vegaEmbed from 'vega-embed'; +import {TopLevelSpec as VegaLiteSpec} from 'vega-lite'; export class BoxPlot implements IMeasureVisualization { private formatData(setParameters: ISetParameters) { - // console.log('Box Plot - formatData'); - - const rowBoxData = []; - - let label = ''; - - // setA - const setABoxData = []; - let min = Infinity; - let max = -Infinity; - if(setParameters.setACategory && setParameters.setACategory.label) { - label = setParameters.setACategory.label; - } - // if(setParameters.setACategory && setParameters.setACategory.label) { - // label = setParameters.setACategory.label; - // } - setABoxData.push(''+label); - const setAValid = setParameters.setA.filter((item) => { return (item !== undefined) && (item !== null) && (!Number.isNaN(item)); }); - setABoxData.push(setAValid); - min = Math.min(min,Math.min(...( setAValid))); - max = Math.max(max,Math.max(...( setAValid))); - setABoxData.push({'min': min, 'max': max}); - - // add the boxplot to all boxplots for this row - rowBoxData.push(setABoxData); - - // setB - const setBBoxData = []; - min = Infinity; - max = -Infinity; - // if(setParameters.setBCategory) { - // label = setParameters.setBCategory; - // } - if(setParameters.setBCategory && setParameters.setBCategory.label) { - label = setParameters.setBCategory.label; - } - setBBoxData.push(''+label); - const setBValid = setParameters.setB.filter((item) => { return (item !== undefined) && (item !== null) && (!Number.isNaN(item)); }); - min = Math.min(min,Math.min(...( setBValid))); - max = Math.max(max,Math.max(...( setBValid))); - - // second elemnt is an array with all the values - setBBoxData.push(setBValid); - setBBoxData.push({'min': min, 'max': max}); - - // add the boxplot to all boxplots for this row - rowBoxData.push(setBBoxData); - - - const boxColor = setParameters.setBDesc.color ? setParameters.setBDesc.color : '#EFEFEF'; - const rowBoxObj = { - color: boxColor, - data: rowBoxData, - domainMin: setParameters.setBDesc.domain ? setParameters.setBDesc.domain[0] : Math.min(rowBoxData[0][2].min,rowBoxData[1][2].min), - domainMax: setParameters.setBDesc.domain ? setParameters.setBDesc.domain[1] : Math.min(rowBoxData[0][2].max,rowBoxData[1][2].max) - }; - - return rowBoxObj; + const labelA = setParameters.setACategory?.label || ''; + const setAValid = setParameters.setA.filter((item) => {return (item !== undefined) && (item !== null) && (!Number.isNaN(item));}); + const colorA = setParameters.setADesc?.color || setParameters.setACategory?.color || '#EFEFEF'; + + const labelB = setParameters.setBCategory?.label || ''; + const setBValid = setParameters.setB.filter((item) => {return (item !== undefined) && (item !== null) && (!Number.isNaN(item));}); + const colorB = setParameters.setBDesc?.color || setParameters.setBCategory?.color || '#EFEFEF'; + + return [ + ...setAValid.map((valA) => ({'group': labelA, 'value': valA, color: colorA})), + ...setBValid.map((valB) => ({'group': labelB, 'value': valB, color: colorB})), + ]; } public generateVisualization(miniVisualisation: d3.Selection, setParameters: ISetParameters, score: IMeasureResult) { - const formatData = this.formatData(setParameters); - // console.log('Box Plot - generateVisualization'); - - let data = formatData.data; - let min = Math.min(...data.map((a) => (a[2].min))); - let max = Math.max(...data.map((a) => (a[2].max))); - - // check if the min and may are not infinte - min = isFinite(min) ? min : formatData.domainMin; - max = isFinite(max) ? max : formatData.domainMax; - // start min with 0 or highest negatice value - min = Math.min(min,0); - - // remove all empty sets - data = data.filter((item) => {return (item[1].length !== 0); }); - // console.log('BoxPlot: ',{data,min,max}); - - - const containerWidth = Number(miniVisualisation.style('width').slice(0,-2)) - 25; // -25 because of the scroll bar - - const calcWidth = Math.max(containerWidth,data.length * 50 + 30); - - const maxHeight = 220; - const margin = {top: 10, right: 0, bottom: 50, left: 55}; - const width = calcWidth - margin.left - margin.right; - const height = maxHeight - margin.top - margin.bottom; - - const chart = (d3 as any).box() - .whiskers(function(d) { - const q1 = d.quartiles[0], - q3 = d.quartiles[2], - iqr = (q3 - q1) * 1.5; - let i = -1, - j = d.length; - // tslint:disable-next-line:curly - while (d[++i] < q1 - iqr); - // tslint:disable-next-line:curly - while (d[--j] > q3 + iqr); - return [i, j]; - }) - .height(height) - .domain([min, max]) - .showLabels(false); - - - const svgCanvas = miniVisualisation.append('svg') - .attr('width',width + margin.left + margin.right) - .attr('height',height + margin.top + margin.bottom); - - const svgFigureGroup = svgCanvas.append('g') - .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') - .attr('class','boxplot'); - - // the x-axis - const x = d3.scale.ordinal() - .domain( data.map(function(d) { return d[0]; } ) ) - .rangeRoundBands([0 , width], 0.7, 0.3); - - const xAxis = d3.svg.axis() - .scale(x) - .orient('bottom'); - - // the y-axis - const y = d3.scale.linear() - .domain([min, max]).nice() - .range([height + margin.top, 0 + margin.top]); - - const yAxis = d3.svg.axis() - .scale(y) - .orient('left'); - - yAxis.tickFormat((d) => { - if((Math.abs(d)<1000 && Math.abs(d)>0.01) || d === 0) { - return ''+Math.round(d*100)/100; + const spec: VegaLiteSpec = { + '$schema': 'https://vega.github.io/schema/vega-lite/v4.json', + data: {values: this.formatData(setParameters)}, + title: setParameters.setBDesc.label, + width: {step: 30}, + mark: { + type: 'boxplot', + median: {color: 'black'} + }, + encoding: { + x: {field: 'group', type: 'nominal', axis: {labelAngle: 45}, title: null}, + color: {field: 'color', type: 'nominal', legend: null, scale: null}, + y: { + field: 'value', + type: 'quantitative', + scale: {zero: false}, + axis: {grid: false}, + title: null + } } - return d3.format('0.1e')(d); - }); - - // draw the boxplots - svgFigureGroup.selectAll('.boxplot') - .data(data) - .enter().append('g') - .attr('class',function(d,i) { - const classString = 'box-element'; - const dataLabel = `${d[0]}`; - const colorLabel = `category-gray`; - - return `${classString} ${dataLabel} ${colorLabel}`; - }) - .attr('transform', function(d) { return 'translate(' + x(d[0]) + ',' + margin.top + ')'; } ) - .call(chart.width(x.rangeBand())); - - // add a title - svgFigureGroup.append('text') - .attr('x', (width / 2)) - .attr('y', 0 + (margin.top / 2)) - .attr('text-anchor', 'middle') - .style('font-size', '18px') - // .style('text-decoration', 'underline') - .text(setParameters.setBDesc.label); - - // draw y axis - svgFigureGroup.append('g') - .attr('class', 'y axis') - .call(yAxis); - // .append('text') // and text1 - // .attr('transform', 'rotate(-90)') - // .attr('y', 6) - // .attr('dy', '.71em') - // .style('text-anchor', 'end') - // .style('font-size', '16px') - // .text(cell.columnLabel); - - // draw x axis - svgFigureGroup.append('g') - .attr('class', 'x axis') - .attr('transform', 'translate(0,' + (height + margin.top + 10) + ')') - .call(xAxis); - // .append('text') // text label for the x axis - // .attr('x', (width / 2) ) - // .attr('y', 10 ) - // .attr('dy', '.71em') - // .style('text-anchor', 'middle') - // .style('font-size', '16px') - // .text(cell.columnLabel); - - - const boxElements = svgFigureGroup.selectAll('g.box-element').classed('selected',true); - - const cirlceElements = boxElements.selectAll('circle') - .attr('r',2); - if(formatData.color) { - const rectElements = boxElements.selectAll('rect').style('fill',formatData.color); - const cirlceElements = boxElements.selectAll('circle').style('fill',formatData.color).style('stroke','black'); - } - - // tooltip - boxElements.append('title') - .classed('tooltip.measure',true) - .text(function(d) { - - const min = (d[1][0]).toFixed(2); - const q1 = (d[1].quartiles[0]).toFixed(2); - const median = (d[1].quartiles[1]).toFixed(2); - const q3 = (d[1].quartiles[2]).toFixed(2); - const max = (d[1][d[1].length-1]).toFixed(2); - const text = `min = ${min}\nq1 = ${q1}\nmedian = ${median}\nq3 = ${q3}\nmax = ${max}`; - - return text; - }); + }; + vegaEmbed(miniVisualisation.append('div').node() as HTMLElement, spec, {actions: false, renderer: 'canvas'}); } }