Animated Scatter Plot with Menus

index.js

import { csv, select } from 'd3';

import { scatterPlot } from './scatterPlot';

import { menu } from './menu';

const csvUrl = [

'https://gist.githubusercontent.com/',

'curran/', // User

'a08a1080b88344b0c8a7/', // Id of the Gist

'raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/', // commit

'iris.csv', // File name

].join('');

const parseRow = (d) => {

d.sepal_length = +d.sepal_length;

d.sepal_width = +d.sepal_width;

d.petal_length = +d.petal_length;

d.petal_width = +d.petal_width;

return d;

};

const width = window.innerWidth;

const height = window.innerHeight;

const svg = select('body')

.append('svg')

.attr('width', width)

.attr('height', height);

const menuContainer = select('body')

.append('div')

.attr('class', 'menu-container');

const xMenu = menuContainer.append('div');

const yMenu = menuContainer.append('div');

const xName = 'petal_width';

const yName = 'petal_width';

Last edited May 31, 2021

Created on May 31, 2021

MIT Licensed