function scatter (params) {
var width = params.width || 400,
height = params.height || 400,
margin = {
top: 5,
right: 15,
bottom: 20,
left: 35
},
container = params.container,
criteria = params.criteria,
data = params.data,
translation = params.translation || [0, 0],
chartVisible = params.visible || true,
colors = {
green: params.colors ? params.colors.green : '#1BBC9B',
grey: params.colors ? params.colors.grey: '#E1E5EC'
},
circleRadius = 3,
chart;
function main () {
var chartWidth = width - margin.left - margin.right;
var chartHeight = height - margin.top - margin.bottom;
var criteriaX = criteria[0];
var criteriaY = criteria[1];
var dataExtentX = extent(data, d => +d[criteriaX]);
var dataExtentY = extent(data, d => +d[criteriaY]);
var currentValueX = params.currentValueX || dataExtentX[0];
var currentValueY = params.currentValueY || dataExtentY[0];
var xScale = scaleLinear()
.range([0, chartWidth])
.domain(dataExtentX);
var yScale = scaleLinear()
.range([chartHeight, 0])
.domain(dataExtentY);
// drawing
chart = patternify(container, 'g', 'scatter')
.attr('pointer-events', 'none')
.attr('transform', `translate(${translation[0]}, ${translation[1]})`)
.attr('opacity', chartVisible ? 1 : 0);
var innerChart = patternify(container, 'g', 'scatter-inner')
.attr('pointer-events', 'none')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
var xAxis = patternify(innerChart, 'g', 'x-axis')
.attr('transform', `translate(0, ${chartHeight})`)
.call(
axisBottom(xScale)
)
var yAxis = patternify(innerChart, 'g', 'y-axis')
.call(
axisLeft(yScale)
);
var circle = patternify(innerChart, 'circle', 'dot', data)
.attr('r', circleRadius)
.attr('cx', d => xScale(+d[criteriaX]))
.attr('cy', d => yScale(+d[criteriaY]))
.attr('fill', d => {
var x = +d[criteriaX];
var y = +d[criteriaY];
if (x >= currentValueX && y >= currentValueY) {
return colors.green
}
return colors.grey
})
var currentLineX = patternify(innerChart, 'line', 'current-line-x')
.attr('x1', xScale(Math.ceil(currentValueX)) - circleRadius)
.attr('x2', xScale(Math.ceil(currentValueX)) - circleRadius)
.attr('y1', 0)
.attr('y2', chartHeight)
.attr('stroke', '#2F353B')
.attr('stroke-width', '1.5px')
.attr('stroke-dasharray', '5 5')
var currentLineY = patternify(innerChart, 'line', 'current-line-y')
.attr('y1', yScale(Math.ceil(currentValueY)) + circleRadius)
.attr('y2', yScale(Math.ceil(currentValueY)) + circleRadius)
.attr('x1', 0)
.attr('x2', chartWidth)
.attr('stroke', '#2F353B')
.attr('stroke-width', '1.5px')
.attr('stroke-dasharray', '5 5')
return main;
}
return main();
}