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

added title option

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