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,22 +166,28 @@ 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
 Date formatting options: https://github.com/d3/d3-time-format#locale_format
 To parse an alternate format into a date object
 ```javascript
-		dateParser.parse('20010101');//returns a date object
+var parseTime = d3.timeParse("%Y%m%d");
 parseTime('20160101') //returns a date object
 ```
-	- can get a formatted string from a date object
+To create an alternately formated string from a date object
 ```javascript
-		dateParser(new Date());
+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>