COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework

scatterPlot.js

import {

scaleLinear,

scaleTime,

extent,

axisLeft,

axisBottom,

timeFormat,

} from 'd3';

export const scatterPlot = () => {

let width;

let height;

let data;

let xValue;

let yValue;

let margin;

let radius;

const my = (selection) => {

data.forEach((d) => (d.date = new Date(d.date)));

const x = scaleTime()

.domain(extent(data, (d) => d.date))

.range([100, width - 50])

.nice();

const y = scaleLinear()

.domain(extent(data, yValue))

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

.nice();

const axisBottomLabelYear = axisBottom(x)

.ticks(d3.timeYear.every(1))

.tickPadding([30])

.tickFormat(timeFormat('%Y'));

Last edited May 23, 2021

Created on May 09, 2021

A reusable scatter plot inspired by Towards Reusable Charts.

MIT Licensed