Sürekli Girdili ve Sürekli Çıktılı

scaleLinear

Sürekli ölçekler, muhtemelen veri değerlerini konumlara ve uzunluklara dönüştürmek için en uygun ölçek oldukları için en yaygın kullanılan ölçek türüdür. Bu konuda bilgi edinmek için iyi bir bir ölçek türü varsa budur.

Etki alanı ve aralığı arasında enterpolasyon yapmak için Sürekli bir işlev (y = m * x + b) kullanırlar.

var linearScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 600]);

linearScale(0);   // returns 0
linearScale(5);   // returns 300
linearScale(10);  // returns 600

Tipik kullanımlar, veri değerlerini konumlara ve uzunluklara dönüştürmektir, bu nedenle çubuk grafikler oluştururken, çizgi grafikler (ve diğer birçok grafik türünde) kullanılacak ölçeklerdir.

Çıkış aralığı ayrıca renkler olarak da belirtilebilir:

var linearScale = d3.scaleLinear()
  .domain([0, 10])
  .range(['yellow', 'red']);

linearScale(0);   // returns "rgb(255, 255, 0)"
linearScale(5);   // returns "rgb(255, 128, 0)"
linearScale(10);  // returns "rgb(255, 0, 0)"

scalePow

(y = m * x ^ k + b) işlevini kullanarak enterpolasyon yapar. k üssü .exponent() kullanılarak ayarlanır:

var powerScale = d3.scalePow()
  .exponent(0.5)
  .domain([0, 100])
  .range([0, 30]);

powerScale(0);   // returns 0
powerScale(50);  // returns 21.21...
powerScale(100); // returns 30

scaleSqrt

Bu ölçek, scalePow ölçeğinin özel bir durumudur (k = 0.5'tir) ve daireleri alana göre (yarıçapı değil) boyutlandırmak için kullanışlıdır. (Verileri temsil etmek için daire boyutunu kullanırken, verileri yarıçapı olarak almak yerine alanı ayarlamak daha iyi olabilir.)

var sqrtScale = d3.scaleSqrt()
  .domain([0, 100])
  .range([0, 30]);

sqrtScale(0);   // returns 0
sqrtScale(50);  // returns 21.21...
sqrtScale(100); // returns 30

scaleLog

Bir log işlevini kullanarak ölçekler (y = m * log (x) + b) ve verilerde üstel bir yapıya sahip olduğunda yararlı olabilir.

var logScale = d3.scaleLog()
  .domain([10, 100000])
  .range([0, 600]);

logScale(10);     // returns 0
logScale(100);    // returns 150
logScale(1000);   // returns 300
logScale(100000); // returns 600

scaleTime

scaleTime, etki alanı bir tarih dizisi olarak ifade edilmesi dışında scaleLinear'a benzer. (Zaman serisi verileriyle uğraşırken çok faydalıdır.)

timeScale = d3.scaleTime()
  .domain([new Date(2016, 0, 1), new Date(2017, 0, 1)])
  .range([0, 700]);

timeScale(new Date(2016, 0, 1));   // returns 0
timeScale(new Date(2016, 6, 1));   // returns 348.00...
timeScale(new Date(2017, 0, 1));   // returns 700

scaleSequential

Sürekli değerleri önceden ayarlanmış (veya özel) bir interpolator tarafından belirlenen bir çıktı aralığına eşlemek için kullanılır. (Bir interpolator, 0 ile 1 arasında girdi kabul eden ve iki sayı, renk, dizi vb. Arasında enterpolasyonlu bir değer veren bir fonksiyondur.)

D3, birçok renkli olanlar da dahil olmak üzere bir dizi interpolator sağlar. Örneğin, iyi bilinen gökkuşağı renk skalasını oluşturmak için d3.interpolateRainbow kullanabiliriz:

var sequentialScale = d3.scaleSequential()
  .domain([0, 100])
  .interpolator(d3.interpolateRainbow);

sequentialScale(0);   // returns 'rgb(110, 64, 170)'
sequentialScale(50);  // returns 'rgb(175, 240, 91)'
sequentialScale(100); // returns 'rgb(110, 64, 170)'

Aşağıdaki resimde, D3 tarafından sağlanan diğer renk interpolator örneklerini görebilirsiniz:

Bu işlemler için eklentiler de kullanabilirsiniz. Örneğin: https://github.com/d3/d3-scale-chromatic

Sıkıştırma (clambing)

Varsayılan olarak scaleLinear, scalePow, scaleSqrt, scaleLog, scaleTime ve scaleSequential, etki alanı dışında bir girişe izin verir.

Örneğin:

var linearScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 100]);

linearScale(20);  // returns 200
linearScale(-10); // returns -100

Bu örnekte, ölçek işlevi alan dışındaki değerler için ekstrapolasyon kullanır.

Ölçek işlevinin etki alanı içindeki giriş değerleri ile sınırlandırılmasını istiyorsak, .clamp() işlevini kullanarak ölçek işlevini "sıkıştırabiliriz":

linearScale.clamp(true);

linearScale(20);  // returns 100
linearScale(-10); // returns 0

Birden Fazla Aralık

Başlangıç ve bitiş değilde arada farklı değerler kullanmak isterseniz:

var linearScale = d3.scaleLinear()
  .domain([-10, 0, 10])
  .range(['red', '#ddd', 'blue']);

linearScale(-10);  // returns "rgb(255, 0, 0)"
linearScale(0);    // returns "rgb(221, 221, 221)"
linearScale(5);    // returns "rgb(111, 111, 238)"

Ters Çevirme (inversion)

.invert() yöntemi, bir çıktı değeri verilen bir ölçek işlevinin giriş değerini belirlememize izin verir (ölçek işlevinin sayısal bir alanı varsa):

var linearScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 100]);

linearScale.invert(50);   // returns 5
linearScale.invert(100);  // returns 10

Örneğin grafikte tıklanan bir alanın piksel değerinin hangi sayısal değer karşılık geldiğini öğrenmek için kullanılabilir.