index.js
//Imports
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { select, range } from 'd3';
import { Dropdown } from './Dropdown';
//Select svg html element
const svg = d3.select('svg');
//Spacing Constants
const width = 960;
const height = 500;
const dotGridMargin = 30;
const dotGridWidth = (width / 2) - (dotGridMargin * 2);
const dotGridHeight = height - dotGridMargin * 2;
//Order of colors in which they appear
const colors = [
'#f04343',
Alt + Click on a hex color
Open a color picker to modify the color
'#de8cd6',
Alt + Click on a hex color
Open a color picker to modify the color
'#8c61c9',
Alt + Click on a hex color
Open a color picker to modify the color
'#2b64d3',
Alt + Click on a hex color
Open a color picker to modify the color
'#2ad1d4',
Alt + Click on a hex color
Open a color picker to modify the color
'#72cf8a',
Alt + Click on a hex color
Open a color picker to modify the color
'#d2d949',
Alt + Click on a hex color
Open a color picker to modify the color
'#f5eb2c',
Alt + Click on a hex color
Open a color picker to modify the color
'#ffb836',
Alt + Click on a hex color
Open a color picker to modify the color
'#a36736'
Alt + Click on a hex color
Open a color picker to modify the color
];
const options = [
{ value: '0', label: 'Step 0' },
{ value: '1', label: 'Step 1'},
{ value: '2', label: 'Step 2'},
];
