time scales

9 years ago · 16903d9ca2
parent 4b4766cc86
commit 16903d9ca2
2 changed files with 32 additions and 11 deletions
--- a/D3.md
+++ b/D3.md
@ -157,7 +157,7 @@ A scale will map a data value to a visual value.
 1. Create the scale

 	```javascript
-	var xScale = d3.time.scale();
+	var xScale = d3.scaleTime();
 	```

 1. Set up the visual range
@ -166,23 +166,29 @@ A scale will map a data value to a visual value.
 	xScale.range([0, width]);
 	```

-1. Set up the date format
+1. Set up the time range

 	```javascript
-	var dateParser = d3.time.format("%Y%m%d");
+	xScale.domain([new Date('2016-1-1'), new Date('2017-1-1')]);
 	```

-	- you can now parse strings of this format into dates
+### Dealing with alternate date formats

-		```javascript
-		dateParser.parse('20010101');//returns a date object
-		```
+Date formatting options: https://github.com/d3/d3-time-format#locale_format

-	- can get a formatted string from a date object
+To parse an alternate format into a date object

-		```javascript
-		dateParser(new Date());
-		```
+```javascript
+var parseTime = d3.timeParse("%Y%m%d");
+parseTime('20160101') //returns a date object
+```
+
+To create an alternately formated string from a date object
+
+```javascript
+var formatTime = d3.timeFormat("%Y%m%d");
+formatTime(new Date()); //returns a string in the above format
+```

 ## Axes

--- a/d3_examples/v4.html
+++ b/d3_examples/v4.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<div class="foo bar">asdf</div>
+		<svg height="800" width="500">
+
+		</svg>
+		<script src="http://d3js.org/d3.v4.min.js"></script>
+		<script type="text/javascript">
+			var dateFormatter = d3.timeFormat("%Y%m%d");
+			var parseDate = d3.timeParse("%Y%m%d");
+			console.log(parseDate('20160101'));
+		</script>
+	</body>
+</html>