Skip to content

ChartsLab/ChartsLab-Scale

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

ChartsLab-Scale

What is Scale in data visualization (words from grammar of graphics) ?

The word scale derives from the Latin scala, or ladder. The Latin meaning is particularly apt for graphics. The visual representation of a scale — an axis with ticks — looks like a ladder. Scales are the types of functions we use to map varsets to dimensions. At first glance, it would seem that constructing a scale is simply a matter of selecting a range for our numbers and intervals to mark ticks. There is more involved, however. Scales measure the contents of a frame. They determine how we perceive the size, shape, and location of graphics. Choosing a scale (even a default decimal interval scale) requires us to think about what we are measuring and the meaning of our measurements. Ultimately, that choice determines how we interpret a graphic.

All Scales

Install

<script src="./Scale.js"></script>

Requires

for now it's require nothing, but it's used almost in any visualization you want to use.

var line = Scale
              .Domain([0,450])
              .Range([0,60])
              .Reverse()
              .Clamp(true)
              .Linear()

API Reference

Continuous Scales

Continuous scales map a continuous, quantitative input domain to a continuous output range. If the range is also numeric, the mapping may be inverted. A continuous scale is not constructed directly; instead, try a linear, power, log, identity, time or sequential color scale.

# continuous(value) <>

Given a value from the domain, returns the corresponding value from the range. If the given value is outside the domain, and clamping is not enabled, the mapping may be extrapolated such that the returned value is outside the range. For example, to apply a position encoding:

var x = Scale
          .domain([10, 130])
          .range([0, 960])
          .Linear();

x['scale'](20); // 80
x['scale'](50); // 320

# continuous.invert(value) <>

# continuous.domain([domain]) <>

# continuous.range([range]) <>

# continuous.rangeRound([range]) <>

# continuous.clamp(clamp) <>

# continuous.ticks([count])

# continuous.tickFormat([count[, specifier]]) <>

# continuous.nice([count]) <>

Linear Scales

# d3.scaleLinear() <>

Constructs a new continuous scale with the unit domain [0, 1], the unit range [0, 1], the default interpolator and clamping disabled. Linear scales are a good default choice for continuous quantitative data because they preserve proportional differences. Each range value y can be expressed as a function of the domain value x: y = mx + b.

Linear Scale

Power Scales

Power Scale

Square Root Scales

SqRoot Scale

Log Scales

Log Scale

Time Scales

About

A preemptive for encoding that map abstract data to visual representation in 2d or 3d html5 canvas.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published