For creating scatterplot chart you can use the following script:
var chart = new Taucharts.Chart({
data: defData,
type: 'scatterplot',
x: 'cycleTime',
y: 'effort',
color: 'team',
size: 'count'
});
chart.renderTo('#scatter');
Check encoding section to see how to apply colors.
Use guide property for some advanced settings. Here is an example that sets custom labels for axes and custom colors 'color-red'
,'color-green'
,'color-blue'
for elements.
JavaScript
var chart = new Taucharts.Chart({
guide: {
x: {label:'Cycle Time in days'}, // custom label for X axis
y: {label:'Effort in points'}, // custom label for Y axis
padding: {b:40,l:40,t:10,r:10}, // chart paddings
color: { // custom colors
brewer: ['color-red', 'color-green', 'color-blue']
}
},
data: defData,
type: 'scatterplot',
x: 'cycleTime',
y: 'effort',
color: 'team',
size: 'count'
});
CSS
.tau-chart__legend__guide--color.color-red,
.color-red {
fill: red;
background-color: red;
}
.tau-chart__legend__guide--color.color-green,
.color-green {
fill: green;
background-color:green;
}
.tau-chart__legend__guide--color.color-blue,
.color-blue {
fill: blue;
background-color:blue;
}