D3.js: API de escalas

D3.js proporciona funciones de escala para realizar transformaciones de datos. Estas funciones asignan un dominio de entrada a un rango de salida.

Configuración de API

Podemos configurar la API directamente usando el siguiente script.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-format.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-time.v1.min.js"></script>
<script src = "https://d3js.org/d3-time-format.v2.min.js"></script>
<script src = "https://d3js.org/d3-scale.v1.min.js"></script>
<script>

</script>

Métodos de API de escalas

D3 proporciona los siguientes métodos de escala importantes para diferentes tipos de gráficos. Entendamos entonces en detalle.

d3.scaleLinear() - Construye una escala lineal continua donde podemos ingresar mapas de datos (dominio) al rango de salida especificado.
d3.scaleIdentity() - Construya una escala lineal donde los datos de entrada sean los mismos que los de salida.
d3.scaleTime() - Construya una escala lineal donde los datos de entrada estén en las fechas y la salida en números.
d3.scaleLog() - Construir una escala logarítmica.
d3.scaleSqrt() - Construya una escala de raíz cuadrada.
d3.scalePow() - Construir una escala exponencial.
d3.scaleSequential() - Construya una escala secuencial donde el rango de salida sea fijado por la función del interpolador.
d3.scaleQuantize() - Construya una escala de cuantificación con rango de salida discreto.
d3.scaleQuantile() - Construya una escala de cuantiles donde los datos de la muestra de entrada se asignen al rango de salida discreta.
d3.scaleThreshold() - Construya una escala donde los datos de entrada arbitrarios se asignen al rango de salida discreta.
d3.scaleBand() - Las escalas de banda son como escalas ordinales excepto que el rango de salida es continuo y numérico.
d3.scalePoint() - Construye una escala de puntos.
d3.scaleOrdinal() - Construya una escala ordinal en la que los datos de entrada incluyan alfabetos y se asignen al rango de salida numérico discreto.

Antes de hacer un ejemplo práctico, primero comprendamos los dos términos siguientes:

Domain - El dominio denota valores mínimos y máximos de sus datos de entrada.
Range - El rango es el rango de salida, al que nos gustaría que los valores de entrada se mapeen ...

Ejemplo de trabajo

Realicemos la función d3.scaleLinear en este ejemplo. Para hacer esto, debe seguir los siguientes pasos:

Step 1 - Define variables - Defina variables y datos SVG utilizando la siguiente codificación.

var data = [100, 200, 300, 400, 800, 0]
   var width = 500, 
      barHeight = 20, 
      margin = 1;

Step 2 - Create linear scale - Utilice el siguiente código para crear una escala lineal.

var scale = d3.scaleLinear()
   .domain([d3.min(data), d3.max(data)])
   .range([100, 400]);

Aquí, para el valor mínimo y máximo para nuestro dominio manualmente, podemos usar el d3.min() y d3.max() funciones, que devolverán valores mínimos y máximos respectivamente de nuestra matriz de datos.

Step 3 - Append SVG attributes - Agregue los elementos SVG usando el código que se proporciona a continuación.

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

Step 4 - Apply transformation - Aplicar la transformación usando el código a continuación.

var g = svg.selectAll("g")
   .data(data).enter().append("g")
   .attr("transform", function (d, i) {
      return "translate(0," + i * barHeight + ")";
});

Step 5 - Append rect elements - Agregue los elementos rect al escalado como se muestra a continuación.

g.append("rect")
   .attr("width", function (d) {
      return scale(d);
   })
   .attr("height", barHeight - margin)

Step 6 - Display data - Ahora muestre los datos utilizando la codificación que se proporciona a continuación.

g.append("text")
   .attr("x", function (d) { return (scale(d)); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function (d) { return d; });

Step 7 - Working Example - Ahora, creemos un gráfico de barras usando la función d3.scaleLinear () de la siguiente manera.

Cree una página web "scale.html" y agregue los siguientes cambios.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var data = [100, 200, 300, 350, 400, 250]
         var width = 500, barHeight = 20, margin = 1;
         
         var scale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([100, 400]);
         
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d, i) {
               return "translate(0," + i * barHeight + ")";
         });
    
         g.append("rect")
         .attr("width", function (d) {
            return scale(d);
         })
         
         .attr("height", barHeight - margin)
         g.append("text")
         .attr("x", function (d) { return (scale(d)); })
         .attr("y", barHeight / 2).attr("dy", ".35em")
         .text(function (d) { return d; });
      </script>
   </body>
</html>

El código anterior mostrará el siguiente resultado en el navegador.

↰ Previous page Next page ↱