scatterplotCanvas = {
const context = DOM.context2d(width, height);
let domainX = d3.extent(movies, d => d[attributeX]);
let domainY = d3.extent(movies, d => d[attributeY]);
let domainRating = d3.extent(movies, d => d['rating']);
console.log('Test' + domainRating);
function mapX(value, bubbleSize) {
const originX = margin.left + bubbleSize;
const distanceX = ( width - margin.left - margin.right - 2*bubbleSize ) *
(value - domainX[0]) / (domainX[1] - domainX[0])
value = originX + distanceX;
return value;
}
function mapY(value,bubbleSize) {
const originY = height - margin.bottom - bubbleSize;
const distanceY = ( height - margin.top - margin.bottom - 2*bubbleSize) *
(value - domainY[0]) / (domainY[1] - domainY[0])
value = originY - distanceY;
return value;
}
function draw() {
context.clearRect(0, 0, width, height);
context.fillStyle = backgroundColor;
context.fillRect(
margin.left,
margin.top,
width - margin.left - margin.right,
height - margin.top - margin.bottom
);
context.fillStyle = "#263238";
// console.log(movies);
movies.forEach(item => {
//
if(item['original_language'] == 'en'){
//Sets the style for shapes' outlines to
context.strokeStyle = 'white';
context.fillStyle = 'rgba(70, 130, 180, 0.8)'
} else {
// Use colorblind friendly color
context.fillStyle = '#b8860b'
context.strokeStyle = 'white';
}
context.beginPath();
//To get a properly weighted scale, one must scale each disk's radius to the square root of the corresponding data value.
//Instead, make sure that the bubbles’ areas correspond with the third variable’s values. In the same scenario as above, a point with twice the value of another point should have sqrt(2) = 1.41 times the diameter or radius so that its area is twice the smaller point’s. https://chartio.com/learn/charts/bubble-chart-complete-guide/
let bubbleSize = radius * (Math.sqrt( item['rating']/domainRating[0]));
context.arc(
//Change paramenters of the function for bubbleplot task.
mapX(item[attributeX],bubbleSize),
mapY(item[attributeY],bubbleSize),
bubbleSize ,
0,
2 * Math.PI
);
//Disable the fullfill color in scatterplot
context.fill();
//Sets the style for shapes' outlines to mitigate overdraw.
context.stroke();
});
}
draw();
return context.canvas;
}