d3-canvas-5

plot.js

const container = d3.select('.scatter-container');

// Init SVG
const svgChart = container.append('svg:svg')
   .attr('width', outerWidth)
   .attr('height', outerHeight)
   .attr('class', 'svg-plot')
   .append('g')
   .attr('transform', `translate(${margin.left}, ${margin.top})`);

// Init Canvas
const canvasChart = container.append('canvas')
   .attr('width', width)
   .attr('height', height)
   .style('margin-left', margin.left + 'px')
   .style('margin-top', margin.top + 'px')
   .attr('class', 'canvas-plot');

const context = canvasChart.node().getContext('2d');