From 4b4766cc8618a6aaf7d54ed62e6574edb88bb91d Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Tue, 23 Aug 2016 21:56:40 -0400 Subject: [PATCH] linear scale --- D3.md | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/D3.md b/D3.md index 734a520..32a5c97 100644 --- a/D3.md +++ b/D3.md @@ -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 ```javascript - var yScale = d3.scale.linear(); + var yScale = d3.scaleLinear(); ``` 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]); ``` -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 ```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 ``` +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 1. Create the scale