[Ex.10] Animated Reusable D3 Scatter Plot with labels

scatterPlot.js

import {

scaleLinear,

extent,

axisLeft,

axisBottom,

transition,

} from 'd3';

export const scatterPlot = () => {

let width;

let height;

let data;

let xValue;

let yValue;

let xLabel;

let yLabel;

let margin;

let radius;

const my = (selection) => {

const x = scaleLinear()

.domain(extent(data, xValue))

.range([margin.left, width - margin.right]);

const y = scaleLinear()

.domain(extent(data, yValue))

.range([height - margin.bottom, margin.top]);

const marks = data.map((d) => ({

x: x(xValue(d)),

y: y(yValue(d)),

}));

const t = transition().duration(1000);

const positionCircles = (circles) => {

Last edited Jun 14, 2021

Created on May 25, 2021

MIT Licensed