Skip to content

Commit

Permalink
simplify README
Browse files Browse the repository at this point in the history
  • Loading branch information
@sgratzl
sgratzl committed Aug 18, 2020
1 parent 6758c95 commit 63afb0f
Showing 1 changed file with 10 additions and 247 deletions.
257 changes: 10 additions & 247 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Chart.js Graphs
# Chart.js Geo

[![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]

Expand Down Expand Up @@ -40,38 +40,7 @@ CodePens

The option can be set globally or per dataset

```ts
interface IGeoChartOptions {
/**
* Outline used to scale and centralize the projection in the chart area.
* By default a sphere is used
* @default { type: 'Sphere" }
*/
outline: Feature | Feature[];
/**
* option to render the outline in the background, see also the outline... styling option
* @default false
*/
showOutline: boolean;

/**
* option to render a graticule in the background, see also the outline... styling option
* @default false
*/
showGraticule:
| boolean
| {
stepMajor: [number, number];
stepMinor: [number, number];
};

/**
* option whether to clip the rendering to the chartArea of the graph
* @default choropleth: true bubbleMap: 'outline+graticule'
*/
clipMap: boolean | 'outline' | 'graticule' | 'outline+graticule' | 'items';
}
```
see https://github.com/sgratzl/chartjs-chart-geo/blob/develop/src/controllers/geo.ts#L213

## Choropleth

Expand Down Expand Up @@ -141,128 +110,16 @@ const config = {

The styling of the new element `GeoFeature` is based on [Rectangle Element](https://www.chartjs.org/docs/latest/configuration/elements.html#rectangle-configuration) with some additional options for the outline and graticule.

```ts
interface IGeoFeatureOptions {
// all options of an Rectangle

/**
* background color for the outline
* @default null
*/
outlineBackgroundColor: string | null;
/**
* border color for the outline
* @default defaultColor of Chart.js
*/
outlineBorderColor: string;
/**
* border width for the outline
* @default 0
*/
outlineBorderWidth: number;

/**
* border color for the graticule
* @default #CCCCCC
*/
graticuleBorderColor: string;
/**
* border width for the graticule
* @default 0
*/
graticuleBorderWidth: string;
}
```
see https://github.com/sgratzl/chartjs-chart-geo/blob/develop/src/elements/geoFeature.ts#L5

### Legend and Color Scale

The coloring of the nodes will be done with a special color scale. The scale itself is based on a linear scale.

```ts
interface IChartOptions {
scales: {
color: IColorScaleOptions;
}
}
see

interface IColorScaleOptions {
// support all options from linear scale -> https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#linear-cartesian-axis
// e.g. for tick manipulation, ...

/**
* whether to render a color legend
* @default false (for compatibility reasons)
*/
display: boolean;

/**
* color interpolation method which is either a function
* converting a normalized value to string or a
* well defined string of all the interpolation scales
* from https://github.com/d3/d3-scale-chromatic.
* e.g. interpolateBlues -> blues
*
* @default blues
*/
interpolate: string | (normalizedValue: number) => string;

/**
* color value to render for missing values
* @default transparent
*/
missing: string;

/**
* allows to split the colorscale in N quantized equal bins.
* @default 0
*/
quantize: number;

/**
* the property name that stores the value in the data elements
* @default value
*/
property: string;

legend: {
/**
* location of the legend on the chart area
* @default bottom-right
*/
position: 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'top-right' | 'bottom-right';
/**
* alignment of the scale, e.g., `right` means that it is a vertical scale
* with the ticks on the right side
* @default right
*/
align: 'left' | 'right' | 'top' | 'bottom';
/**
* length of the legend, i.e., for a horizontal scale the width
* if a value < 1 is given, is it assume to be a ratio of the corresponding
* chart area
* @default 100
*/
length: number;
/**
* how wide the scale is, i.e., for a horizontal scale the height
* if a value < 1 is given, is it assume to be a ratio of the corresponding
* chart area
* @default 50
*/
width: number;
/**
* how many pixels should be used for the color bar
* @default 10
*/
indicatorWidth: number;
/**
* margin pixels such that it doesn't stick to the edge of the chart
* @default 8
*/
margin: number;
}
}
```
- https://github.com/sgratzl/chartjs-chart-geo/blob/develop/src/scales/base.ts#L3
- https://github.com/sgratzl/chartjs-chart-geo/blob/develop/src/scales/color.ts#L114

## Bubble Map

Expand Down Expand Up @@ -294,110 +151,16 @@ A regular point is used and thus supports the [Point Element](https://www.chartj

Similar to the choropleth chart a new `radiusScale` is used to map the values to symbol radius size. The scale itself is based on a linear scale.

```ts
interface IChartOptions {
scales: {
color: ISizeScaleOptions;
};
}
see

interface ISizeScaleOptions {
// support all options from linear scale -> https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#linear-cartesian-axis
// e.g. for tick manipulation, ...

/**
* whether to render a color legend
* @default false (for compatibility reasons)
*/
display: boolean;

/**
* radius range in pixel, the minimal data value will be mapped to the
* first entry, the maximal one to the second and a linear interpolation
* for all values in between.
*
* @default [2, 20]
*/
range: [number, number];

/**
* operation mode for the scale, area means that the area is linearly increasing whereas radius the radius is.
* The area one is the default since it gives a better visual comparison of values
* @default area
*/
mode: 'radius' | 'area';

/**
* radius to render for missing values
* @default 1
*/
missing: number;

/**
* the property name that stores the value in the data elements
* @default value
*/
property: string;

legend: {
/**
* location of the legend on the chart area
* @default bottom-right
*/
position: 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'top-right' | 'bottom-right';
/**
* alignment of the scale, e.g., `right` means that it is a vertical scale
* with the ticks on the right side
* @default bottom
*/
align: 'left' | 'right' | 'top' | 'bottom';
/**
* length of the legend, i.e., for a horizontal scale the width
* if a value < 1 is given, is it assume to be a ratio of the corresponding
* chart area
* @default 90
*/
length: number;
/**
* how wide the scale is, i.e., for a horizontal scale the height
* if a value < 1 is given, is it assume to be a ratio of the corresponding
* chart area
* @default 70
*/
width: number;
/**
* how many pixels should be used for the color bar
* @default 42
*/
indicatorWidth: number;
/**
* margin pixels such that it doesn't stick to the edge of the chart
* @default 8
*/
margin: number;
};
}
```
- https://github.com/sgratzl/chartjs-chart-geo/blob/develop/src/scales/base.ts#L3
- https://github.com/sgratzl/chartjs-chart-geo/blob/develop/src/scales/size.ts#L15

## Scales

A new scale `projection` is registered and used by default by Choropleth and BubbleMap. It provides just one option to specify the projection method. The available methods are the one from https://github.com/d3/d3-geo#projections. Just remove the `geo` prefix. Alternatively, the projection method instance can be directly given.

```ts
interface IChartOptions {
scales: {
xy: IProjectionScaleOptions;
};
}

interface IProjectionScaleOptions {
/**
* projection method used
* @default albersUsa
*/
projection: string | Function;
}
```
see https://github.com/sgratzl/chartjs-chart-geo/blob/develop/src/scales/projection.ts#L49

### ESM and Tree Shaking

Expand Down

0 comments on commit 63afb0f

Please sign in to comment.