|
|
|
@ -97,7 +97,7 @@ A scale will map a data value to a visual value.
|
|
|
|
1. Create a scale. There are many types. Here we'll use a linear scale
|
|
|
|
1. Create a scale. There are many types. Here we'll use a linear scale
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
```javascript
|
|
|
|
var yScale = d3.scale.linear();
|
|
|
|
var yScale = d3.scaleLinear();
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
1. Set up a visual range
|
|
|
|
1. Set up a visual range
|
|
|
|
@ -106,27 +106,6 @@ A scale will map a data value to a visual value.
|
|
|
|
yScale.range([height,0]);
|
|
|
|
yScale.range([height,0]);
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
1. Find maximum and minimum of the data set (called the "domain" of the data set)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
var yMax = d3.max(data, function(element){
|
|
|
|
|
|
|
|
return parseInt(element.TMAX);
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
var yMin = d3.min(data, function(element){
|
|
|
|
|
|
|
|
return parseInt(element.TMAX);
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var yDomain = [yMin, yMax];
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- Can combine this into one call if max/min come from same element:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
var yDomain = d3.extent(data, function(element){
|
|
|
|
|
|
|
|
return parseInt(element.TMAX);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. Add the domain
|
|
|
|
1. Add the domain
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
```javascript
|
|
|
|
@ -152,6 +131,27 @@ A scale will map a data value to a visual value.
|
|
|
|
yScale.invert(800); //returns the data value that maps to this visual value
|
|
|
|
yScale.invert(800); //returns the data value that maps to this visual value
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. If data min/max of a data set (called the "domain") are not found, you can find them:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
var yMax = d3.max(data, function(element){
|
|
|
|
|
|
|
|
return parseInt(element.TMAX);
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
var yMin = d3.min(data, function(element){
|
|
|
|
|
|
|
|
return parseInt(element.TMAX);
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var yDomain = [yMin, yMax];
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- Can combine this into one call if max/min come from same element:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
var yDomain = d3.extent(data, function(element){
|
|
|
|
|
|
|
|
return parseInt(element.TMAX);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Time Scale
|
|
|
|
## Time Scale
|
|
|
|
|
|
|
|
|
|
|
|
1. Create the scale
|
|
|
|
1. Create the scale
|
|
|
|
|