RainismZ · October 25, 2017 15:53
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> /* set the CSS */

 .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 2px;
 }

 svg {
    padding-top: 10px;  
    padding-left: 30px;
 }

 </style>
 <body>
 <div id="chart"></div>

 <!-- load the d3.js library -->
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script>

    var chartDiv = document.getElementById("chart"),
        svg = d3.select(chartDiv).append("svg"),
        xAxis = svg.append("g"),
        yAxis = svg.append("g"),
        g = svg.append("g");

    function mouseOver(id) {
        d3.selectAll("#" + id)
        .style("opacity", 1.0)
        .style("stroke-width", 4);
    }

    function mouseOut(id) {
        d3.selectAll("#" + id)
        .style("opacity", 0.8)
        .style("stroke-width", 2);
    }

    function redraw() {

      var chartDivWidth = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth,
          chartDivHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

      // set the dimensions and margins of the graph
      var margin = {top: 20, right: 20, bottom: 30, left: 50},
          width = chartDivWidth - margin.left - margin.right,
          height = chartDivHeight - margin.top - margin.bottom;

      // set the ranges
      var x = d3.scaleLinear().range([0, width]),
          y = d3.scaleLinear().range([height, 0]);

      // define the 1st line
      var valueline = d3.line()
          .x(function (d) {
              return x(d.Week);
          })
          .y(function (d) {
              return y(d.Tottenham);
          });

      // define the 2nd line
      var valueline2 = d3.line()
          .x(function (d) {
              return x(d.Week);
          })
          .y(function (d) {
              return y(d.Arsenal);
          });

      svg
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

      // Get the data
      d3.csv("resultByWeek.csv", function (error, data) {
          if (error) throw error;

          // format the data
          data.forEach(function (d) {
              d.Week = +d.Week;
              d.Tottenham = +d.Tottenham;
              d.Arsenal = +d.Arsenal;
          });

          // Scale the range of the data
          x.domain(d3.extent(data, function (d) {
              return d.Week;
          }));
          y.domain([0, d3.max(data, function (d) {
              return Math.max(d.Tottenham, d.Arsenal);
          })]);

          var pathTottenham = g.selectAll("#Tottenham").data([data]),
              pathArsenal = g.selectAll("#Arsenal").data([data]);

          pathTottenham.exit().remove();
          pathArsenal.exit().remove();

          // Add the valueline path.
          pathTottenham
            .enter()
              .append("path")
              .data([data])
              .style("opacity", 0.8)
              .attr("class", "line")
              .attr("id", "Tottenham")
            .merge(pathTottenham)
              .attr("d", valueline)
              .on("mouseover", function(d){
                  mouseOver(this.id)
              })
              .on("mouseout", function(d){
                  mouseOut(this.id);
              });

          // Add the valueline2 path.
          pathArsenal
            .enter()
              .append("path")
              .data([data])
              .style("opacity", 0.8)
              .attr("class", "line")
              .attr("id", "Arsenal")
              .style("stroke", "red")
            .merge(pathArsenal)
              .attr("d", valueline2)
              .on("mouseover", function(d){
                  mouseOver(this.id)
              })
              .on("mouseout", function(d){
                  mouseOut(this.id);
              });

          // Add the X Axis
          xAxis
            .merge(xAxis)
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x));

          // Add the Y Axis
          yAxis
            .merge(yAxis)
              .call(d3.axisLeft(y));

      });

    }

    redraw();
    window.addEventListener("resize", redraw);

 </script>
 </body>
diff --git a/resultByWeek.csv b/resultByWeek.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 2px;
	}

	svg {
	padding-top: 10px;
	padding-left: 30px;
	}

	</style>
	<body>
	<div id="chart"></div>

	<!-- load the d3.js library -->
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var chartDiv = document.getElementById("chart"),
	svg = d3.select(chartDiv).append("svg"),
	xAxis = svg.append("g"),
	yAxis = svg.append("g"),
	g = svg.append("g");

	function mouseOver(id) {
	d3.selectAll("#" + id)
	.style("opacity", 1.0)
	.style("stroke-width", 4);
	}

	function mouseOut(id) {
	d3.selectAll("#" + id)
	.style("opacity", 0.8)
	.style("stroke-width", 2);
	}

	function redraw() {

	var chartDivWidth = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth,
	chartDivHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

	// set the dimensions and margins of the graph
	var margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = chartDivWidth - margin.left - margin.right,
	height = chartDivHeight - margin.top - margin.bottom;

	// set the ranges
	var x = d3.scaleLinear().range([0, width]),
	y = d3.scaleLinear().range([height, 0]);

	// define the 1st line
	var valueline = d3.line()
	.x(function (d) {
	return x(d.Week);
	})
	.y(function (d) {
	return y(d.Tottenham);
	});

	// define the 2nd line
	var valueline2 = d3.line()
	.x(function (d) {
	return x(d.Week);
	})
	.y(function (d) {
	return y(d.Arsenal);
	});

	svg
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	// Get the data
	d3.csv("resultByWeek.csv", function (error, data) {
	if (error) throw error;

	// format the data
	data.forEach(function (d) {
	d.Week = +d.Week;
	d.Tottenham = +d.Tottenham;
	d.Arsenal = +d.Arsenal;
	});

	// Scale the range of the data
	x.domain(d3.extent(data, function (d) {
	return d.Week;
	}));
	y.domain([0, d3.max(data, function (d) {
	return Math.max(d.Tottenham, d.Arsenal);
	})]);

	var pathTottenham = g.selectAll("#Tottenham").data([data]),
	pathArsenal = g.selectAll("#Arsenal").data([data]);

	pathTottenham.exit().remove();
	pathArsenal.exit().remove();

	// Add the valueline path.
	pathTottenham
	.enter()
	.append("path")
	.data([data])
	.style("opacity", 0.8)
	.attr("class", "line")
	.attr("id", "Tottenham")
	.merge(pathTottenham)
	.attr("d", valueline)
	.on("mouseover", function(d){
	mouseOver(this.id)
	})
	.on("mouseout", function(d){
	mouseOut(this.id);
	});

	// Add the valueline2 path.
	pathArsenal
	.enter()
	.append("path")
	.data([data])
	.style("opacity", 0.8)
	.attr("class", "line")
	.attr("id", "Arsenal")
	.style("stroke", "red")
	.merge(pathArsenal)
	.attr("d", valueline2)
	.on("mouseover", function(d){
	mouseOver(this.id)
	})
	.on("mouseout", function(d){
	mouseOut(this.id);
	});

	// Add the X Axis
	xAxis
	.merge(xAxis)
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));

	// Add the Y Axis
	yAxis
	.merge(yAxis)
	.call(d3.axisLeft(y));

	});

	}

	redraw();
	window.addEventListener("resize", redraw);

	</script>
	</body>
Week	Arsenal	Tottenham
1	3	0
2	6	3
3	9	4
4	12	5
5	13	5
6	14	5
7	17	6
8	20	9
9	23	12
10	24	13
11	27	13
12	30	13
13	33	16
14	34	16
15	35	19
16	38	19
17	39	19
18	42	19
19	45	19
20	46	22
21	49	25
22	52	28
23	55	28
24	58	31
25	61	34
26	64	35
27	67	35
28	70	38
29	73	38
30	74	38
31	77	38
32	78	38
33	81	39
34	82	39
35	83	39
36	84	39
37	87	42
38	90	45