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

working boxplot update

parent 69073ea6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Boxplot</title>
<script src="http://localhost:8080/ada-charts.js"></script>
</head>
<body>
<div id="boxplot-controls">
<span>API examples:</span>
<button onclick="update()">update()</button>
<button onclick="toPNG()">toPNG()</button>
<button onclick="toSVG()">toSVG()</button>
</div>
<div id="boxplot-container"></div>
</body>
</html>
<script>
const container = document.querySelector('#boxplot-container');
const boxplot = AdaCharts.chart({ chartType: 'boxplot', container });
function toPNG() {
boxplot.toPNG();
}
function toSVG() {
boxplot.toSVG();
}
function randomBoxplots() {
const num = Math.floor(Math.random() * 15);
const boxplots = [];
for (let i = 0; i < num; i++) {
const upperWhisker = Math.random() * 10;
const lowerWhisker = upperWhisker - Math.random() * 10;
const upperQuartile = upperWhisker - Math.abs(upperWhisker - lowerWhisker) / 4;
const lowerQuartile = upperWhisker - Math.abs(upperWhisker - lowerWhisker) / 2;
const median = upperWhisker - Math.abs(upperWhisker - lowerWhisker) / 3;
boxplots.push({
group: 'Boxplot: ' + i,
upperWhisker,
upperQuartile,
median,
lowerQuartile,
lowerWhisker
});
}
return boxplots;
}
function update() {
boxplot.update({
caption: 'Random Boxplot',
xAxisLabel: 'X Axis Values',
yAxisLabel: 'Y Axis Values',
data: randomBoxplots(),
});
}
</script>
<style>
body {
display: flex;
flex-direction: row;
}
#boxplot-controls {
display: flex;
flex-direction: column;
}
#boxplot-container {
width: 50vw;
}
</style>
\ No newline at end of file
.ac-box-line {
stroke: #000;
stroke-width: 2px;
shape-rendering: crispedges;
}
.ac-box-median {
stroke: #000;
stroke-width: 3px;
shape-rendering: crispedges;
}
.ac-box-upper-whisker {
stroke: #000;
stroke-width: 2px;
shape-rendering: crispedges;
}
.ac-box-lower-whisker {
stroke: #000;
stroke-width: 2px;
shape-rendering: crispedges;
}
.ac-box-box {
fill: rgb(30, 144, 255);
stroke: none;
shape-rendering: crispedges;
}
\ No newline at end of file
......@@ -34,7 +34,7 @@ export default class extends Chart {
const x = d3.scaleBand()
.domain(groups)
.range([0, width])
.paddingInner(1)
.paddingInner(0.5)
.paddingOuter(0.5);
const maxValue = (() => {
......@@ -70,10 +70,10 @@ export default class extends Chart {
.append('rect')
.attr('class', 'ac-box-box')
.merge(box)
.attr('x', d => x(d.group))
.attr('x', d => x(d.group) - x.bandwidth() / 2)
.attr('y', d => y(d.upperQuartile))
.attr('width', x.bandwidth())
.attr('height', d => y(d.upperQuartile) - y(d.lowerQuartile));
.attr('height', d => y(d.lowerQuartile) - y(d.upperQuartile));
box.exit()
.remove();
......@@ -85,9 +85,9 @@ export default class extends Chart {
.append('line')
.attr('class', 'ac-box-line')
.merge(line)
.attr('x1', d => x(d.label))
.attr('x1', d => x(d.group))
.attr('y1', d => y(d.upperWhisker))
.attr('x2', d => x(d.label))
.attr('x2', d => x(d.group))
.attr('y2', d => y(d.lowerWhisker));
line.exit()
......@@ -98,11 +98,11 @@ export default class extends Chart {
upperWhisker.enter()
.append('line')
.attr('class', '.ac-box-upper-whisker')
.attr('class', 'ac-box-upper-whisker')
.merge(upperWhisker)
.attr('x1', d => x(d.label) - x.bandwidth() / 4)
.attr('x1', d => x(d.group) - x.bandwidth() / 4)
.attr('y1', d => y(d.upperWhisker))
.attr('x2', d => x(d.label) + x.bandwidth() / 4)
.attr('x2', d => x(d.group) + x.bandwidth() / 4)
.attr('y2', d => y(d.upperWhisker));
upperWhisker.exit()
......@@ -113,11 +113,11 @@ export default class extends Chart {
lowerWhisker.enter()
.append('line')
.attr('class', '.ac-box-lower-whisker')
.attr('class', 'ac-box-lower-whisker')
.merge(lowerWhisker)
.attr('x1', d => x(d.label) - x.bandwidth() / 4)
.attr('x1', d => x(d.group) - x.bandwidth() / 4)
.attr('y1', d => y(d.lowerWhisker))
.attr('x2', d => x(d.label) + x.bandwidth() / 4)
.attr('x2', d => x(d.group) + x.bandwidth() / 4)
.attr('y2', d => y(d.lowerWhisker));
lowerWhisker.exit()
......@@ -128,11 +128,11 @@ export default class extends Chart {
median.enter()
.append('line')
.attr('class', '.ac-box-median')
.attr('class', 'ac-box-median')
.merge(median)
.attr('x1', d => x(d.label) - x.bandwidth() / 2)
.attr('x1', d => x(d.group) - x.bandwidth() / 2)
.attr('y1', d => y(d.median))
.attr('x2', d => x(d.label) + x.bandwidth() / 2)
.attr('x2', d => x(d.group) + x.bandwidth() / 2)
.attr('y2', d => y(d.median));
median.exit()
......
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