first commit

mohdsanadzakirizvi · Jul 5, 2017 · 4f4907c · 4f4907c
commit 4f4907c
Show file tree

Hide file tree

Showing 6 changed files with 1,432 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+Experiments with D3.js
+=======================
+
+1. start server:
+------------
+
+	./server
+
+2. goto the url :
+-----------------
+
+http://localhost:8000
+
+D3.js source file:
+-----------------
+
+`d3.min.js`
+
diff --git a/basic_animated_line_chart.html b/basic_animated_line_chart.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>D3 Line Chart</title>
+
+	<style type="text/css">
+
+		body{ font: Arial 18px; }
+
+		path{
+			stroke: steelblue;
+			fill: none;
+			stroke-width: 2;
+		}
+
+		.axis path, .axis line{
+				fill: none;
+				stroke: grey;
+				stroke-width: 1;
+				shape-rendering: crispEdges;
+			}
+	</style>
+</head>
+<body>
+
+<script type="text/javascript" src="d3.min.js"></script>
+<script type="text/javascript">
+	//Set margins and sizes
+	var margin = {
+		top: 20,
+		bottom: 50,
+		right: 30,
+		left: 30
+	};
+	var width = 700 - margin.left - margin.right;
+	var height = 500 - margin.top - margin.bottom;
+
+	//Create date parser
+	var ParseDate = d3.time.format("%d-%b-%y").parse;
+
+	//Create x and y scale to scale inputs
+	var xScale = d3.time.scale().range([0, width]);
+	var yScale = d3.scale.linear().range([height, 0]);
+
+	//Create x and y axes
+	var xAxis = d3.svg.axis().scale(xScale)
+						.orient("bottom")
+						.ticks(5);
+
+	var yAxis = d3.svg.axis().scale(yScale)
+						.orient("left")
+						.ticks(5);
+
+	//Create a line generator
+	var valueline = d3.svg.line()
+							.x(function(d){
+								return xScale(d.date);
+							})
+							.y(function(d){
+								return yScale(d.close);
+							});
+
+	//Create an SVG element and append it to the DOM
+	var svgElement = d3.select("body")
+						.append("svg").attr({"width": width+margin.left+margin.right, "height": height+margin.top+margin.bottom})
+						.append("g")
+						.attr("transform","translate("+margin.left+","+margin.top+")");
+
+	//Read TSV file
+	d3.tsv("data.tsv", function(data){
+		//Parse Data into useable format
+		data.forEach(function(d){
+			d.date = ParseDate(d.date);
+			d.close = +d.close;
+			//the + sign converts string automagically to number
+		});
+
+		//Set the domains of our scales
+		xScale.domain(d3.extent(data, function(d){ return d.date; }));
+		yScale.domain([0, d3.max(data, function(d){ return d.close; })]);
+
+		//append the svg path
+		var path = svgElement.append("path")
+					.attr("d", valueline(data));
+
+		//Add X Axis
+		var x = svgElement.append("g")
+					.attr("transform", "translate(0,"+height+")")
+					.call(xAxis);
+
+		x.append("text")
+			.text("Date along x axis")
+			.attr("transform","translate("+width/2+","+margin.bottom+")")
+
+		//Add Y Axis
+		svgElement.append("g")
+					.call(yAxis);
+
+		//Length of path
+		var totalLength = path.node().getTotalLength();
+
+		//Animate the drawing of path using dash logic
+	    path
+	      .attr("stroke-dasharray", totalLength + " " + totalLength)
+	      .attr("stroke-dashoffset", totalLength)
+	      .transition()
+	        .duration(4000)
+	        .ease("linear")
+	        .attr("stroke-dashoffset", 0);
+	});
+
+</script>
+</body>
+</html>
diff --git a/d3.min.js b/d3.min.js