gordlea · March 9, 2023 07:19 · dbardele · Jun 10, 2019 · wbtittle · Nov 12, 2019
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style type="text/css">
 /* 13. Basic Styling with CSS */

 /* Style the lines by removing the fill and applying a stroke */
 .line {
    fill: none;
    stroke: #ffab00;
    stroke-width: 3;
 }
  
 .overlay {
  fill: none;
  pointer-events: all;
 }

 /* Style the dots by assigning a fill and stroke */
 .dot {
    fill: #ffab00;
    stroke: #fff;
 }
  
  .focus circle {
  fill: none;
  stroke: steelblue;
 }

 </style>
 <!-- Body tag is where we will append our SVG and SVG objects-->
 <body>
 </body>

 <!-- Load in the d3 library -->
 <script src="https://d3js.org/d3.v5.min.js"></script>
 <script>

 // 2. Use the margin convention practice 
 var margin = {top: 50, right: 50, bottom: 50, left: 50}
  , width = window.innerWidth - margin.left - margin.right // Use the window's width 
  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

 // The number of datapoints
 var n = 21;

 // 5. X scale will use the index of our data
 var xScale = d3.scaleLinear()
    .domain([0, n-1]) // input
    .range([0, width]); // output

 // 6. Y scale will use the randomly generate number 
 var yScale = d3.scaleLinear()
    .domain([0, 1]) // input 
    .range([height, 0]); // output 

 // 7. d3's line generator
 var line = d3.line()
    .x(function(d, i) { return xScale(i); }) // set the x values for the line generator
    .y(function(d) { return yScale(d.y); }) // set the y values for the line generator 
    .curve(d3.curveMonotoneX) // apply smoothing to the line

 // 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
 var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

 // 1. Add the SVG to the page and employ #2
 var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 // 3. Call the x axis in a group tag
 svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

 // 4. Call the y axis in a group tag
 svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

 // 9. Append the path, bind the data, and call the line generator 
 svg.append("path")
    .datum(dataset) // 10. Binds data to the line 
    .attr("class", "line") // Assign a class for styling 
    .attr("d", line); // 11. Calls the line generator 

 // 12. Appends a circle for each datapoint 
 svg.selectAll(".dot")
    .data(dataset)
  .enter().append("circle") // Uses the enter().append() method
    .attr("class", "dot") // Assign a class for styling
    .attr("cx", function(d, i) { return xScale(i) })
    .attr("cy", function(d) { return yScale(d.y) })
    .attr("r", 5)
      .on("mouseover", function(a, b, c) { 
  			console.log(a) 
        this.attr('class', 'focus')
 		})
      .on("mouseout", function() {  })
 //       .on("mousemove", mousemove);

 //   var focus = svg.append("g")
 //       .attr("class", "focus")
 //       .style("display", "none");

 //   focus.append("circle")
 //       .attr("r", 4.5);

 //   focus.append("text")
 //       .attr("x", 9)
 //       .attr("dy", ".35em");

 //   svg.append("rect")
 //       .attr("class", "overlay")
 //       .attr("width", width)
 //       .attr("height", height)
 //       .on("mouseover", function() { focus.style("display", null); })
 //       .on("mouseout", function() { focus.style("display", "none"); })
 //       .on("mousemove", mousemove);
  
 //   function mousemove() {
 //     var x0 = x.invert(d3.mouse(this)[0]),
 //         i = bisectDate(data, x0, 1),
 //         d0 = data[i - 1],
 //         d1 = data[i],
 //         d = x0 - d0.date > d1.date - x0 ? d1 : d0;
 //     focus.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")");
 //     focus.select("text").text(d);
 //   }
 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">
	/* 13. Basic Styling with CSS */

	/* Style the lines by removing the fill and applying a stroke */
	.line {
	fill: none;
	stroke: #ffab00;
	stroke-width: 3;
	}

	.overlay {
	fill: none;
	pointer-events: all;
	}

	/* Style the dots by assigning a fill and stroke */
	.dot {
	fill: #ffab00;
	stroke: #fff;
	}

	.focus circle {
	fill: none;
	stroke: steelblue;
	}

	</style>
	<!-- Body tag is where we will append our SVG and SVG objects-->
	<body>
	</body>

	<!-- Load in the d3 library -->
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>

	// 2. Use the margin convention practice
	var margin = {top: 50, right: 50, bottom: 50, left: 50}
	, width = window.innerWidth - margin.left - margin.right // Use the window's width
	, height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

	// The number of datapoints
	var n = 21;

	// 5. X scale will use the index of our data
	var xScale = d3.scaleLinear()
	.domain([0, n-1]) // input
	.range([0, width]); // output

	// 6. Y scale will use the randomly generate number
	var yScale = d3.scaleLinear()
	.domain([0, 1]) // input
	.range([height, 0]); // output

	// 7. d3's line generator
	var line = d3.line()
	.x(function(d, i) { return xScale(i); }) // set the x values for the line generator
	.y(function(d) { return yScale(d.y); }) // set the y values for the line generator
	.curve(d3.curveMonotoneX) // apply smoothing to the line

	// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
	var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

	// 1. Add the SVG to the page and employ #2
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// 3. Call the x axis in a group tag
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

	// 4. Call the y axis in a group tag
	svg.append("g")
	.attr("class", "y axis")
	.call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

	// 9. Append the path, bind the data, and call the line generator
	svg.append("path")
	.datum(dataset) // 10. Binds data to the line
	.attr("class", "line") // Assign a class for styling
	.attr("d", line); // 11. Calls the line generator

	// 12. Appends a circle for each datapoint
	svg.selectAll(".dot")
	.data(dataset)
	.enter().append("circle") // Uses the enter().append() method
	.attr("class", "dot") // Assign a class for styling
	.attr("cx", function(d, i) { return xScale(i) })
	.attr("cy", function(d) { return yScale(d.y) })
	.attr("r", 5)
	.on("mouseover", function(a, b, c) {
	console.log(a)
	this.attr('class', 'focus')
	})
	.on("mouseout", function() { })
	// .on("mousemove", mousemove);

	// var focus = svg.append("g")
	// .attr("class", "focus")
	// .style("display", "none");

	// focus.append("circle")
	// .attr("r", 4.5);

	// focus.append("text")
	// .attr("x", 9)
	// .attr("dy", ".35em");

	// svg.append("rect")
	// .attr("class", "overlay")
	// .attr("width", width)
	// .attr("height", height)
	// .on("mouseover", function() { focus.style("display", null); })
	// .on("mouseout", function() { focus.style("display", "none"); })
	// .on("mousemove", mousemove);

	// function mousemove() {
	// var x0 = x.invert(d3.mouse(this)[0]),
	// i = bisectDate(data, x0, 1),
	// d0 = data[i - 1],
	// d1 = data[i],
	// d = x0 - d0.date > d1.date - x0 ? d1 : d0;
	// focus.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")");
	// focus.select("text").text(d);
	// }
	</script>