// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://covidtracking.com/api/v1/states/nj/daily.json', true)

request.onload = function () {
	// Begin accessing JSON data here
	var data = JSON.parse(this.response)
	let dataY = []
	let dataX = []

	let i = 0;
	data.reverse().forEach((cases) => {
		//    console.log(cases.positiveIncrease)
		dataY[i] = cases.positiveIncrease;
		dataX[i] = cases.date;
		i++;
	})
}



// set the dimensions and margins of the graph
var margin = { top: 10, right: 30, bottom: 30, left: 60 },
	width = 460 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
	.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 + ")");

//Read the data
//Removed

	// When reading the csv, I must format variables:
	function (d) {
		return { date: d3.timeParse("%Y%m%d")(d.dataX),         value: d.dataY }
	},

	// Now I can use this dataset:
	function (data) {

		// Add X axis --> it is a date format
		var x = d3.scaleTime()
			.domain(d3.extent(data, function (d) { return d.dataX; }))
			.range([0, width]);
		svg.append("g")
			.attr("transform", "translate(0," + height + ")")
			.call(d3.axisBottom(x));

		// Add Y axis
		var y = d3.scaleLinear()
			.domain([0, d3.max(data, function (d) { return +d.dataY; })])
			.range([height, 0]);
		svg.append("g")
			.call(d3.axisLeft(y));

		// Add the line
		svg.append("path")
			.datum(data)
			.attr("fill", "none")
			.attr("stroke", "steelblue")
			.attr("stroke-width", 1.5)
			.attr("d", d3.line()
				.x(function (d) { return x(d.dataX) })
				.y(function (d) { return y(d.dataY) })
			)

	})