CRUD works

app.css

@@ -0,0 +1,28 @@
+circle {
+	r:5;
+	fill: black;
+	transition: r 0.5s linear, fill 0.5s linear; /* add this transition to original code */
+
+}
+svg {
+	overflow:visible;
+	margin-bottom: 50px;
+}
+body {
+	margin: 20px 40px;
+}
+table, th, td {
+	border: 1px solid black;
+}
+th, td {
+	padding:10px;
+	text-align: center;
+}
+/* add this css for the hover state */
+circle:hover {
+	r:10;
+	fill: blue;
+}
+circle:active {
+	fill: red;
+}

app.js

@@ -0,0 +1,137 @@
+const WIDTH = 800;
+const HEIGHT = 600;
+let runs = [
+	{
+		id: 1,
+		date: 'October 1, 2017 at 4:00PM',
+		distance: 5.2
+	},
+	{
+		id: 2,
+		date: 'October 2, 2017 at 5:00PM',
+		distance: 7.0725
+	},
+	{
+		id: 3,
+		date: 'October 3, 2017 at 6:00PM',
+		distance: 8.7
+	}
+];
+
+d3.select('svg')
+	.style('width', WIDTH)
+	.style('height', HEIGHT);
+
+const parseTime = d3.timeParse("%B%e, %Y at %-I:%M%p");
+const formatTime = d3.timeFormat("%B%e, %Y at %-I:%M%p");
+const xScale = d3.scaleTime();
+xScale.range([0,WIDTH]);
+const xDomain = d3.extent(runs, (datum, index) => {
+	return parseTime(datum.date);
+});
+xScale.domain(xDomain);
+
+const yScale = d3.scaleLinear(); //create the scale
+yScale.range([HEIGHT, 0]); //set the visual range (e.g. 600 to 0)
+const yDomain = d3.extent(runs, (datum, index) => {
+	return datum.distance; //compare distance properties of each item in the data array
+})
+yScale.domain(yDomain);
+
+const render = () => {
+
+	//adjust the code at the top of your render function
+	d3.select('#points').html(''); //clear out all circles when rendering
+	d3.select('#points').selectAll('circle') //add circles to #points group, not svg
+		.data(runs)
+		.enter()
+		.append('circle');    
+
+	d3.selectAll('circle').data(runs)
+		.attr('cy', (datum, index) => {
+			return yScale(datum.distance);
+		});
+
+	d3.selectAll('circle')
+		.attr('cx', (datum, index) => {
+			return xScale(parseTime(datum.date)); //use parseTime to convert the date string property on the datum object to a Date object, which xScale then converts to a visual value
+		});
+
+	//put this at the bottom of the render function, so that click handlers are attached when the circle is created
+	d3.selectAll('circle').on('click', (event, datum) => {
+		event.stopPropagation(); //stop click event from propagating to the SVG element and creating a run
+		runs = runs.filter((run, index) => { //create a new array that has removed the run with the correct id.  Set it to the runs var
+			return run.id != datum.id;
+		});
+		render(); //re-render dots
+		createTable(); //re-render table
+	});
+
+	const drag = function(event, datum) {
+		const x = event.x;
+		const y = event.y;
+		d3.select(this).attr('cx', x);
+		d3.select(this).attr('cy', y);
+	}
+
+	const dragEnd = (event, datum) => {
+		const x = event.x;
+		const y = event.y;
+
+		const date = xScale.invert(x);
+		const distance = yScale.invert(y);
+
+		datum.date = formatTime(date);
+		datum.distance = distance;
+		createTable();
+	}
+
+	const dragBehavior = d3.drag()
+		.on('drag', drag)
+		.on('end', dragEnd);
+	d3.selectAll('circle').call(dragBehavior);
+
+}
+
+render();
+
+const bottomAxis = d3.axisBottom(xScale); //pass the appropriate scale in as a parameter
+d3.select('svg')
+	.append('g') //put everything inside a group
+	.call(bottomAxis) //generate the axis within the group
+	.attr('transform', 'translate(0,'+HEIGHT+')'); //move it to the bottom
+
+const leftAxis = d3.axisLeft(yScale);
+d3.select('svg')
+	.append('g')
+	.call(leftAxis); //no need to transform, since it's placed correctly initially
+
+const createTable = () => {
+	d3.select('tbody').html(''); //clear out all rows from the table
+	for (let i = 0; i < runs.length; i++) {
+		const row = d3.select('tbody').append('tr');
+		row.append('td').html(runs[i].id);
+		row.append('td').html(runs[i].date);
+		row.append('td').html(runs[i].distance);
+	}
+}
+
+createTable();
+
+d3.select('svg').on('click', (event) => {
+	const x = event.offsetX; //gets the x position of the mouse relative to the svg element
+	const y = event.offsetY; //gets the y position of the mouse relative to the svg element
+
+	const date = xScale.invert(x) //get a date value from the visual point that we clicked on
+	const distance = yScale.invert(y); //get a numeric distance value from the visual point that we clicked on
+
+	const newRun = { //create a new "run" object
+		id: ( runs.length > 0 ) ? runs[runs.length-1].id+1 : 1, //add this line
+		date: formatTime(date), //format the date object created above to a string
+		distance: distance //add the distance
+	}
+	runs.push(newRun); //push the new run onto the runs array
+	createTable(); //render the table
+	render(); //add this line
+});
+

index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<link rel="stylesheet" href="app.css">
+	</head>
+	<body>
+		<svg>
+			<g id="points"></g>
+		</svg>
+		<table>
+			<thead>
+				<tr>
+					<th>id</th>
+					<th>date</th>
+					<th>distance</th>
+				</tr>
+			</thead>
+			<tbody>
+			</tbody>
+		</table>
+		<script src="https://d3js.org/d3.v7.min.js"></script>
+		<script src="app.js"></script>
+	</body>
+</html>

notes.txt

@@ -0,0 +1,5 @@
+- D3.md
+	- check var vs const/let declarations
+	- check function vs ()=>{} declarations
+- SCATTER_PLOT.md
+	- https://github.com/mahuntington/d3-notes/blob/notes/SCATTER_PLOT.md#drag-an-element