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

added legend skeleton

parent 968d5ca4
......@@ -26,7 +26,7 @@
for (let i = 0; i < numOfPoints; i++) {
const x = Math.random() * (maxValue - minValue + 1) + minValue;
const y = Math.random() * (maxValue - minValue + 1) + minValue;
const z = Math.random() * (maxValue - minValue + 1) + minValue;
const z = Math.random() < 0.33 ? 0 : Math.random() > 0.66 ? 1 : 2;
values.push([x, y, z]);
}
return values;
......@@ -41,6 +41,7 @@
function update() {
scatterplot.update({
values: generateRandomData(1000, -100, 100),
categories: { name: 'Gender', 0: 'male', 1: 'female', 2: 'N/A'},
callback: d => console.log(d),
});
}
......
......@@ -18,8 +18,12 @@ export default class extends Chart {
this.tooltip = d3.select(container)
.append('div')
.attr('class', 'ac-scatter-tooltip');
this.legend = this.svg
.append('g')
.attr('class', 'ac-scatter-legend');
this.values = [];
this.categories = {};
this.callback = () => {};
this.colorToTooltipMap = {};
}
......@@ -34,9 +38,11 @@ export default class extends Chart {
render({
values,
categories,
callback,
}) {
this.values = typeof values === 'undefined' ? this.values : values;
this.categories = typeof categories === 'undefined' ? this.categories : categories;
this.callback = typeof callback === 'undefined' ? this.callback : callback;
const margin = {
......@@ -61,8 +67,15 @@ export default class extends Chart {
.domain(d3.extent(values.map(d => d[1])))
.range([height - padding, padding]);
const color = d3.scaleSequential(d3.interpolateBlues)
.domain(d3.extent(values.map(d => d[2])));
let color;
if (typeof this.categories.name === 'undefined') {
color = d3.scaleSequential(d3.interpolateBlues)
.domain(d3.extent(values.map(d => d[2])));
} else {
color = d3.scaleOrdinal()
.domain(Object.keys(this.categories).filter(d => d !== 'name'))
.range(d3.schemeSet2);
}
this.canvas
.attr('width', width)
......@@ -158,12 +171,33 @@ export default class extends Chart {
.attr('title', d => `
${d[0]}</br>
${d[1]}</br>
${d[2]}</br>
${typeof this.categories.name === 'undefined' ? d[2] : this.categories[d[2]]}</br>
`);
point.exit()
.remove();
const legendElementHeight = height / 20;
const legendElementWidth = width / 20;
this.legend
.attr('transform', `translate(${width - legendElementWidth}, ${legendElementHeight})`);
const legendElement = this.legend.selectAll('.ac-scatter-legend-element')
.data(Object.keys(this.categories).filter(d => d !== 'name'));
legendElement.enter()
.append('g')
.attr('class', 'ac-scatter-legend-element')
.append('rect')
.attr('y', (_, i) => legendElementHeight * i)
.attr('height', legendElementHeight)
.attr('width', legendElementWidth)
.attr('fill', d => color(d));
legendElement.exit()
.remove();
const nodes = this.memory.selectAll('circle').nodes();
const ctx = this.canvas.node().getContext('2d');
const hiddenCtx = this.hiddenCanvas.getContext('2d');
......
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