@mapd/mapdc

1.0.0

legend

Legend is a attachable widget that can be added to other dc charts to render horizontal legend labels.

Examples:

legend(): dc.legend
Returns
dc.legend:
Example
chart.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
Instance Members
x(x)
y(y)
gap(gap)
itemHeight(itemHeight)
horizontal(horizontal)
legendWidth(legendWidth)
itemWidth(itemWidth)
autoItemWidth(autoItemWidth)

barChart

Concrete bar chart/histogram implementation.

Examples:

new barChart(parent: (String | node | d3.selection | dc.compositeChart), chartGroup: String?): dc.barChart
Parameters
parent ((String | node | d3.selection | dc.compositeChart)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection. If the bar chart is a sub-chart in a Composite Chart then pass in the parent composite chart instance instead.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.barChart:
Example
// create a bar chart under #chart-container1 element using the default global chart group
var chart1 = dc.barChart('#chart-container1');
// create a bar chart under #chart-container2 element using chart group A
var chart2 = dc.barChart('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = dc.barChart(compositeChart);
Instance Members
centerBar(centerBar)
barPadding(barPadding)
outerPadding
gap(gap)
alwaysUseRounding(alwaysUseRounding)

boxPlot

A box plot is a chart that depicts numerical data via their quartile ranges. Examples:

boxPlot(parent: (String | node | d3.selection), chartGroup: String?): dc.boxPlot
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.boxPlot:
Example
// create a box plot under #chart-container1 element using the default global chart group
var boxPlot1 = dc.boxPlot('#chart-container1');
// create a box plot under #chart-container2 element using chart group A
var boxPlot2 = dc.boxPlot('#chart-container2', 'chartGroupA');
Instance Members
boxPadding
outerPadding
boxWidth(boxWidth)
tickFormat(tickFormat?)

bubbleChart

A concrete implementation of a general purpose bubble chart that allows data visualization using the following dimensions:

bubbleChart(parent: (String | node | d3.selection), chartGroup: String?): dc.bubbleChart
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.bubbleChart:
Example
// create a bubble chart under #chart-container1 element using the default global chart group
var bubbleChart1 = dc.bubbleChart('#chart-container1');
// create a bubble chart under #chart-container2 element using chart group A
var bubbleChart2 = dc.bubbleChart('#chart-container2', 'chartGroupA');
Instance Members
elasticRadius(elasticRadius)
sortBubbleSize(sortBubbleSize)

bubbleOverlay

The bubble overlay chart is quite different from the typical bubble chart. With the bubble overlay chart you can arbitrarily place bubbles on an existing svg or bitmap image, thus changing the typical x and y positioning while retaining the capability to visualize data using bubble radius and coloring. Examples:

bubbleOverlay(parent: (String | node | d3.selection), chartGroup: String?): dc.bubbleOverlay
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.bubbleOverlay:
Example
// create a bubble overlay chart on top of the '#chart-container1 svg' element using the default global chart group
var bubbleChart1 = dc.bubbleOverlayChart('#chart-container1').svg(d3.select('#chart-container1 svg'));
// create a bubble overlay chart on top of the '#chart-container2 svg' element using chart group A
var bubbleChart2 = dc.compositeChart('#chart-container2', 'chartGroupA').svg(d3.select('#chart-container2 svg'));
Instance Members
svg
point(name, x, y)

compositeChart

Composite charts are a special kind of chart that render multiple charts on the same Coordinate Grid. You can overlay (compose) different bar/line/area charts in a single composite chart to achieve some quite flexible charting effects.

compositeChart(parent: (String | node | d3.selection), chartGroup: String?): dc.compositeChart
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.compositeChart:
Example
// create a composite chart under #chart-container1 element using the default global chart group
var compositeChart1 = dc.compositeChart('#chart-container1');
// create a composite chart under #chart-container2 element using chart group A
var compositeChart2 = dc.compositeChart('#chart-container2', 'chartGroupA');
Instance Members
useRightAxisGridLines(useRightAxisGridLines)
childOptions(childOptions?)
rightYAxisLabel(rightYAxisLabel?, padding?)
compose(subChartArray?)
children()
shareColors(shareColors)
shareTitle(shareTitle)
rightY(yScale?)
alignYAxes(alignYAxes)
rightYAxis(rightYAxis?)

dataCount

The data count widget is a simple widget designed to display the number of records selected by the current filters out of the total number of records in the data set. Once created the data count widget will automatically update the text content of the following elements under the parent element.

'.total-count' - total number of records '.filter-count' - number of records matched by the current filters

Examples:

dataCount(parent: (String | node | d3.selection), chartGroup: String?): dc.dataCount
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.dataCount:
Example
var ndx = crossfilter(data);
var all = ndx.groupAll();

dc.dataCount('.dc-data-count')
    .dimension(ndx)
    .group(all);
Instance Members
html(options?)
formatNumber(formatter)

dataGrid

Data grid is a simple widget designed to list the filtered records, providing a simple way to define how the items are displayed.

Note: Unlike other charts, the data grid chart (and data table) use the group attribute as a keying function for nesting the data together in groups. Do not pass in a crossfilter group as this will not work.

Examples:

dataGrid(parent: (String | node | d3.selection), chartGroup: String?): dc.dataGrid
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.dataGrid:
Instance Members
beginSlice(beginSlice)
endSlice(endSlice?)
size(size)
html(html?)
htmlGroup(htmlGroup?)
sortBy(sortByFunction?)
order(order)

dataTable

The data table is a simple widget designed to list crossfilter focused data set (rows being filtered) in a good old tabular fashion.

Note: Unlike other charts, the data table (and data grid chart) use the group attribute as a keying function for nesting the data together in groups. Do not pass in a crossfilter group as this will not work.

Another interesting feature of the data table is that you can pass a crossfilter group to the dimension, as long as you specify the order as d3.descending, since the data table will use dimension.top() to fetch the data in that case, and the method is equally supported on the crossfilter group as the crossfilter dimension.

Examples:

new dataTable(parent: (String | node | d3.selection), chartGroup: String?): dc.dataTable
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.dataTable:
Instance Members
size(size)
beginSlice(beginSlice)
endSlice(endSlice)
columns(columns)
sortBy(sortBy?)
order(order)
showGroups(showGroups)

geoChoroplethChart

The geo choropleth chart is designed as an easy way to create a crossfilter driven choropleth map from GeoJson data. This chart implementation was inspired by the great d3 choropleth example.

Examples:

geoChoroplethChart(parent: (String | node | d3.selection), useMap: any, chartGroup: String?, mapbox: any): dc.geoChoroplethChart
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
useMap (any)
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
mapbox (any)
Returns
dc.geoChoroplethChart:
Example
// create a choropleth chart under '#us-chart' element using the default global chart group
var chart1 = dc.geoChoroplethChart('#us-chart');
// create a choropleth chart under '#us-chart2' element using chart group A
var chart2 = dc.compositeChart('#us-chart2', 'chartGroupA');
Instance Members
overlayGeoJson(json, name, keyAccessor)
projection(projection)
geoJsons()
geoPath()
removeGeoJson(name)

heatMap

A heat map is matrix that represents the values of two dimensions of data using colors.

heatMap

Type: number

Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.heatMap:
Example
// create a heat map under #chart-container1 element using the default global chart group
var heatMap1 = dc.heatMap('#chart-container1');
// create a heat map under #chart-container2 element using chart group A
var heatMap2 = dc.heatMap('#chart-container2', 'chartGroupA');
Instance Members
colsLabel(labelFunction)
rowsLabel(labelFunction)
rows(rows?)
cols(cols?)
boxOnClick(handler?)
xAxisOnClick(handler?)
yAxisOnClick(handler?)
xBorderRadius(xBorderRadius)
yBorderRadius(yBorderRadius)

lineChart

Concrete line/area chart implementation.

Examples:

lineChart(parent: (String | node | d3.selection | dc.compositeChart), chartGroup: String?): dc.lineChart
Parameters
parent ((String | node | d3.selection | dc.compositeChart)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection. If the line chart is a sub-chart in a Composite Chart then pass in the parent composite chart instance instead.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.lineChart:
Example
// create a line chart under #chart-container1 element using the default global chart group
var chart1 = dc.lineChart('#chart-container1');
// create a line chart under #chart-container2 element using chart group A
var chart2 = dc.lineChart('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = dc.lineChart(compositeChart);
Instance Members
interpolate(interpolate)
tension(tension)
defined(defined?)
dashStyle(dashStyle)
renderArea(renderArea)
xyTipsOn(xyTipsOn)
dotRadius(dotRadius)
renderDataPoints(options)

pieChart

The pie chart implementation is usually used to visualize a small categorical distribution. The pie chart uses keyAccessor to determine the slices, and valueAccessor to calculate the size of each slice relative to the sum of all values. Slices are ordered by ordering which defaults to sorting by key.

Examples:

pieChart(parent: (String | node | d3.selection), chartGroup: String?): dc.pieChart
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.pieChart:
Example
// create a pie chart under #chart-container1 element using the default global chart group
var chart1 = dc.pieChart('#chart-container1');
// create a pie chart under #chart-container2 element using chart group A
var chart2 = dc.pieChart('#chart-container2', 'chartGroupA');
Instance Members
slicesCap
externalRadiusPadding(externalRadiusPadding)
innerRadius(innerRadius)
radius(radius?)
cx(cx?)
cy(cy?)
minAngleForLabel(minAngleForLabel)
emptyTitle(title?)
externalLabels(externalLabelRadius?)
drawPaths(drawPaths?)

rowChart

Concrete row chart implementation.

Examples:

rowChart(parent: (String | node | d3.selection), chartGroup: String?): dc.rowChart
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.rowChart:
Example
// create a row chart under #chart-container1 element using the default global chart group
var chart1 = dc.rowChart('#chart-container1');
// create a row chart under #chart-container2 element using chart group A
var chart2 = dc.rowChart('#chart-container2', 'chartGroupA');
Instance Members
x(scale?)
renderTitleLabel(renderTitleLabel)
xAxis()
fixedBarHeight(fixedBarHeight)
gap(gap)
elasticX(elasticX?)
labelOffsetX(labelOffsetX)
labelOffsetY(labelOffsety)
titleLabelOffsetX(titleLabelOffsetX)

scatterPlot

A scatter plot chart

Examples:

scatterPlot(parent: (String | node | d3.selection), chartGroup: String?): dc.scatterPlot
Parameters
parent ((String | node | d3.selection)) Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup (String?) The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Returns
dc.scatterPlot:
Example
// create a scatter plot under #chart-container1 element using the default global chart group
var chart1 = dc.scatterPlot('#chart-container1');
// create a scatter plot under #chart-container2 element using chart group A
var chart2 = dc.scatterPlot('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = dc.scatterPlot(compositeChart);
Instance Members
existenceAccessor(accessor?)
symbol(type)
symbolSize(symbolSize)
highlightedSize(highlightedSize)
hiddenSize(hiddenSize)

filterAll

Clear all filters on all charts within the given chart group. If the chart group is not given then only charts that belong to the default chart group will be reset.

filterAll(group: String?)
Parameters
group (String?)

refocusAll

Reset zoom level / focus on all charts that belong to the given chart group. If the chart group is not given then only charts that belong to the default chart group will be reset.

refocusAll(group: String?)
Parameters
group (String?)

units

units

events.trigger

This function triggers a throttled event function with a specified delay (in milli-seconds). Events that are triggered repetitively due to user interaction such brush dragging might flood the library and invoke more renders than can be executed in time. Using this function to wrap your event function allows the library to smooth out the rendering by throttling events and only responding to the most recent event.

events.trigger(closure: Function, delay: Number?)
Parameters
closure (Function)
delay (Number?)
Example
chart.on('renderlet', function(chart) {
    // smooth the rendering through event throttling
    dc.events.trigger(function(){
        // focus some other chart to the range selected by user on this chart
        someOtherChart.focus(chart.filter());
    });
})

filters

The dc.js filters are functions which are passed into crossfilter to chose which records will be accumulated to produce values for the charts. In the crossfilter model, any filters applied on one dimension will affect all the other dimensions but not that one. dc always applies a filter function to the dimension; the function combines multiple filters and if any of them accept a record, it is filtered in.

These filter constructors are used as appropriate by the various charts to implement brushing. We mention below which chart uses which filter. In some cases, many instances of a filter will be added.

Each of the dc.js filters is an object with the following properties:

  • isFiltered - a function that returns true if a value is within the filter
  • filterType - a string identifying the filter, here the name of the constructor

Currently these filter objects are also arrays, but this is not a requirement. Custom filters can be used as long as they have the properties above.

filters
Static Members
new RangedFilter(low, high)

baseMixin

dc.baseMixin is an abstract functional object representing a basic dc chart object for all chart and widget implementations. Methods from the dc.baseMixin are inherited and available on all chart implementations in the dc library.

baseMixin
Parameters
_chart (Object)
Returns
dc.baseMixin:
Instance Members
height(height?)
width(width?)
minWidth(minWidth)
minHeight(minHeight)
dimension(dimension?)
dimension(dimension?)
data(callback?)
group(group?, name?)
group(group?, name?)
ordering(orderFunction?)
select(s)
selectAll(s)
anchor(parent?, chartGroup?)
anchorName()
root(rootElement?)
svg(svgElement?)
resetSvg()
filterPrinter(filterPrinterFunction)
controlsUseVisibility(_, controlsUseVisibility)
turnOnControls()
turnOffControls()
transitionDuration(duration)
render(id?, queryGroupId?, queryCount?, data?, callback?)
redraw(id?, queryGroupId?, queryCount?, data?, callback?)
commitHandler(commitHandler)
redrawGroup(callback)
renderGroup(callback)
hasFilterHandler(hasFilterHandler?)
hasFilter(filter?)
removeFilterHandler(removeFilterHandler?)
addFilterHandler(addFilterHandler?)
resetFilterHandler(resetFilterHandler?)
filter(filter?, isFilterInverse)
filters()
onClick(datum)
filterHandler(filterHandler?)
keyAccessor(keyAccessor?)
valueAccessor(valueAccessor?)
label(labelFunction?, enableLabels)
renderLabel(renderLabel)
title(titleFunction?)
renderTitle(renderTitle)
renderlet
chartGroup(chartGroup?)
expireCache()
destroyChart()
legend(legend?)
chartID()
options(opts)
on(event, listener)
filterAll(_softFilterClear)
handleFilterClick(event, filter)

bubbleMixin

This Mixin provides reusable functionalities for any chart that needs to visualize data using bubbles.

bubbleMixin
Parameters
_chart (Object)
Returns
dc.bubbleMixin:
Instance Members
r(bubbleRadiusScale)
radiusValueAccessor(radiusValueAccessor?)
minRadius(radius)
minRadiusWithLabel(radius)
maxBubbleRelativeSize(relativeSize)

capMixin

Cap is a mixin that groups small data elements below a cap into an others grouping for both the Row and Pie Charts.

The top ordered elements in the group up to the cap amount will be kept in the chart, and the rest will be replaced with an others element, with value equal to the sum of the replaced values. The keys of the elements below the cap limit are recorded in order to filter by those keys when the others* element is clicked.

capMixin
Parameters
_chart (Object)
Returns
dc.capMixin:
Instance Members
cap(count)
othersLabel(label)
othersGrouper(grouperFunction?)

colorMixin

The Color Mixin is an abstract chart functional class providing universal coloring support as a mix-in for any concrete chart implementation.

colorMixin
Parameters
_chart (Object)
Returns
dc.colorMixin:
Instance Members
colors(colorScale)
ordinalColors(r)
linearColors(r)
colorAccessor(colorAccessor?)
colorDomain(domain?)
calculateColorDomain()
getColor(data, index, d, i?)
colorCalculator(colorCalculator?)

coordinateGridMixin

Coordinate Grid is an abstract base chart designed to support a number of coordinate grid based concrete chart types, e.g. bar chart, line chart, and bubble chart.

coordinateGridMixin
Parameters
_chart (Object)
Returns
dc.coordinateGridMixin:
Instance Members
rescale()
rangeChart(rangeChart?)
zoomScale(extent)
zoomOutRestrict(zoomOutRestrict)
g(gElement?)
mouseZoomable(mouseZoomable)
chartBodyG(chartBodyG?)
x(xScale?)
xUnits(xUnits?)
xAxis(xAxis)
elasticX(elasticX)
xAxisPadding(padding)
xUnitCount()
useRightYAxis(useRightYAxis)
isOrdinal()
xAxisLabel(labelText?, padding)
yAxisLabel(labelText?, padding)
y(yScale?)
yAxis(yAxis)
elasticY(elasticY)
renderHorizontalGridLines(renderHorizontalGridLines)
renderVerticalGridLines(renderVerticalGridLines)
xAxisMin()
xAxisMax()
yAxisMin()
yAxisMax()
yAxisPadding(padding)
round(round?)
clipPadding(padding)
focus(range?)
brushOn(brushOn)

coordinateGridRasterMixin

Coordinate Grid Raster is an abstract base chart designed to support coordinate grid based chart types when the data is backend rendered.

coordinateGridRasterMixin
Parameters
_chart (Object)
_mapboxgl (any)
browser (any)
Returns
dc.coordinateGridRasterMixin:
Instance Members
rescale()
g(gElement?)
xUnits(xUnits?)
xAxis(xAxis)
elasticX(elasticX)
xAxisPadding(padding)
xUnitCount()
useRightYAxis(useRightYAxis)
isOrdinal()
xAxisLabel(labelText?, padding)
yAxisLabel(labelText?, padding)
yAxis(yAxis)
elasticY(elasticY)
renderHorizontalGridLines(renderHorizontalGridLines)
renderVerticalGridLines(renderVerticalGridLines)
yAxisPadding(padding)

marginMixin

Margin is a mixin that provides margin utility functions for both the Row Chart and Coordinate Grid Charts.

marginMixin
Parameters
_chart (Object)
Returns
dc.marginMixin:
Instance Members
margins(margins)

stackMixin

Stack Mixin is an mixin that provides cross-chart support of stackability using d3.layout.stack.

stackMixin
Parameters
_chart (Object)
Returns
dc.stackMixin:
Instance Members
stack(group, name?, accessor?)
hidableStacks(hidableStacks)
hideStack(stackName)
showStack(stackName)
title
stackLayout(stack)

legendText

.legendText([legendTextFunction])

Set or get the legend text function. The legend widget uses this function to render the legend text on each item. If no function is specified the legend widget will display the names associated with each group.

Default: pluck('name')

// create numbered legend items
chart.legend(dc.legend().legendText(function(d, i) { return i + '. ' + d.name; }))

// create legend displaying group counts
chart.legend(dc.legend().legendText(function(d) { return d.name + ': ' d.data; }))
legendText(_: any)
Parameters
_ (any)

integers

The default value for .xUnits for the Coordinate Grid Chart and should be used when the x values are a sequence of integers. It is a function that counts the number of integers in the range supplied in its start and end parameters.

integers(start: Number, end: Number): Number
Parameters
start (Number)
end (Number)
Returns
Number:
Example
chart.xUnits(units.integers) // already the default

ordinal

This argument can be passed to the .xUnits function of the to specify ordinal units for the x axis. Usually this parameter is used in combination with passing d3.scale.ordinal to .x. It just returns the domain passed to it, which for ordinal charts is an array of all values.

ordinal(start: any, end: any, domain: Array<String>): Array<String>
Parameters
start (any)
end (any)
domain (Array<String>)
Returns
Array<String>:
Example
chart.xUnits(dc.units.ordinal)
     .x(d3.scale.ordinal())

fp

fp
Static Members
precision(precision)

TwoDimensionalFilter

TwoDimensionalFilter is a filter which accepts a single two-dimensional value. It is used by the heat map chart to include particular cells as they are clicked. (Rows and columns are filtered by filtering all the cells in the row or column.)

Its filterType is 'TwoDimensionalFilter'

new TwoDimensionalFilter(filter: Array<Number>): Array<Number>
Parameters
filter (Array<Number> = [])
Returns
Array<Number>:

RangedTwoDimensionalFilter

The RangedTwoDimensionalFilter allows filtering all values which fit within a rectangular region. It is used by the scatter plot to implement rectangular brushing.

It takes two two-dimensional points in the form [[x1,y1],[x2,y2]], and normalizes them so that x1 <= x2 and y1 <- y2. It then returns a filter which accepts any points which are in the rectangular range including the lower values but excluding the higher values.

If an array of two values are given to the RangedTwoDimensionalFilter, it interprets the values as two x coordinates x1 and x2 and returns a filter which accepts any points for which x1 <= x < x2.

Its filterType is 'RangedTwoDimensionalFilter'

new RangedTwoDimensionalFilter(filter: Array<Array<Number>>): Array<Array<Number>>
Parameters
filter (Array<Array<Number>>)
Returns
Array<Array<Number>>:

binParams

Wrapper for binParams in Crossfilter.

binParams(binParams: any)
Parameters
binParams (any)

chartBody

Retrieve the canvas for the chart body.

chartBody(chartBody: SVGElement?): SVGElement
Parameters
chartBody (SVGElement?)
Returns
SVGElement:

distance_in_meters

Calculates the distance in meters between two lon/lat coordinates

distance_in_meters(fromlon: number, fromlat: number, tolon: number, tolat: number): number
Parameters
fromlon (number) Longitude to start from
fromlat (number) Latitude to start from
tolon (number) Longitude to end at
tolat (number) Latitude to end at
Returns
number: Distance in meters from two lon/lat coords

conv900913To4326X

Converts mercator x coordinate to longitude

conv900913To4326X(x: number): number
Parameters
x (number) X coordinate in mercator projected space
Returns
number: Longitude

conv900913To4326Y

Converts mercator y coordinate to latitude

conv900913To4326Y(y: number): number
Parameters
y (number) Y coordinate in mercator projected space
Returns
number: Latitude

conv900913To4326

Converts 2d point in mercator projected space to a lon/lat coordinate

conv900913To4326(out: Point2d, coord: Point2d): Point2d
Parameters
out (Point2d) 2d point to store the converted lat/lon coordinate
coord (Point2d) 2d point in mercator projected space to convert
Returns
Point2d: Point referred to by the out arg

conv4326To900913X

Converts a longitude coordinate to an x coordinate in mercator projected space

conv4326To900913X(x: number): number
Parameters
x (number) Longitude
Returns
number: X coordinate in mercator projected space

conv4326To900913Y

Converts a latitude coordinate to a y coordinate in mercator projected space

conv4326To900913Y(y: any, x: number): number
Parameters
y (any)
x (number) Latitude
Returns
number: Y coordinate in mercator projected space

conv4326To900913

Converts 2d lon/lat point to a point in mercator projected space

conv4326To900913(out: Point2d, coord: Point2d): Point2d
Parameters
out (Point2d) 2d point to store the converted mercator coordinate
coord (Point2d) 2d point in lon/lat to convert
Returns
Point2d: Point referred to by the out arg