saad-gh/line-graph.html

## line-graph.html
<!DOCTYPE html>
<html>

<head>
    <style>
    .hide{
        display: none;
    }
    </style>
</head>

<body>
    <div id="message_wait">
    <h3>Please wait...</h3>
    </div>
    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>
        /**
        * Please update "PATH" to csv
        */

        const PATH = "data/monthly.csv";

        var svg = d3.select("svg"),
            margin = { top: 20, right: 20, bottom: 30, left: 50 },
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var parseTime = d3.timeParse("%d-%b-%y");

        var x = d3.scaleTime()
            .rangeRound([0, width]);

        var y = d3.scaleLinear()
            .rangeRound([height,0]);

        var line = d3.line()
            .x(function (d) { return x(d.date); })
            .y(function (d) { return y(d.price); });

        d3.csv(PATH).then(function (data) {
            document.getElementById("message_wait").className = "hide";
            console.log(data);
            data = data.slice(1);
            console.log(data[0].dates);
            console.log(data[data.length - 1].dates);

            data = data.map(function (row) {
                row.price = +row.prices;
                var strDt = row.dates;
                var arrDt = strDt.split("-").map(function(s){ return +s; });
                row.date = new Date(arrDt[0],arrDt[1] - 1,arrDt[2] - 1);
                return row;
            });

            x.domain(d3.extent(data,function(d){ return d.date; }));
            y.domain(d3.extent(data,function(d){ return d.price; }));

            g.append("g")
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x))
                .select(".domain")
                .remove();

            g.append("g")
                .call(d3.axisLeft(y))
                .append("text")
                .attr("fill", "#000")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", "0.71em")
                .attr("text-anchor", "end")
                .text("Price ($)");

            g.append("path")
                .datum(data)
                .attr("fill", "none")
                .attr("stroke", "steelblue")
                .attr("stroke-linejoin", "round")
                .attr("stroke-linecap", "round")
                .attr("stroke-width", 1.5)
                .attr("d", line);
        });

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<style>
	.hide{
	display: none;
	}
	</style>
	</head>

	<body>
	<div id="message_wait">
	<h3>Please wait...</h3>
	</div>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
	/**
	* Please update "PATH" to csv
	*/

	const PATH = "data/monthly.csv";

	var svg = d3.select("svg"),
	margin = { top: 20, right: 20, bottom: 30, left: 50 },
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var parseTime = d3.timeParse("%d-%b-%y");

	var x = d3.scaleTime()
	.rangeRound([0, width]);

	var y = d3.scaleLinear()
	.rangeRound([height,0]);

	var line = d3.line()
	.x(function (d) { return x(d.date); })
	.y(function (d) { return y(d.price); });

	d3.csv(PATH).then(function (data) {
	document.getElementById("message_wait").className = "hide";
	console.log(data);
	data = data.slice(1);
	console.log(data[0].dates);
	console.log(data[data.length - 1].dates);

	data = data.map(function (row) {
	row.price = +row.prices;
	var strDt = row.dates;
	var arrDt = strDt.split("-").map(function(s){ return +s; });
	row.date = new Date(arrDt[0],arrDt[1] - 1,arrDt[2] - 1);
	return row;
	});

	x.domain(d3.extent(data,function(d){ return d.date; }));
	y.domain(d3.extent(data,function(d){ return d.price; }));

	g.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x))
	.select(".domain")
	.remove();

	g.append("g")
	.call(d3.axisLeft(y))
	.append("text")
	.attr("fill", "#000")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")
	.text("Price ($)");

	g.append("path")
	.datum(data)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-linejoin", "round")
	.attr("stroke-linecap", "round")
	.attr("stroke-width", 1.5)
	.attr("d", line);
	});

	</script>
	</body>

	</html>