Edupala

Comprehensive Full Stack Development Tutorial: Learn Ionic, Angular, React, React Native, and Node.js with JavaScript

D3 important function

In D3 scale play important role in visualization for encoding, map abstract data to visual representation

Some of the important D3 function

  1. d3.scaleThreshold()
  2. d3.scaleOrdinal()

scaleThreshold maps continuous numeric input to discrete values defined by the range. n-1 domain split points are specified where n is the number of range values.

In the following example we split the domain at,0 50 and 100

  • u < 0 is mapped to ‘#ccc’
  • 0 ≤ u < 50 to ‘lightblue’
  • 50 ≤ u < 100 to ‘orange’
  • u ≥ 100 to ‘#ccc’

where u is the input value.

2. d3.scaleOrdinal() :  

An ordinal scale’s values must be coercible to a string, and the stringified version of the domain value uniquely identifies the corresponding range value.
So, as an example, a domain of an ordinal scale may contain names, like so:

var ordinalScale = d3.scale.ordinal()
.domain(['Alice', 'Bob'])
.range([0, 100]);

ordinalScale('Alice'); // 0
ordinalScale('Bob'); // 100

3. d3.scaleLinear() – Quan­ti­ta­tive scale

Quan­ti­ta­tive scale func­tions are those that trans­late one numeric value into another numeric value using dif­fer­ent types of equa­tions such as lin­ear, log­a­rith­mic etc.

For exam­ple the lin­ear quan­ti­ta­tive scale con­verts a num­ber into another num­ber lin­early and can be defined as follows:

var y = d3.scaleLinear() .domain([0, 170]) .range([height,0]);

Where both domain and range value are numeric and continue from max to min or min to max value.

D3 important function

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top