scatterPlot.js

import {

scaleLinear,

extent,

axisLeft,

axisBottom,

transition,

} from 'd3';

export const scatterPlot = () => {

let width;

let height;

let data;

let xValue;

let yValue;

let margin;

let radius;

let xLabel;

const my = (selection) => {

// determine x/y values

// domain - functional data must map to range - pixels on screen

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,

]); // flip y values 0,0 is top left, top by flipping it becomes left bottom

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

x: x(xValue(d)),

y: y(yValue(d)),

}));

Exercise 9 Animate Dynamic D3 scatterplot

Last edited Jan 20, 2023

Created on Jan 20, 2023

Example Dynamic scatterplot

Documentation on animation form new/changed objects: https://observablehq.com/@d3/selection-join

In example there are cases for

MIT Licensed