0.8.20An extension of rasterMap for vectors and interactive selection. See #rasterMap.
object:
A selectorMap instance.
datahub.map.selectorMap({
parent: document.querySelector('.map')
})
A map with a raster layer.
(object)
The initial configuration.
| Name | Description |
|---|---|
config.parent object
|
The parent DOM element. |
config.colorScale object
|
The colorScale to use for raster, one of datahub.palette. |
config.basemapName string
|
The name of the basemap: 'basemapDark', 'basemapLight'. |
config.showLabels boolean
(default true)
|
Show the map label layer. |
config.showTooltip boolean
(default true)
|
Show tooltips when hovering raster. |
config.polygonTooltipFunc function?
|
The function to format vector tooltip, has passed to L.geoJson.bindTooltip(). |
config.mapConfig function?
|
Overrides Leaflet map config, as passed to L.map(). |
object:
A rasterMap instance.
datahub.map.rasterMap({
parent: document.querySelector('.map'),
colorScale: datahub.palette.equalizedSpectral,
showLabels: false,
mapConfig: {
zoomControl: false
}
})
.init()
Initialize the map.
datahub.map.rasterMap({
parent: document.querySelector('.map')
})
.init()
Render an image on the map.
(object)
The url of the image to overlay, as passed to L.imageOverlay.
(object)
Should contains a bbox array for L.imageOverlay(image, bbox).
datahub.map.rasterMap({
parent: document.querySelector('.map')
})
.init()
.renderImage('https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png',
{bbox: {latMin: 0, latMax: 10, lonMin: 0, lonMax: 10}})
Make the map visible.
datahub.map.rasterMap({
parent: document.querySelector('.map')
})
.init()
.show()
Make the map invisible.
datahub.map.rasterMap({
parent: document.querySelector('.map')
})
.init()
.hide()
Reset the size to fit the container.
datahub.map.rasterMap({
parent: document.querySelector('.map')
})
.init()
.resize()
Zoom to fit a polygon.
(object)
A valid geojson.
Remove all markers.
Hide all zoom controls.
Show a preset vector world map.
Events binder.
(string)
The name of the event: 'click', 'mousemove', 'mouseenter', 'mouseleave',
'featureClick', 'featureMousEnter', 'featureMousLeave', 'markerClick'
(function)
The callback for this event
datahub.map.rasterMap({
parent: document.querySelector('.map')
})
.init()
.on('markerClick', function(e) {
console.log(e)
})
A configurable line/bar/area chart.
(object)
The initial configuration can be passed on init or later using multiChart.setConfig.
| Name | Description |
|---|---|
config.parent object
|
The parent DOM element. |
config.data object?
|
Data can be passed on init or later using multichart.setData. |
config.width number
(default parent.innerWidth)
|
External width of the chart. |
config.height number
(default parent.innerHeight)
|
External height of the chart. |
config.margin object
(default {top:50,right:50,bottom:100,left:50})
|
Margins around the chart panel. |
config.axisXFormat string
(default '%b')
|
Label x labels format, as passed to d3.utcFormat. |
config.axisTitleX string?
|
X axis title. |
config.axisTitleY string?
|
Y axis title. |
config.chartTitle string?
|
Chart title. |
config.reverseY boolean?
|
Reverse the Y axis so higher values are on the bottom. |
config.autoScaleY boolean?
|
Auto range the scale from y data instead of clamping min to zero or negative. |
config.domain Array<number>?
|
[ min, max ] domain of the y scale, defaults to data extent. |
config.labelsRewriterY function?
|
Y axis label rewriting function. Receives (label, index) and has to return a string or a DOM string. |
object:
A multichart instance.
datahub.multiChart({
parent: document.querySelector('.chart'),
data: {
timestamp: datahub.data.generateTimestamps(),
barData: datahub.data.generateTimeSeries()
}
})
Destroys DOM elements and unbind events.
var chart = datahub.multiChart({
parent: document.querySelector('.chart'),
})
chart.destroy()
Events binder.
(string)
The name of the event: 'hover', 'click', 'mouseout', 'active'
(function)
The callback for this event
datahub.multiChart({
parent: document.querySelector('.chart'),
})
.on('hover', function(e) {
console.log(e.index, e.timestamp, e.data, e.config, e.event)
})
A line/area/step/arrow timeseries chart.
(object)
The initial configuration can be passed on init or later using timeseries.setConfig.
| Name | Description |
|---|---|
config.parent object
|
The parent DOM element. |
config.data object
|
Data can be passed on init or later using timeseries.setData. |
config.reference number
|
Value for the reference line. |
config.tooltipTimestamp Date
|
Timestamp of element to highlight. |
config.width number
(default parent.innerWidth)
|
External width of the chart. |
config.height number
(default parent.innerHeight)
|
External height of the chart. |
config.chartType string
(default 'line')
|
Chart type: 'line', 'area', 'step', 'arrow'. |
config.margin object
(default {top:0,right:0,bottom:10,left:10})
|
Margins around the chart panel. |
config.hide Array<string>?
|
An array of names of elements to hide: 'xTitle', 'yTitle', 'tooltip', 'xAxis', 'yAxis', 'shapes', 'xGrid', 'xTitle', 'yTitle', 'tooltipDot'. |
config.domain Array<number>?
|
[ min, max ] domain of the y scale, defaults to data extent. |
config.xTicks string
(default d3.utcMinute.every(20))
|
Target x tick count, as passed to d3.axis.ticks. |
config.axisXFormat string
(default '%H:%M')
|
X tick format, as passed to d3.axis.tickFormat. |
config.yTicks string
(default 6)
|
Target y tick count, as passed to d3.axis.ticks. |
config.axisYFormat string
(default '.2')
|
Y tick format, as passed to d3.axis.format. |
config.yAxisTitle string?
|
Y axis title. |
config.xTitleFormat string
(default d3.utcFormat('%c'))
|
Format of the hovered timestamp close to the x axis. |
config.valueFormatter function?
|
Formatter for the tooltip value. Receives (data, index) and should return a string. |
config.stepRange number
(default 3)
|
Only for type:step, band range above and below the line. |
config.axisOnly boolean
(default false)
|
A minimal version of the chart only showing the x axis. |
config.arrowSkip number
(default 3)
|
Only for type:arrow, keeping 1 arrow out of n. |
object:
A timeseries instance.
datahub.timeseries({
parent: document.querySelector('.timeseries-area'),
chartType: 'area',
data: datahub.data.generateTimeSeriesSplit()
})
Destroys DOM elements and unbind events.
var chart = datahub.timeseries({
parent: document.querySelector('.chart'),
})
chart.destroy()
A vertical positive/negative bar chart with reference bar.
(object)
The initial configuration can be passed on init or later using verticalChart.setConfig.
| Name | Description |
|---|---|
config.parent object
|
The parent DOM element. |
config.elements Array<object>
|
Data in the form {key, label, value}. |
config.referenceBarSize number
|
The size of the reference bar in px. |
config.title string
|
The chart title. |
config.unit string
|
The axis unit. |
object:
A verticalChart instance.
datahub.verticalChart({
parent: document.querySelector('.vertical-chart')
title: 'Title',
elements:[
{key: 'approved', label: 'Approved', value: 125},
{key: 'written', label: 'Written', value: 16},
{key: 'remains', label: 'Remains', value: -79}
],
referenceBarSize: 100,
unit: '%'
})
Set the config after its instantiation.
(object)
The same config format as on init.
object:
The verticalChart instance.
datahub.verticalChart({
parent: document.querySelector('.vertical-chart')
})
.setConfig({
title: 'Title',
elements:[
{key: 'approved', label: 'Approved', value: 125},
{key: 'written', label: 'Written', value: 16},
{key: 'remains', label: 'Remains', value: -79}
],
referenceBarSize: 100,
unit: '%'
})
Destroys DOM elements and unbind events.
var chart = datahub.verticalChart({
parent: document.querySelector('.chart'),
})
chart.destroy()
A waterfall chart designed for a specific use case.
object:
A waterfallChart instance.
var waterfall = datahub.waterfallChart({
parent: document.querySelector('.waterfall-chart')
elements:[
{key: 'initial', label: 'Initial', value: 53},
{key: 'closed', label: 'Closed', value: -30},
{key: 'open', label: 'Open', value: 23},
{key: 'new', label: 'New', value: 15},
{key: 'total', label: 'Total', value: 38}
]
})
Set the config after its instantiation.
(object)
The same config format as on init.
object:
The waterfallChart instance.
datahub.waterfallChart({
parent: document.querySelector('.waterfall-chart')
})
.setConfig({
elements:[
{key: 'initial', label: 'Initial', value: 53},
{key: 'closed', label: 'Closed', value: -30},
{key: 'open', label: 'Open', value: 23},
{key: 'new', label: 'New', value: 15},
{key: 'total', label: 'Total', value: 38}
]
})
Destroys DOM elements and unbind events.
var chart = datahub.waterfallChart({
parent: document.querySelector('.chart'),
})
chart.destroy()
A weather chart built on top of datahub.timeseries.
(object)
The initial configuration can be passed on init or later using weatherChart.setConfig.
| Name | Description |
|---|---|
config.parent object
|
The parent DOM element. |
config.data object
|
Data can be passed on init or later using weatherChart.setData. |
config.width number
(default parent.innerWidth)
|
External width of the chart. |
config.height number
(default parent.innerHeight)
|
External height of the chart. |
config.historicalXTicks number
(default d3.utcHour.every(12))
|
Target historical x tick count, as passed to d3.axis.ticks. |
config.historicalXFormat string
(default '%H:%M')
|
Historical x tick format, as passed to d3.axis.tickFormat. |
config.forecastXTicks number
(default d3.utcHour.every(12))
|
Target forecast x tick count, as passed to d3.axis.ticks. |
config.forecastXFormat string
(default '%H:%M')
|
Forecast x tick format, as passed to d3.axis.tickFormat. |
config.historicalArrowSkip number
(default 3)
|
Only keeping 1 historical arrow out of n. |
config.forecastArrowSkip number
(default 6)
|
Only keeping 1 forecast arrow out of n. |
object:
A weatherChart instance.
var data = datahub.data.generateWeatherChartData()
var chart = datahub.weatherChart({
parent: document.querySelector('.weather-chart'),
data: data
})
.on('tooltipChange', function(e){ console.log(e) })
.setData(data)