Global

Members

(constant) colorScales

A collection of color scales from colormap: https://github.com/bpostlethwaite/colormap
Source:

currentStippledDataSet :null

Holds the last stippled dataset.
Type:
  • null
Source:

stipplingInProgress :boolean

True if stippling is currently in progress, false otherwise.
Type:
  • boolean
Source:

Methods

arrayMax(arr)

Finds the maximum of an array of numbers (use this instead of Math.max(...array) if your array is very large).
Parameters:
Name Type Description
arr an array of numbers
Source:
Returns:
number the maximum value in arr

arrayMin(arr)

Finds the minimum of an array of numbers (use this instead of Math.min(...array) if your array is very large).
Parameters:
Name Type Description
arr an array of numbers
Source:
Returns:
number the minimum value in arr

changeHeightInputVisibility(show)

Changes the visibility of the height field in the UI.
Parameters:
Name Type Default Description
show false a boolean flag. If true, this shows the field in the UI and hides it otherwise.
Source:

clamp(val, lower, upper) → {number}

Clamps a number to a given range.
Parameters:
Name Type Default Description
val the number to clamp to the given range
lower 0 the lower bound of the range val will be clamped to. Defaults to 0.
upper 1 the upper bound of the range val will be clamped to. Defaults to 1.
Source:
Returns:
the clamped value.
Type
number

createGeographicDataImage(data, width, height, projectionMethod, longitudeAttribute, latitudeAttribute, scaleByMaxDensity) → {Object}

A specialization of createImageFromData for geographic projections.
Parameters:
Name Type Default Description
data the data source
width the width of the resulting image
height null the height of the resulting image. If this is not set, it is calculated using getProjectionHeight.
projectionMethod geoAlbersUsa the projection method to use.
longitudeAttribute LON the name of the longitude attribute of items in the data array
latitudeAttribute LAT the name of the latitude attribute of items in the data array.
scaleByMaxDensity false a boolean flag, if set the rendered image is scaled by the maximum density in the image resulting in a grayscale image. Otherwise the result is a binary image. If your data set is sparse you'll probably want the latter.
Source:
Returns:
an object containing the rendered image and the backing 2d array.
Type
Object

createGradientImage(width, height, fromTo)

Creates a gradient image.
Parameters:
Name Type Description
width the width of the image.
height the height of the image.
fromTo a flat array containing the coordinates of the start and end point of the gradient ([x0, y0, x1, y1]), defaults to: [0, 0, width, 0]
Source:
Returns:
gradientImage a CanvasImageData.getImageData

(async) createImageData(imageSource, width) → {Promise.<{densityImage: ImageData, mapToLocation: ImageData}>}

Creates an image from an image source and scales it to the requested size.
Parameters:
Name Type Description
imageSource a file path or a loaded image source (see loadImage)
width the width to which the created image should be scaled to.
Source:
Returns:
Type
Promise.<{densityImage: ImageData, mapToLocation: ImageData}>

createImageFromData(data, width, height, xAttribute, yAttribute, mapLocation, scaleByMaxDensity) → {Object}

Renders a dataset to a CanvasImageData.getImageData and collects the individual data points in a backing 2d array that can be used to map locations in the rendered image to their corresponding data points.
Parameters:
Name Type Default Description
data an array containing the data to render
width the width of the image to render
height the height of the image to render
xAttribute the name of the attribute holding the x-coordinate in a single item in the given data array
yAttribute the name of the attribute holding the y-coordinate in a single item in the given data array
mapLocation a function mapping the x and y coordinate of a single item in the given data array to its location in the rendered image. Takes an array of two floats and returns an array of two floats, defaults to the identity function. If mapLocation is falsy, all x and y coordinates are mapped to the bounds of the rendered image.
scaleByMaxDensity false a boolean flag, if set the rendered image is scaled by the maximum density in the image resulting in a grayscale image. Otherwise the result is a binary image. If your data set is sparse you'll probably want the latter.
Source:
Returns:
an object containing the rendered image and the backing 2d array.
Type
Object

createProjection(width, height, projectionMethod)

Creates a D3 projection.
Parameters:
Name Type Default Description
width the width of the projection
height the height of the projection
projectionMethod geoAlbersUsa the
Source:
Returns:
function a D3 projection.

createQuantization(num) → {Array.<number>}

Creates an array of num equally spaced quantization steps.
Parameters:
Name Type Description
num the number of quantization steps.
Source:
Returns:
an array of quantization steps.
Type
Array.<number>

disableStippling()

Disables triggering the stippling process from the UI.
Source:

enableStippling()

Enables triggering the stippling process from the UI.
Source:

floatArrayToImageData(arr, stride, mapFromMinus1) → {ImageData}

Creates an ImageData from a given 1D array of floating point values, where each value will be converted to a single RGBA value. The alpha component of all values in the resulting ImageData is 255. The length of the array must be divisible by the given stride. The values in the given array are assumed to be either in range [0,1] or [-1,1]. In the latter case, use mapFromMinus1 to indicate that the values should be mapped to [0,1] before converting them to RGBA values. However, the computed color values are clamped to range [0, 255], so unexpected values in the given array are silently ignored.
Parameters:
Name Type Default Description
arr a 1D array of floating point values
stride the stride to use when converting the array (i.e. the width of the resulting ImageData).
mapFromMinus1 false a boolean flag. If set to true, the values in arr are assumed to be in range [-1,1] and are converted to range [0,1] before calculating the RGBA value.
Source:
Returns:
the created ImageData instance
Type
ImageData

geoPath(width, height, projectionMethod) → {any}

Creates a geoPath for a given resolution and projection method.
Parameters:
Name Type Default Description
width the target width of the projection
height the target height of the projection
projectionMethod geoAlbersUsa the projection method to use when creating the geoPath. Defaults to 'geoAlbersUsa'
Source:
Returns:
the created geoPath
Type
any

getColor(v, colorScale, interpolate)

Calculates an RGB color for a floating point value.
Parameters:
Name Type Default Description
v a floating point value in range [0, 1]
colorScale jet the name of a color scale in colorScales
interpolate false a boolean flag. If true, the colors between to steps of the color scale are interpolated
Source:
Returns:
number[] the calculated RGB color

getColorString(v, colorScale, interpolate)

Calculates an RGB color using getColor and returns a string in the form of 'rgb(r, g, b)'.
Parameters:
Name Type Default Description
v a floating point value in range [0, 1]
colorScale jet the name of a color scale in colorScales
interpolate false a boolean flag. If true, the colors between to steps of the color scale are interpolated
Source:
Returns:
string the calculated RGB color as a string

getProjectionHeight(width, projectionMethod) → {number}

Calculates the height for a given width and projection method.
Parameters:
Name Type Default Description
width the width for which the height should be calculated
projectionMethod geoAlbersUsa the projection method for which the height should be calculated
Source:
Returns:
the calculated height
Type
number

getStippleColor(density, invertColors, colorMap, interpolateColor) → {string}

Calculates a color based on a density value (assumed to be in range [0,1]) and chosen color scale configuration. See also: - colorScales - getColorString
Parameters:
Name Type Description
density the density value used to calculate the color
invertColors a boolean flag. If true 1-density is used instead of density.
colorMap the name of a color map in colorScales or 'none'. If this is 'none' the resulting color will be either 'black' or 'white' depending on invertColors.
interpolateColor a boolean flag. If true the colors between colors in the chosen color map are interpolated.
Source:
Returns:
a color string which can be used as value for a 'fill' attribute.
Type
string

getStippleScale(density, stippleScaleMethod) → {number}

Calculates the scaling factor for a stipple based on the density it represents and a scaling method.
Parameters:
Name Type Description
density the density represented by a stipple
stippleScaleMethod a scaling method
Source:
Returns:
the scaling factor for the stipple.
Type
number

getVoronoiCell(x, y, voronoi)

Finds the index of the Voronoi region a given point falls into in a given Voronoi diagram.
Parameters:
Name Type Description
x the x coordinate of the given point
y the y coordinate of the given point
voronoi a Voronoi diagram
Source:
Returns:
number the index of the Voronoi region the given point falls into

imageDataToFloatArray(imageData, rgbaToFloat) → {Object}

Converts an ImageData instance to a float array.
Parameters:
Name Type Description
imageData the ImageData to convert
rgbaToFloat a mapping function for converting an RGBA value to a floating point value. Must have the signature (number, number, number, number) => number. Defaults to rgbaToLuminance.
Source:
Returns:
an object containing the created array as well as the maximum value in the created array.
Type
Object

initCard(data, geographical) → {Card}

Creates a Card filled with a given stippled data set.
Parameters:
Name Type Description
data a stippled data set (e.g. currentStippledDataSet
geographical a boolean flag. If true, the created Card is displayed, otherwise it's hidden.
Source:
Returns:
the created Card.
Type
Card

integerBounds(points, toInt) → {Object}

The axis aligned bounding box of a polygon given as a set of points (i.e. [[x1,y1], [x2,y2], ... , [xN, yN]]) rounded to integer coordinates. Calls polygonBounds internally.
Parameters:
Name Type Description
points an array of points on a polygon (i.e. [[x1,y1], [x2,y2], ... , [xN, yN]]).
toInt a function for mapping floating point values to integers. Must have the signature (number) => number. Defaults to Math#round.
Source:
Returns:
the axis aligned bounding box of the given polygon with integer coordinates only.
Type
Object

(async) loadImage(src) → {Promise.<Image>}

Creates an image from a given source.
Parameters:
Name Type Description
src the source for the image
Source:
Returns:
the created image
Type
Promise.<Image>

(async) loadStates(name) → {Promise.<{inspector: boolean, debug: boolean, uv: boolean, ipv6: boolean, tls_alpn: boolean, tls_sni: boolean, tls_ocsp: boolean, tls: boolean}>}

Loads the topojson-features from a JSON file referenced by its name.
Parameters:
Name Type Description
name the name of the JSON file.
Source:
Returns:
the laoded features
Type
Promise.<{inspector: boolean, debug: boolean, uv: boolean, ipv6: boolean, tls_alpn: boolean, tls_sni: boolean, tls_ocsp: boolean, tls: boolean}>

openTab(name)

Shows the form corresponding to a tab referenced by its name.
Parameters:
Name Type Description
name the name of the tab to show.
Source:

polygonBounds(points) → {Object}

Calculates the axis aligned bounding box of a given polygon given as a set of points (i.e. [[x1,y1], [x2,y2], ... , [xN, yN]]).
Parameters:
Name Type Description
points an array of points on a polygon (i.e. [[x1,y1], [x2,y2], ... , [xN, yN]]).
Source:
Returns:
the axis aligned bounding box of the given polygon given by its minimum and maximum position (i.e. their coordinates as a number array [x1,y1]).
Type
Object

quantize(arr, quantization) → {Array.<number>}

Quantize a given array of floating point values based on a given quantization array (e.g. as returned by createQuantization). All values in the given array are assumed to be between 0 and 1. Otherwise the given quantization steps should match the scale of the given array.
Parameters:
Name Type Description
arr the array of floating point values that should be quantized.
quantization an array of quantization steps (e.g. as returned by createQuantization).
Source:
Returns:
the quantized array of floating point values
Type
Array.<number>

readFile(file) → {Promise.<unknown>}

Reads a file and returns the file's contents.
Parameters:
Name Type Description
file a Blob
Source:
Returns:
the file's contents
Type
Promise.<unknown>

rgbaToLuminance(r, g, b, _a) → {number}

Converts an RGBA color to a luminance value. Each component is assumed to be in range [0, 255]. The alpha component is ignored.
Parameters:
Name Type Description
r the R component of the RGBA color.
g the G component of the RGBA color.
b the B component of the RGBA color.
_a the A component of the RGBA color. This value is ignored.
Source:
Returns:
the calculated luminance value.
Type
number

scaleToRange(oMin, oMax, tMin, tMax, v)

Scales a value from an original range to a target range.
Parameters:
Name Type Description
oMin the minimum value of the original range.
oMax the maximum value of the original range.
tMin the minimum value of the target range.
tMax the maximum value of the target range.
v the value to scale.
Source:
Returns:
number the value of v in the target range

showDataSetForm()

Shows the data set form corresponding to the user's data set selection in the UI. This also sets some default values for specific data set selections. E.g. the default width for image data sets is set to 200.
Source:

showImage(img, divName)

Creates a canvas as a child of a div-tag and uses it to present the given ImageData instance.
Parameters:
Name Type Description
img the ImageData to show
divName a string, the id of the div
Source:

showMachBandingForm()

Shows the machbanding form in the UI.
Source:

splitCell(cell) → {Object}

Calculates two new cell centroids from a Voronoi cell that should be split.
Parameters:
Name Type Description
cell the convex hull of a Voronoi cell as an array of points (i.e. [[x1,y1], [x2,y2], ... , [xN, yN]]).
Source:
Returns:
the two new centers of the split Voronoi cell
Type
Object

(async) stipple(targetDensityFunction, stippleRadius, initialErrorThreshold, thresholdConvergenceRate) → {Promise.<{voronoi: any, stipples: Array.<Stipple>}>}

Creates stipples for a given target density function (DensityFunction2D) using the algorithm presented by Görtler et al. (Stippling of 2D Scalar Fields). For contouring techniques either use a DensityFunction2D created via DensityFunction2D#machBandingFromImageData2D or a RestrictedStipplingDensityFunction2D instead of a plain DensityFunction2D. Note that the function returns a Promise, so you either have to await it in an async context or use its return values in a Promise chain.
Parameters:
Name Type Default Description
targetDensityFunction a DensityFunction2D
stippleRadius 5 the radius of a Stipple with respect to the resolution of the DensityFunction2D
initialErrorThreshold 0 the initial error threshold used for splitting and merging stipples.
thresholdConvergenceRate 0.01 the error threshold is increased by this amount in every iteration
Source:
Returns:
an object containing an array of genereated Stipple instances as well as a corresponding Voronoi diagram.
Type
Promise.<{voronoi: any, stipples: Array.<Stipple>}>

stippleBounds(stipple, voronoi) → {Object}

Calculates the axis aligned bounding box of a Stipple using the corresponding Voronoi diagram that was returned alongside the Stipple by stipple or stippleParallel. See also: - getVoronoiCell - polygonBounds
Parameters:
Name Type Description
stipple the given Stipple
voronoi the Voronoi diagram
Source:
Returns:
the axis aligned bounding box of the given Stipple
Type
Object

stippleDataSet() → {boolean}

Collects all data from the UI and stipples the chosen data set using the chosen parameters. As soon as it has completed currentStippledDataSet is overwritten and visualizeCurrentStipples is triggered. If stipplingInProgress is true this function has no effect. See also: - stipple - DensityFunction2D#fromImageData2D - DensityFunction2D#machBandingFromImageData2D - createGeographicDataImage - createImageData - createGradientImage - createImageFromData
Source:
Returns:
always false.
Type
boolean

(async) stippleParallel(targetDensityFunction, stippleRadius, initialErrorThreshold, thresholdConvergenceRate) → {Promise.<{voronoi: any, stipples: Array.<any>}>}

Creates stipples for a given target density function (DensityFunction2D) using the algorithm presented by Görtler et al. (Stippling of 2D Scalar Fields). For contouring techniques either use a DensityFunction2D created via DensityFunction2D#machBandingFromImageData2D or a RestrictedStipplingDensityFunction2D instead of a plain DensityFunction2D. Note that the function returns a Promise, so you either have to await it in an async context or use its return values in a Promise chain. Note: this is currently much slower than stipple. The reason for this is that DensityFunction2D.areaDensity is not optimized. Another problem with this version is that the contouring effect is much weaker than in stipple. Probably because some density values don't contribute to the density of their Voronoi cells due to rounding errors.
Parameters:
Name Type Default Description
targetDensityFunction a DensityFunction2D
stippleRadius 5 the radius of a Stipple with respect to the resolution of the DensityFunction2D
initialErrorThreshold 0 the initial error threshold used for splitting and merging stipples.
thresholdConvergenceRate 0.01 the error threshold is increased by this amount in every iteration
Source:
Returns:
an object containing an array of genereated Stipple instances as well as a corresponding Voronoi diagram.
Type
Promise.<{voronoi: any, stipples: Array.<any>}>

(async) visualizeCurrentStipples() → {Promise.<void>}

Visualizes currentStippledDataSet if it is not null. Triggered on every change in the 'style' tab in the UI. If stipplingInProgress is true this function has no effect.
Source:
Returns:
Type
Promise.<void>