Line Chart-project

forked from ZoeLeBlanc's block: Line Chart

forked from cmuth001's block: Line Chart-project

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .line {
            fill: none;
            stroke: #000;
            stroke-width: 1.5px;
        }
  </style>
</head>
<svg width="960" height="500">
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
 		var data = [];
    var svg = d3.select("svg"),
            margin = {
                top: 20,
                right: 20,
                bottom: 20,
                left: 40
            },
        		width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom;
      var g1 = svg.append("g")
      		.attr("transform", "translate(" + margin.left + "," +margin.top + ")");
    const hpFormatter = d3.format(".1f");
   var parseTime = d3.timeParse("%Y"),
        	dataValue = function (d) { return +d.athletes; }
        	color = "steelblue";
    d3.csv('https://www.cs.odu.edu/~cmuthyal/cs725/project.csv')
  		.then(function(data) {
       console.log(data);
      data = data.map(function (d, i) {
        d.year = +d.year;
        d.athletes = +d.athletes;
        console.log(d.athletes);
        
                return { time: d.Year, value: d.athletes };
            console.log(value)
            });
      
      
    
      var x = d3.scaleTime()
                .rangeRound([0, width ])
                .domain(d3.extent(data, function(d) { return d.time; }));

g.append("path")
                .attr("class", "data");
      		
      		function transition(path) {
              path.transition()
                  .duration(2000).attrTween("stroke-dasharray", tweenDash);
    }
    function tweenDash() {
        var l = this.getTotalLength(),
            i = d3.interpolateString("0," + l, l + "," + l);
        return function (t) { return i(t); };
    }
      		g.select("path.data")
                .datum(data)
                .attr("d", line)
          			.call(transition);
      
  	});

</script>
</body>

https://d3js.org/d3.v5.min.js