import { scaleLinear, axisLeft, extent } from 'd3'; import { axes } from '@curran/responsive-axes'; export const viz = ( svg, { data, xValue, xAxisLabelText, xAxisLabelOffset, yValue, yAxisLabelText, yAxisLabelOffset, marginLeft, marginTop, marginRight, marginBottom, width, height, innerRectFill, circleRadius, circleOpacity, customColor, }, ) => { const xScale = scaleLinear(extent(data, xValue), [ marginLeft, width - marginRight, ]); const yScale = scaleLinear(extent(data, yValue), [ height - marginBottom, marginTop, ]); const innerWidth = width - marginLeft - marginRight; const innerHeight = height - marginTop - marginBottom; svg .selectAll('rect') .data([null]) .join('rect') .attr('x', marginLeft) .attr('y', marginTop) .attr('width', innerWidth) .attr('height', innerHeight) .attr('fill', innerRectFill); // Circles svg .selectAll('circle') .data(data) .join('circle') .attr('cx', (d) => xScale(xValue(d))) .attr('cy', (d) => yScale(yValue(d))) .attr('r', circleRadius) .attr('opacity', circleOpacity) .attr('fill', customColor); axes(svg, { width, height, xScale, xAxisLabelText, xAxisLabelOffset, yScale, yAxisLabelText, yAxisLabelOffset, marginLeft, marginBottom, }); };