index.js
import { csv } from 'd3-fetch';
import { ScatterPlot } from './ScatterPlot';
const dataURL =
'https://vizhub.com/curran/datasets/auto-mpg.csv';
const parseRow = (d) => {
d.horsepower = +d.horsepower;
d.weight = +d.weight;
return d;
};
const main = async () => {
const scatterPlot = ScatterPlot({
data: await csv(dataURL, parseRow),
xAccessor: (d) => d.horsepower,
yAccessor: (d) => d.weight,
radius: 5,
margin: {
top: 30,
right: 30,
bottom: 50,
left: 80,
},
width: window.innerWidth,
height: window.innerHeight,
});
document.body.appendChild(scatterPlot);
};
main();
Scatter plot with D3.
Makes use of Rollup so that we can author the code using ES modules.
Inspired by the patterns found in Observable: D3 Charts
MIT Licensed