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

added title option

parent 528cc689
......@@ -24,8 +24,8 @@
function generateRandomData(numOfPoints, minValue, maxValue) {
const values = [];
for (let i = 0; i < numOfPoints; i++) {
const x = Math.random() * (maxValue - minValue + 1) + minValue;
const y = Math.random() * (maxValue - minValue + 1) + minValue;
const x = parseInt(Math.random() * (maxValue - minValue + 1) + minValue, 10);
const y = parseInt(Math.random() * (maxValue - minValue + 1) + minValue, 10);
const z = Math.random() < 0.33 ? 0 : Math.random() > 0.66 ? 1 : 2;
values.push([x, y, z]);
}
......@@ -41,7 +41,8 @@
function update() {
scatterplot.update({
values: generateRandomData(1000, -100, 100),
categories: { name: 'Gender', 0: 'male male male male male male male male male male male', 2: 'female female female female female female female', 1: 'NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA'},
categories: { name: 'Gender', 0: 'male', 2: 'female', 1: 'N/A'},
title: 'Scatterplot',
callback: d => console.log(d),
});
}
......
......@@ -3,6 +3,7 @@ import Chart from '../Chart';
import '../../assets/css/scatterplot.css';
const ANIMATION_DURATION = 500;
const MAX_FONT_SIZE = 20;
export default class extends Chart {
constructor({ container }) {
......@@ -37,6 +38,10 @@ export default class extends Chart {
.append('g')
.attr('class', 'ac-scatter-y-axis ac-scatter-axis');
this.titleHeader = this.svg
.append('text')
.attr('class', 'ac-scatter-title');
this.brush = this.svg
.append('g')
.attr('class', 'ac-scatter-brush');
......@@ -49,6 +54,7 @@ export default class extends Chart {
this.values = [];
this.categories = {};
this.title = '';
this.callback = () => {};
this.colorToTooltipMap = {};
}
......@@ -64,12 +70,14 @@ export default class extends Chart {
render({
values,
categories,
title,
callback,
_selectedCategory,
_skipAnimation,
}) {
this.values = typeof values === 'undefined' ? this.values : values;
this.categories = typeof categories === 'undefined' ? this.categories : categories;
this.title = typeof title === 'undefined' ? this.title : title;
this.callback = typeof callback === 'undefined' ? this.callback : callback;
const categoryKeys = Object.keys(this.categories)
......@@ -77,7 +85,7 @@ export default class extends Chart {
.map(d => parseInt(d, 10));
const margin = {
top: 20,
top: 30,
right: 20,
bottom: this.containerWidth / 20,
left: this.containerWidth / 20,
......@@ -177,6 +185,14 @@ export default class extends Chart {
this.tooltip.style('visibility', 'hidden');
});
this.titleHeader
.attr('x', width / 2)
.attr('y', -margin.top / 2)
.attr('text-anchor', 'middle')
.style('dominant-baseline', 'central')
.style('font-size', `${margin.top > MAX_FONT_SIZE ? MAX_FONT_SIZE : margin.top}px`)
.text(this.title);
const point = this.memory.selectAll('circle')
.data(this.values, d => `${d[0]}:${d[1]}:${d[2]}`);
......@@ -191,7 +207,7 @@ export default class extends Chart {
.attr('dx', d => x(d[0]))
.attr('dy', d => y(d[1]))
.attr('data-z', d => d[2])
.attr('r', Math.ceil(width / 200))
.attr('r', Math.ceil(width / 150))
.attr('fillStyle', d => color(d[2]))
.attr('title', d => `
${d[0]}</br>
......@@ -200,6 +216,9 @@ ${!categoryKeys ? d[2] : this.categories[d[2]]}</br>
`);
point.exit()
.transition()
.duration(ANIMATION_DURATION)
.attr('r', 0)
.remove();
function wrap(nodes, maxWidth) {
......@@ -302,6 +321,8 @@ ${!categoryKeys ? d[2] : this.categories[d[2]]}</br>
);
ctx.fillStyle = node.getAttribute('fillStyle');
ctx.fill();
ctx.strokeStyle = '#fff';
ctx.stroke();
});
}, 0);
if (elapsed > ANIMATION_DURATION * 2 || _skipAnimation) {
......
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