jchakko · October 28, 2019 14:32
diff --git a/cricketers.csv b/cricketers.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en-US">
 <meta charset="utf-8">
 <head>
  <!-- Load in the d3 library -->
  <script src="https://d3js.org/d3.v5.min.js"></script>
  
 <style>
 html {
  font: normal 100%/1.4 Georgia,serif;
  background: #eff4f0;
 }

 </style>
 </style>  
 </head>

 <body>
  <svg width="800" height="500"> 
    <!-- Add your SVG elements here -->   
  </svg> 
  <script>
    <!-- Add your Javascript, D3 code here -->     
    <!-- Set up the Margin -->
    let totalWidth = window.innerWidth, totalHeight = window.innerHeight-40;
    let margin = {top: 20, right: 100, bottom: 25, left: 50},
        width = totalWidth - margin.left - margin.right,
        height = totalHeight - margin.top - margin.bottom;
    
    <!-- SVG Element -->
    let svg = d3.select("svg")
              .attr("width",totalWidth)
              .attr("height",totalHeight)
              .append("g")
              .attr("transform","translate("+margin.left+","+margin.top+")");
              
    <!-- Setup Scales -->
                   
    let xTime = d3.scaleTime().domain([new Date('January 1, 1970'), new Date('July 4, 2019')]).range([0, width]);               
                   
    let yScale = d3.scaleLinear()
                   .domain([0, 15000])
                   .range([height, 0]);
    
    <!-- Setup Axis -->
    let xAxis = svg.append("g")
                  .attr("transform","translate(0,"+height+")")
                  .call(d3.axisBottom(xTime));
    let yAxis = svg.append("g")
                  .call(d3.axisLeft(yScale));

    let idScale = d3.scaleLinear().domain([1,45]).range([45,1]);                                     
    <!-- Line Generators -->      
    let lineGenerator = d3.line()
      .x(function(d) { 
        return xTime(d.date);})
      .y(function(d) { 
        return yScale(d.aggregate);})
        
    let colors = ['red','blue','green','gold',
      'orange','purple','pink','black','teal',
      '#C8B359','#03B630','#8C63FF','#214A63',
      '#FE8A99','#FFC444'];
      
                      
    <!-- Row Converter Function -->
    function parseRow(d){      
      let newRow = {} 
      newRow.name = d.name;
      let segments = d.date.split('/');
      newRow.date = new Date(segments[2] + "-" + segments[1] + "-" + segments[0]);
      newRow.runs = +d.runs;
      newRow.aggregate = +d.aggregate;
      return newRow;
    }
    
    <!-- Retrieve data from CSV -->
    d3.csv("cricketers.csv", parseRow).then(    
      function (data){       
        
        let nestedData = d3.nest()
          .key(function(d) {return d.name;})
          .entries(data);
          
        console.log(nestedData);
                            
        svg.selectAll(".line")
            .data(nestedData)
            .enter()
            .append("path")
            .attr("class", "line")
            .attr("d", function(d,i) {
              console.log(d.values);
              return lineGenerator(d.values);
            })
            .style("fill","none")
            .style("stroke", function(d,i) {
              return colors[i];
            })
            .style("opacity", .9)
            .style("stroke-width",3)
            .on("mouseover", function(d, i) {
              label.text(d.key);        
              label.style("fill", colors[i]);
              label.attr("opacity", 1);
              d3.select(this).style("stroke-width", 6)
            })
            .on("mouseout", function(d, i) {
              label.attr("opacity", 0);
              d3.select(this).style("stroke-width", 3)
            });
        
        let legend = svg.append('g')
          .attr("class", "legend");
    
        let label = legend
          .append("text")
          .attr("x", 20)
          .attr("y", 80)
          .attr("font-size", "50px")
          .text("howdy")
          .attr("opacity", 0);        
                
      }
    
    ); //End CSV

  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en-US">
	<meta charset="utf-8">
	<head>
	<!-- Load in the d3 library -->
	<script src="https://d3js.org/d3.v5.min.js"></script>

	<style>
	html {
	font: normal 100%/1.4 Georgia,serif;
	background: #eff4f0;
	}

	</style>
	</style>
	</head>

	<body>
	<svg width="800" height="500">
	<!-- Add your SVG elements here -->
	</svg>
	<script>
	<!-- Add your Javascript, D3 code here -->
	<!-- Set up the Margin -->
	let totalWidth = window.innerWidth, totalHeight = window.innerHeight-40;
	let margin = {top: 20, right: 100, bottom: 25, left: 50},
	width = totalWidth - margin.left - margin.right,
	height = totalHeight - margin.top - margin.bottom;

	<!-- SVG Element -->
	let svg = d3.select("svg")
	.attr("width",totalWidth)
	.attr("height",totalHeight)
	.append("g")
	.attr("transform","translate("+margin.left+","+margin.top+")");

	<!-- Setup Scales -->

	let xTime = d3.scaleTime().domain([new Date('January 1, 1970'), new Date('July 4, 2019')]).range([0, width]);

	let yScale = d3.scaleLinear()
	.domain([0, 15000])
	.range([height, 0]);

	<!-- Setup Axis -->
	let xAxis = svg.append("g")
	.attr("transform","translate(0,"+height+")")
	.call(d3.axisBottom(xTime));
	let yAxis = svg.append("g")
	.call(d3.axisLeft(yScale));

	let idScale = d3.scaleLinear().domain([1,45]).range([45,1]);
	<!-- Line Generators -->
	let lineGenerator = d3.line()
	.x(function(d) {
	return xTime(d.date);})
	.y(function(d) {
	return yScale(d.aggregate);})

	let colors = ['red','blue','green','gold',
	'orange','purple','pink','black','teal',
	'#C8B359','#03B630','#8C63FF','#214A63',
	'#FE8A99','#FFC444'];


	<!-- Row Converter Function -->
	function parseRow(d){
	let newRow = {}
	newRow.name = d.name;
	let segments = d.date.split('/');
	newRow.date = new Date(segments[2] + "-" + segments[1] + "-" + segments[0]);
	newRow.runs = +d.runs;
	newRow.aggregate = +d.aggregate;
	return newRow;
	}

	<!-- Retrieve data from CSV -->
	d3.csv("cricketers.csv", parseRow).then(
	function (data){

	let nestedData = d3.nest()
	.key(function(d) {return d.name;})
	.entries(data);

	console.log(nestedData);

	svg.selectAll(".line")
	.data(nestedData)
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", function(d,i) {
	console.log(d.values);
	return lineGenerator(d.values);
	})
	.style("fill","none")
	.style("stroke", function(d,i) {
	return colors[i];
	})
	.style("opacity", .9)
	.style("stroke-width",3)
	.on("mouseover", function(d, i) {
	label.text(d.key);
	label.style("fill", colors[i]);
	label.attr("opacity", 1);
	d3.select(this).style("stroke-width", 6)
	})
	.on("mouseout", function(d, i) {
	label.attr("opacity", 0);
	d3.select(this).style("stroke-width", 3)
	});

	let legend = svg.append('g')
	.attr("class", "legend");

	let label = legend
	.append("text")
	.attr("x", 20)
	.attr("y", 80)
	.attr("font-size", "50px")
	.text("howdy")
	.attr("opacity", 0);

	}

	); //End CSV

	</script>
	</body>
	</html>