@vx/scale - npm Package Compare versions

Comparing version 0.0.196 to 0.0.197

lib/scales/symlog.d.ts

@@ -9,3 +9,3 @@ export declare type SymlogConfig = {
 };
-export default function symLogScale({ range, domain, constant }: SymlogConfig): any;
+export default function symLogScale({ range, domain, constant }: SymlogConfig): import("d3-scale").ScaleSymLog<number, number>;
 //# sourceMappingURL=symlog.d.ts.map

package.json

 {
   "name": "@vx/scale",
-  "version": "0.0.196",
+  "version": "0.0.197",
   "description": "vx scale",
@@ -37,3 +37,3 @@ "sideEffects": false,
   },
-  "gitHead": "0b9ff48c735be9a9273f38750120e7fe2fb2caaf"
+  "gitHead": "c56b64bfbedde9ca06255b2eeff84b52c49d57ea"
 }

Readme.md

 # @vx/scale
 
+<a title="@vx/scale npm downloads" href="https://www.npmjs.com/package/@vx/scale">
+  <img src="https://img.shields.io/npm/dm/@vx/scale.svg?style=flat-square" />
+</a>
+
+## Installation
+
 ```sh
@@ -7,18 +13,33 @@ npm install --save @vx/scale
 
-## Overview of Scaling
-The `@vx/scale` package aims to provide a wrapper around existing d3 scaling originally defined in the [d3-scale](https://github.com/d3/d3-scale) package.
+## Overview of scales
 
-Scales are functions that help you map your data to the physical pixel size that your graph requires. For example, let's say you wanted to create a bar chart to show populations per country. If you were to use a 1-to-1 scale (IE: 1 pixel per y value) your bar for the USA would be about 321.4 million pixels high!
+The `@vx/scale` package aims to provide a wrapper around existing `d3` scaling originally defined in
+the [d3-scale](https://github.com/d3/d3-scale) package.
 
-Instead, you can tell vx a function to use that takes a value (like your population per country) and spits out another value.
+Scales are functions that help you map your data values to the physical pixel size that your graph
+requires. For example, let's say you wanted to create a bar chart to show populations per country.
+If you were to use a 1-to-1 scale (IE: 1 pixel per y value) your bar for the USA would be about
+321.4 million pixels high!
 
+Instead, you can tell `vx` a function to use that takes a data value (like your population per
+country) and quantitatively maps to another dimensional space, like pixels.
+
 For example, we could create a linear scale like this:
 
-``` javascript
-const graphHeight = 500; // We'll have a 500 pixel high graph
-const maxPopulation = getMostPopulatedCountryInTheWorld();
+```js
+const graphWidth = 500;
+const graphHeight = 200;
+const [minX, maxX] = getXMinAndMax();
+const [minY, maxY] = getYMinAndMax();
 
+const xScale = Scale.scaleLinear({
+  domain: [minX, maxX], // x-coordinate data values
+  rangeRound: [0, graphWidth], // svg x-coordinates, svg x-coordinates increase left to right
+});
+
 const yScale = Scale.scaleLinear({
+  domain: [minY, maxY], // y-coordinate data values
+  // svg y-coordinates, these increase from top to bottom so we reverse the order
+  // so that minY in data space maps to graphHeight in svg y-coordinate space
   rangeRound: [graphHeight, 0],
-  domain: [0, maxPopulation],
 });
@@ -28,18 +49,17 @@
 
-const bars = data.map((d, i) => {
+const points = data.map((d, i) => {
   const barHeight = graphHeight - yScale(d.y);
-  return <Shape.Bar height={barHeight} y={graphHeight - barHeight} />
-})
+  return <Shape.Bar height={barHeight} y={graphHeight - barHeight} />;
+});
 ```
 
-**Note:** This example represents how to use a yScale, but skipped a lot of details about how to make a bar chart. If you're trying to do that, you should check out [this example](https://github.com/hshoff/vx/blob/master/packages/vx-demo/src/components/charts/SimpleBar.ts).
+## Different types of scales
 
-## Current Scaling Options
+### Band scale
 
-### Band Scaling
-
 [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#_band)
 
 Example:
-``` javascript
+
+```js
 const scale = Scale.scaleBand({
@@ -56,3 +76,3 @@ /*
 
-### Linear Scaling
+### Linear scale
 
@@ -62,3 +82,4 @@ [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear)
 Example:
-``` javascript
+
+```js
 const scale = Scale.scaleLinear({
@@ -75,3 +96,3 @@ /*
 
-### Log Scaling
+### Log scale
 
@@ -81,3 +102,4 @@ [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scaleLog)
 Example:
-``` javascript
+
+```js
 const scale = Scale.scaleLog({
@@ -95,7 +117,9 @@ /*
 
-### Ordinal Scaling
+### Ordinal scale
+
 [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scaleOrdinal)
 
 Example:
-``` javascript
+
+```js
 const scale = Scale.scaleOrdinal({
@@ -110,7 +134,9 @@ /*
 
-### Point Scaling
+### Point scale
+
 [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scalePoint)
 
 Example:
-``` javascript
+
+```js
 const scale = Scale.scalePoint({
@@ -128,7 +154,9 @@ /*
 
-### Power Scaling
+### Power scale
+
 [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scalePow)
 
 Example:
-``` javascript
+
+```js
 const scale = Scale.scalePower({
@@ -146,3 +174,3 @@ /*
 
-### Square Root Scaling
+### Square Root scale
 
@@ -153,3 +181,3 @@ [Original d3 docs](https://github.com/d3/d3-scale#scaleSqrt)
 
-```javascript
+```js
 // No need to set the exponent, It is always 0.5
@@ -167,7 +195,9 @@ const scale = Scale.scaleSqrt({
 
-### Time Scaling
+### Time scale
+
 [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime)
 
 Example:
-``` javascript
+
+```js
 const scale = Scale.scaleTime({
@@ -187,3 +217,4 @@ /*
 Example:
-``` javascript
+
+```js
 const scale = Scale.scaleUtc({
@@ -202,3 +233,5 @@ /*
 
-D3 scales offer the ability to map points to colors.  You can use [`d3-scale-chromatic`](https://github.com/d3/d3-scale-chromatic) in conjunction with vx's `scaleOrdinal` to make color scales.
+D3 scales offer the ability to map points to colors. You can use
+[`d3-scale-chromatic`](https://github.com/d3/d3-scale-chromatic) in conjunction with vx's
+`scaleOrdinal` to make color scales.
 
@@ -213,3 +246,3 @@ You can install `d3-scale-chromatic` with npm:
 
-```javascript
+```js
 import { scaleOrdinal } from '@vx/scale';
@@ -220,3 +253,3 @@ import { schemeSet1 } from 'd3-scale-chromatic';
   domain: arrayOfThings,
-  range: schemeSet1
+  range: schemeSet1,
 });
@@ -229,2 +262,4 @@ ```
 
-There are a number of other [categorical color schemes](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#categorical) available, along with other continuous color schemes.
+There are a number of other
+[categorical color schemes](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#categorical)
+available, along with other continuous color schemes.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44084

increased by0.65%

Number of lines in readme file

249

increased by16.36%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes