D3js D3JS scale

This is the 13th day of my participation in the August More Text Challenge.More challenges in August

preface

You may be interested in D3JS through the previous small demo along the circular motion animation. Next, let’s continue to learn his commonly used APIS. I will output some of my own understanding of these apis

scale

What is a scale?

D3 scale, a scale is a range function method that maps a set of input domains to output domains. For example, if the input is 1 and the output is 10, if the input is ‘Tom’ and the output is 50, then the mapping is the scale that you define.

What are the D3 scales?

D3. scaleLinear() linear scale
D3. scaleBand() ordinal scale
D3. scaleOrdinal() ordinal scale
D3.scalequantize () quantized scale
D3. scaleTime() time scale
The color scale d3. SchemeCategory10 / d3. SchemeCategory20 / d3 schemeCategory20b/d3. SchemeCategory20c
D3.scaleidentity () // Scale
D3.scalesqrt () // Power scale
D3. scalePow() // Scales similar to scaleSqrt
D3. scaleLog() // Logarithmic scale
D3. scaleQuantile() // Quantile scale

d3.scaleLinear()

How is the D3.scalelinear () API used? Take a look at the following example ！！！！！

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
   const scale = d3.scaleLinear().domain([0.5]).range([0.100]);
   console.log(scale(0));
   console.log(scale(1));
   console.log(scale(2));
   console.log(scale(3));
   console.log(scale(4));
   console.log(scale(5));

   // Output: 0
   // Output: 20
   // Output: 40
   // Output: 60
   // Output: 80
   // Output: 100


   // What about outside of our definition?
   console.log(scale(6)); 
   console.log(scale(7));
   console.log(scale(8));
   console.log(scale(9));
   console.log(scale(10));

   // Output: 120
   // Output: 140
   // Output: 160
   // Output: 180
   // Output: 200
</script>
Copy the code

Let’s try another method again using d3.scalelinear () as an example

If you change the domain parameters, does that change?

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
   const scale = d3.scaleLinear().domain([0.1.2.3.4.5]).range([0.100]);
   console.log(scale(0));
   console.log(scale(1));
   console.log(scale(2));
   console.log(scale(3));
   console.log(scale(4));
   console.log(scale(5));

   // Output: 0
   // Output: 100
   // Output: 200
   // Output: 300
   // Output: 400
   // Output: 500


   // What about outside of our definition?
   console.log(scale(6)); 
   console.log(scale(7));
   console.log(scale(8));
   console.log(scale(9));
   console.log(scale(10));

   // Output: 600
   // Output: 700
   // Output: 800
   // Output: 900
   // Output: 1000
</script>
Copy the code

How about changing the range parameters? Let’s try

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
   const scale = d3.scaleLinear().domain([0.1.2.3.4.5]).range([0.100.300.600.800]);
   console.log(scale(0));
   console.log(scale(1));
   console.log(scale(2));
   console.log(scale(3));
   console.log(scale(4));
   console.log(scale(5));

   // Output: 0
   // Output: 100
   // Output: 300
   // Output: 600
   // Output: 800
   // Output: 1000


   // What about outside of our definition?
   console.log(scale(6)); 
   console.log(scale(7));
   console.log(scale(8));
   console.log(scale(9));
   console.log(scale(10));

   // Output: 1200
   // Output: 1400
   // Output: 1600
   // Output: 1800
   // Output: 2000
</script>
Copy the code

And change the parameters?

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
   const scale = d3.scaleLinear().domain([0.1.2.3.4.5]).range(['a'.'b']);
   console.log(scale(0));
   console.log(scale(1));
   console.log(scale(2));
   console.log(scale(3));
   console.log(scale(4));
   console.log(scale(5));

   // Output: b
   // Output: b
   // Output: b
   // Output: b
   // Output: b
   // Output: b


   // What about outside of our definition?
   console.log(scale(6)); 
   console.log(scale(7));
   console.log(scale(8));
   console.log(scale(9));
   console.log(scale(10));

   // Output: b
   // Output: b
   // Output: b
   // Output: b
   // Output: b
</script>
Copy the code

Conclusion:d3.scaleLinear()Is a continuous output fielddomainandrangeCan be continuous linear scale, do not use this scale to make strings, can map numeric types

D3. scaleBand() ordinal scale

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Scale/scaleBand</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
</body>
</html>
<script>
D3.scaleband () is not a continuous scale. Domain () uses an array, but range() needs to be a continuous field. * /
/** d3.scaleband () is not a continuous scale, domain() uses an array, but range() needs to be a continuous field. * /
let scale = d3.scaleBand().domain([1.2.3.4.5]).range([0.100])
scale(1) / / output: 0
scale(2) / / output: 25
scale(4) / / output: 75
// When the input is not a data set in domain() :
scale(0)  / / output: undefined
scale(10) / / output: undefined
console.log(scale(1),scale(2),scale(4),scale(0),scale(5),scale(10),'scale')
</script>
Copy the code

Conclusion:d3.scaleBand()Also applies to numeric types, redefined outside the input range will be outputundefined

D3. scaleOrdinal() ordinal scale


<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Scale/scaleOrdinal</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
</body>
</html>
<script>
/** 3.d3.scaleordinal () Ordinal scale D3.scaleordinal () input and output fields use discrete data */
let scale = d3.scaleOrdinal().domain(['jack'.'rose'.'john']).range([10.20.30])
scale('jack') / / output: 10
scale('rose') / / output: 20
scale('john') / / output: 30
// When the input is not a data set in domain() :
scale('tom') / / output: 10
scale('trump') / / output: 20
console.log(scale('jack'),scale('rose'),scale('john'),scale('tom'),scale('trump'),scale('trrr'),scale('trtyr'),'scale')

</script>
Copy the code

Conclusion:d3.scaleOrdinal()Both sides of the scale are discrete data and do not support continuous 1-100.domainandrangeThe output field corresponds to the input field, similar to the unity-type conversion we defined when we recoded{d: 'day ', t:' hour ', w: 'week '}

D3. scaleQuantize quantitative scale

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Scale/scaleQuantize</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
</body>
</html>
<script>
D3.scalequantize () is also a continuous scale. The definition domain is continuous, while the output domain is discrete. * /
let scale = d3.scaleQuantize().domain([0.10]).range(['small'.'medium'.'long'])
scale(1) / / output: small
scale(5.5) / / output: medium
scale(8) / / output: long
/** For domain() outside the domain: */
scale(-10) // Output: small
scale(10) // Output: long
console.log(scale(1),scale(5.5),scale(8),scale(-10),scale(10))
</script>
Copy the code

Conclusion: Quantization scale is continuous in definition domain and discrete in output domain

Color scale

// The color scale is slightly different. 10 represents 10 colors and 20 represents 20 colors.......
console.log(d3.schemeCategory10,'d3.schemeCategory10>>>>>>>>........... ')
console.log(d3.schemeCategory10,'d3.schemeCategory10>>>>>>>>........... ')
/ / output: 10) ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"] "d3.schemeCategory10>>>>>>>>..........."
/ / scale. HTML: 16 (10) [f77b4 "# 1", "# ff7f0e", "# 2 ca02c", "# d62728", "# 9467 bd", "# 8 c564b", "# e377c2", "# 7 f7f7f", "# bcbd22", "#17becf"] "d3.schemeCategory10>>>>>>>>..........."

// Can be used with d3.scaleordinal ()

let colorFn = d3.scaleOrdinal().domain([1.10]).range(d3.schemeCategory10);
colorFn(1)
colorFn(2)
colorFn(3)
colorFn(4)
colorFn(5)
// Get the color
Copy the code

conclusion

For every scaledomainandrangeDomain and output domain is different, some can support the continuous domain, some corresponding mapping support, you can think of is actually don’t want to the d3 scale, is a common word ‘scale’ we actually can also think this thing is dry ha, is convenient after d3 has some function defines the data mapping, Some people should ask is this many scales, I don’t have to ok? Ok, of course 😀. Just like we defined the unit conversion object, you say I don’t define I judge the assignment is ok? Yes, the realization of the value is the same, are for the normal operation of the program. But we still should think from another Angle, this API author design Angle, I think there must be some value, will be worth the author to design ！！！！！ It feels good haha

conclusion

Hi, I am Mihara and thank you for watching and I will work harder.
Each method is typed out and verified, and can be copied if necessary.
If you give help a thumbs-up 👍 is even better thank you ~~~~~
We look forward to your attention

preface

scale

What is a scale?

What are the D3 scales?

d3.scaleLinear()

D3. scaleBand() ordinal scale

D3. scaleOrdinal() ordinal scale

D3. scaleQuantize quantitative scale

Color scale

conclusion

conclusion

Related Posts

Vue2 TypeScript global Message prompt box

webpack:source-map

One diagram shows how React-Redux works