JulienAssouline · March 15, 2018 14:37
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3: Loading TopoJSON data and generating SVG paths</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-timer.v1.min.js"></script>
    <style type="text/css">
 body,html{
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    font-size: 11px;
    text-align: center;
  }

  #chart{
    background-color: white;
    border: 1px solid #CCC;
  }
  


    </style>
  </head>
  <body>

 <div id="option">
 <button id="replay"> Replay </button>
 <button id="speed"> Speed up </button>
 <button id="pause"> Pause </button>
 </div>
 <p></p>

 <script>


  
 var h = 450;
 var w = 800;



 var margin = {
  right: 40,
  left: 40,
  top: 40,
  bottom: 40
 }

 var width = w - margin.right - margin.left;
 var height = h - margin.top - margin.bottom;

 var svg = d3.select("body")
  .append("svg")
  .attr("id", "chart")
  .attr("width", w)
  .attr("height", h)
  .append("g")
  .attr("transform", "translate(0" + margin.left + "," + margin.top + ")")

 var parseTime = d3.timeParse("%M:%S.%L")

 var xScale = d3.scaleTime()
    .range([0, width])

 var xScale = d3.scaleLinear()
    .range([0, width])

 var yScale = d3.scaleLinear()
      .range([height, 0])

  var xAxis = d3.axisBottom()
  .scale(xScale)
  .ticks(0)
  .tickSizeOuter(0);

 var yAxis = d3.axisLeft()
  .scale(yScale)
  .tickSizeOuter(0);

  var text = svg.append("text")
  .attr("x", 50)
  .attr("y", 40);

  

           d3.csv("olympic_skiing_Downhill_miliseconds.csv", function(error, data){
            data.forEach(function(d){
              d.Age = +d.Age
              d.Rank = +d.Rank
              d.Year = +d.Year
              d.Time_end = parseTime(d.Time_end)
              d.Time_start = parseTime(d.Time_start)
              d.time_miliseconds = +d.time_miliseconds

            })


            xScale.domain(d3.extent(data, function(d){ return d.Time_end }))  
            yScale.domain([2016, 1936])

         var circles =  svg.selectAll(".circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("r", 3)
            .attr("cx", 0)
            .attr("cy", function(d){
              return yScale(d.Year)
            })
            .style("fill", function(d){
              if(d.Gender == "Male"){
                return "blue"
              } else {
                return "red"
              }
            })
          .style("opacity", 1)


            circles.transition()
            .on("start", function(d, i) { if(i==0) startTimer() })
            .duration(function(d){
              return d.time_miliseconds / 7
            })
            .attr("cx", 720)

            var maxTime = d3.max(circles.data(), function(d){
              return d.time_miliseconds 
            })
           
            var format = d3.timeFormat("%M:%S:%L")

            function startTimer(){
              var timer = d3.timer(function(t){
                if(t > 73036 / 7){
                  timer.stop();
                  text.text("Time " + format(73036))
                } else {
                  text.text("Time " + format(t * 7))
                }
              })
            }
          
            // interupting animation 
            setTimeout(function(){
              d3.selectAll("circle").transition()
            }, 73036 / 7)


            /// replay button
            d3.select("#replay")
              .on("click", function(){
                var circles_replay = svg.selectAll("circle")
                  .transition()
                  .attr("r", 3)
                  .attr("cx", 0)
                  .attr("cy", function(d){
                    return yScale(d.Year)
                  })
                  .style("fill", function(d){
                    if(d.Gender == "Male"){
                      return "blue"
                    } else {
                      return "red"
                    }
                  })
                .style("opacity", 1)

                  circles_replay.transition()
                  .on("start", function(d, i) { if(i==0) startTimer() })
                  .duration(function(d){
                    return d.time_miliseconds / 7
                  })
                  .attr("cx", 720)

                  setTimeout(function(){
              d3.selectAll("circle").transition()
            }, 73036 / 7)

              })



              d3.select("#speed")
              .on("click", function(){
                svg.selectAll("circle")
                  .transition()
                  .duration(function(d){
                    return d.time_miliseconds / 10
                  })
                  .attr("cx", 720)

              })


              // Creating a pause and play button!!
              var pauseButton = d3.select("#pause")


              pauseButton.on("click", function(){

                var button = d3.select(this)

                if (button.text() == "Play"){


                  button.text("Pause")

                  svg.selectAll("circle")
                  .transition()
                  .duration(function(d){
                    return d.time_miliseconds / 4
                  })
                  .attr("cx", 720)
                 
                } else {

                  button.text("Play")

                  // circles.transition()
                  // .on("start", function(d, i) { if(i==0) startTimer().stop() })
                  // .duration(0)

                  svg.selectAll("circle")
                  .transition()
                  .duration(0)

                }
              })

          console.log(data)



            svg.append("g")
              .classed("axis x", true)
              .attr("transform", "translate(0," + height + ")")
              .call(xAxis);

          // y axis
          svg.append("g")
            .classed("axis y", true)
            .attr("transform", "translate(0,0)")
            .call(yAxis);




              
         

  



  })


 </script>
    
  </body>
 </html>
diff --git a/olympic_skiing_Downhill_miliseconds.csv b/olympic_skiing_Downhill_miliseconds.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3: Loading TopoJSON data and generating SVG paths</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-timer.v1.min.js"></script>
	<style type="text/css">
	body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-size: 11px;
	text-align: center;
	}

	#chart{
	background-color: white;
	border: 1px solid #CCC;
	}



	</style>
	</head>
	<body>

	<div id="option">
	<button id="replay"> Replay </button>
	<button id="speed"> Speed up </button>
	<button id="pause"> Pause </button>
	</div>
	<p></p>

	<script>



	var h = 450;
	var w = 800;



	var margin = {
	right: 40,
	left: 40,
	top: 40,
	bottom: 40
	}

	var width = w - margin.right - margin.left;
	var height = h - margin.top - margin.bottom;

	var svg = d3.select("body")
	.append("svg")
	.attr("id", "chart")
	.attr("width", w)
	.attr("height", h)
	.append("g")
	.attr("transform", "translate(0" + margin.left + "," + margin.top + ")")

	var parseTime = d3.timeParse("%M:%S.%L")

	var xScale = d3.scaleTime()
	.range([0, width])

	var xScale = d3.scaleLinear()
	.range([0, width])

	var yScale = d3.scaleLinear()
	.range([height, 0])

	var xAxis = d3.axisBottom()
	.scale(xScale)
	.ticks(0)
	.tickSizeOuter(0);

	var yAxis = d3.axisLeft()
	.scale(yScale)
	.tickSizeOuter(0);

	var text = svg.append("text")
	.attr("x", 50)
	.attr("y", 40);



	d3.csv("olympic_skiing_Downhill_miliseconds.csv", function(error, data){
	data.forEach(function(d){
	d.Age = +d.Age
	d.Rank = +d.Rank
	d.Year = +d.Year
	d.Time_end = parseTime(d.Time_end)
	d.Time_start = parseTime(d.Time_start)
	d.time_miliseconds = +d.time_miliseconds

	})


	xScale.domain(d3.extent(data, function(d){ return d.Time_end }))
	yScale.domain([2016, 1936])

	var circles = svg.selectAll(".circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("r", 3)
	.attr("cx", 0)
	.attr("cy", function(d){
	return yScale(d.Year)
	})
	.style("fill", function(d){
	if(d.Gender == "Male"){
	return "blue"
	} else {
	return "red"
	}
	})
	.style("opacity", 1)


	circles.transition()
	.on("start", function(d, i) { if(i==0) startTimer() })
	.duration(function(d){
	return d.time_miliseconds / 7
	})
	.attr("cx", 720)

	var maxTime = d3.max(circles.data(), function(d){
	return d.time_miliseconds
	})

	var format = d3.timeFormat("%M:%S:%L")

	function startTimer(){
	var timer = d3.timer(function(t){
	if(t > 73036 / 7){
	timer.stop();
	text.text("Time " + format(73036))
	} else {
	text.text("Time " + format(t * 7))
	}
	})
	}

	// interupting animation
	setTimeout(function(){
	d3.selectAll("circle").transition()
	}, 73036 / 7)


	/// replay button
	d3.select("#replay")
	.on("click", function(){
	var circles_replay = svg.selectAll("circle")
	.transition()
	.attr("r", 3)
	.attr("cx", 0)
	.attr("cy", function(d){
	return yScale(d.Year)
	})
	.style("fill", function(d){
	if(d.Gender == "Male"){
	return "blue"
	} else {
	return "red"
	}
	})
	.style("opacity", 1)

	circles_replay.transition()
	.on("start", function(d, i) { if(i==0) startTimer() })
	.duration(function(d){
	return d.time_miliseconds / 7
	})
	.attr("cx", 720)

	setTimeout(function(){
	d3.selectAll("circle").transition()
	}, 73036 / 7)

	})



	d3.select("#speed")
	.on("click", function(){
	svg.selectAll("circle")
	.transition()
	.duration(function(d){
	return d.time_miliseconds / 10
	})
	.attr("cx", 720)

	})


	// Creating a pause and play button!!
	var pauseButton = d3.select("#pause")


	pauseButton.on("click", function(){

	var button = d3.select(this)

	if (button.text() == "Play"){


	button.text("Pause")

	svg.selectAll("circle")
	.transition()
	.duration(function(d){
	return d.time_miliseconds / 4
	})
	.attr("cx", 720)

	} else {

	button.text("Play")

	// circles.transition()
	// .on("start", function(d, i) { if(i==0) startTimer().stop() })
	// .duration(0)

	svg.selectAll("circle")
	.transition()
	.duration(0)

	}
	})

	console.log(data)



	svg.append("g")
	.classed("axis x", true)
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	// y axis
	svg.append("g")
	.classed("axis y", true)
	.attr("transform", "translate(0,0)")
	.call(yAxis);











	})


	</script>

	</body>
	</html>