Scaling
Published Nov 20, 2023
Contribute to Docs
Scaling involves the transformation of data in order to change the domain of values to suit the parameters of a given chart. Axes are the representation of the final range of values generated by scales. In D3 there are a number of convenient methods used to create scales.
Syntax
A D3 scale generally takes the following form:
svg.scaleType() // A scale function is called
.domain(input1, input2) // Parameters for the domain and
.range(output1, output2) // the range are passed
D3 has scaling functions that include .scaleLinear()
, .scaleLog()
, .scaleOrdinal()
, and many others to address common scaling conversions. A scale definition will begin with one of these functions paired with the .domain()
and .range()
methods to set the parameters that will govern the data used and the final range those values will take.
D3 Scale Methods
The following methods are part of the D3 scale class:
Scaling
- .domain()
- Used to specify the minimum and maximum values of the input data.
- .range()
- Used to define output range of a scale.
- .scaleBand()
- Creates a band scale for mapping ordinal data to positions along an axis in D3.js.
- .scaleLinear()
- Used to create a linear scale between a domain and a range.
- d3.scaleOrdinal()
- Used to build an ordinal scale with identified domain and range values.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn JavaScript:D3 on Codecademy
- Career path
Computer Science
Looking for an introduction to the theory behind programming? Master Python while learning data structures, algorithms, and more!Includes 6 CoursesWith Professional CertificationBeginner Friendly75 hours - Free course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner Friendly15 hours