Interpolated Charts
Configurable d3 v4 charts with interpolation and missing data range. Inspired by Britecharts
Angular component here
Description
- Configurable line chart with tooltip and markers
- Gasps between data points (missing data range)
- Compute and display interpolated values between data points
Iterpolation values are calculated on svg path element using the binary search method. It means that after changing chart curve type (d3.curveBasis, d3.curveCatmullRom, ...) computed values can change. Do not rely on this data if you need high accuracy.
Installation
- Install with npm
npm install interpolated-charts --save
- Import JS dependencies
;;
- Import CSS
@import 'interpolated-charts/src/index.css'
Usage
Package include line chart and three plugins: vertical divider, markers highlight, tooltip information. Line chart dispatch mouse events (chartMouseEnter, chartMouseLeave, chartMouseMove, chartMouseClick), defined in chartEvents. Default configuration for chart with plugins:
const verticalDividerPlugin = ;const markersPlugin = ;const tooltipPlugin = ; const lineChart = // subscribe plugins to chart events ; // create chart with dataconst chartContainer = d3;chartContainer; // bind plugins to chartconst metadataContainer = d3;metadataContainer;metadataContainer;metadataContainer;
Chart data example:
const lineChartData = // each object represent chart line dataset 'name': 'Minsk' // optional color 'color': 'darkblue' 'data': 'date': '2015-01-01T00:00:00' 'value': 20 'date': '2015-01-02T00:00:00' 'value': 16
Default chart is first example on demo page.
Source code for examples - /demo.
Package include internal @types for Typescript.
Documentation
Line Chart
Usage
// create chart with custom configconst lineChart = ;// set property on existing chartlineChart;// get d3 selection for chart containerconst chartContainer = d3;const lineChartData = /* PathDataSet[] */;// bind selection with data and call chart creationchartContainer;
Chart data format
Events
chartEvents.chartMouseEnter - mouse entered chart boundary. Arguments - mouse coordinates x, y relative to chart;
chartEvents.chartMouseLeave - mouse leaved chart boundary. Arguments - mouse coordinates x, y relative to chart;
chartEvents.chartMouseMove - mouse moved inside chart boundary. Event treshhold (mouseMoveTimeTreshold, ms) - min time between events. Arguments - { x: number, y: number, selectedDate: Date, data: PointData[] }. data - array of closest chart points data based on mouse current position:
chartEvents.chartMouseClick - mouse click inside chart boundary. Arguments - { x: number, y: number, selectedDate: Date, data: PointData[] }.
CSS
Chart grid lines css classes:
.line-chart .horizontal-grid-line, .line-chart .vertical-grid-line
Options
Name | Description | Type | Default |
---|---|---|---|
width | Chart total width | Number | 700 |
height | Chart total height | Number | 500 |
margin | Chart graph margin to outer bounds | { top: number, right: number, bottom: number, left: number } | { top: 20, right: 30, bottom: 40, left: 40 } |
maxTimeRangeDifferenceToDraw | Max time in milliseconds to treat dataset points without breaking | Number | 1000 * 60 * 60 * 24 * 1.5 (1.5 days) |
xAxisTimeFormat | Date tick format for chart X Axis | d3.tickFormat | undefined |
yAxisValueFormat | Value tick format for chart Y Axis | d3.tickFormat | undefined |
curve | Curve type for line interpolation. Important: value interpolation compute on chart resulted line and depend on this config value | d3.curve | d3.curveBasis |
chartHeight | Chart graph actual heigth getter. Total height - (margin.top + margin.bottom) | Number | |
chartWidth | Chart graph actual width getter. Total width - (margin.left + margin.right | Number | |
interpolationMaxIterationCount | Interpolation cycle count. Computing will stop after N cycle or when Δx < accuracy Important: high value can slow preformance | Number | 50 |
interpolationAccuracy | Interpolation Δx accuracy for searching y value on svg path. Computing will stop after N cycle or when Δx < accuracy | Number | 0.005 |
mouseMoveTimeTreshold | Minimum time in milliseconds between chartMouseMove events | Number | 20 |
xAxisDateFrom | Chart X Axis start date | Date | undefined |
xAxisDateTo | Chart X Axis end date | Date | undefined |
Bar chart
Usage
// create bar chartconst barChart = ; const barChartContainer = d3;const barChartData = /* PathDataSet[] */;// bind selection with data and call chart creationbarChartContainer;
Chart data format
Array of
Events
chartEvents.chartMouseEnter - mouse entered chart boundary. Arguments - mouse coordinates x, y relative to chart;
chartEvents.chartMouseLeave - mouse leaved chart boundary. Arguments - mouse coordinates x, y relative to chart;
chartEvents.chartMouseMove - mouse moved inside chart boundary. Event treshhold (mouseMoveTimeTreshold, ms) - min time between events. Arguments - { x: number, y: number, selectedDate: Date, data: MouseEventBarChartData[] }. data - array of closest chart points data based on mouse current position:
chartEvents.chartMouseClick - mouse click inside chart boundary. Arguments - { x: number, y: number, selectedDate: Date, data: MouseEventBarChartData[] }.
Options
Name | Description | Type | Default |
---|---|---|---|
width | Chart total width | Number | 700 |
height | Chart total height | Number | 120 |
margin | Chart graph margin to outer bounds | { top: number, right: number, | |
setStackWidth | Function to compute stack width | Function | (chartWidth, numberOfBars) => chartWidth / numberOfBars - 20 |
maxTimeRangeDifferenceToDraw | Max time in milliseconds to treat dataset points without breaking | Number | 1000 * 60 * 60 * 24 * 1.5 (1.5 days) |
stackTimeDiapason | Time diapason for one stack | Number | 1000 * 60 * 60 * 24 |
xAxisTimeFormat | Date tick format for chart X Axis | d3.tickFormat | undefined |
yAxisValueFormat | Value tick format for chart Y Axis | d3.tickFormat | undefined |
xAxisDateFrom | Chart X Axis start date | Date | undefined |
xAxisDateTo | Chart X Axis end date | Date | undefined |
yAxisValueFrom | Chart Y Axis start value | Number | undefined |
yAxisValueTo | Chart Y Axis end value | Number | undefined |
Stack bar
Usage
// create stack barconst stackBarChart = ; const stackBarContainer = d3;const stackBarData = /* StackBarData[] */;// bind selection with data and call chart creationstackBarContainer;
Chart data format
Array of
Events
chartEvents.chartMouseEnter - mouse entered chart boundary. Arguments - mouse coordinates x, y relative to chart;
chartEvents.chartMouseLeave - mouse leaved chart boundary. Arguments - mouse coordinates x, y relative to chart;
chartEvents.chartMouseMove - mouse moved inside chart boundary. Event treshhold (mouseMoveTimeTreshold, ms) - min time between events. Arguments - { x: number, y: number, selectedDate: Date, diapasonStart: Date, diapasonEnd: Date, data: MouseEventBarChartData[] }. data - array of closest chart points data based on mouse current position:
chartEvents.chartMouseClick - mouse click inside chart boundary. Arguments - { x: number, y: number, selectedDate: Date, data: StackBarEventData[] }.
Options
Name | Description | Type | Default |
---|---|---|---|
width | Chart total width | Number | 700 |
height | Chart total height | Number | 120 |
margin | Chart graph margin to outer bounds | { top: number, right: number, | |
marginBetweenStacks | Vertical margin between multiple stack bars | Number | 0 |
backgroundColor | Chart background color | String | '#CCCCCC' |
maxTimeRangeDifferenceToDraw | Max time in milliseconds to treat dataset points without breaking | Number | 1000 * 60 * 60 * 24 * 1.5 (1.5 days) |
mouseMoveTimeTreshold | Minimum time in milliseconds between chartMouseMove events | Number | 20 |
xAxisTimeFormat | Date tick format for chart X Axis | d3.tickFormat | undefined |
xAxisDateFrom | Chart X Axis start date | Date | undefined |
xAxisDateTo | Chart X Axis end date | Date | undefined |
Plugins
Vertical divider
Display vertical line on chart.
Usage
const lineChart = ;// create pluginconst verticalDividerPlugin = ;// set divider height if chart height not defaultverticalDividerPlugin heightlineChart;// subscribe plugin to chart eventslineChart ;// create line chartd3;// select metadata container inside chartconst metadataContainer = d3;// call plugin creationmetadataContainer;
CSS
Divider line css class:
.line-chart .divider
Options
Name | Description | Type | Default |
---|---|---|---|
height | Divider line height | Number | 440 |
Methods
Name | Description | Arguments |
---|---|---|
remove | Hide divider | None |
show | Show divider | None |
update | Set divider position | { x: number } |
Markers
Usage
const lineChart = ;// create plugin with optionsconst markersPlugin = ;// set optionsmarkersPlugin // subscribe plugin to chart eventslineChart ;// create line chartd3;// select metadata container inside chartconst metadataContainer = d3;// call plugin creationmetadataContainer;
Options
Name | Description | Type | Default |
---|---|---|---|
cx | Marker X position calculator | Function | data => data.interpolatedX |
cy | Marker Y position calculator | Function | data => data.interpolatedY |
radius | Marker radius calculator | Function | data => 5 |
fill | Marker fill color calculator | Function | data => 'white' |
stroke | Marker stroke color calculator | Function | data => data.color |
strokeWidth | Marker stroke width calculator | Function | data => 2 |
sort | Marker sorting function. First value will be displayed on top of others | Function | (a, b) => 0 |
Methods
Name | Description | Arguments |
---|---|---|
remove | Hide markers | None |
show | Show markers | { data: ChartLinePointData[] } |
Tooltip
Tooltip - html foreignObject in svg chart.
Usage
const lineChart = ;// create plugin with optionsconst verticalDividerPlugin = ;// set optionstooltipPlugin ;// subscribe plugin to chart eventslineChart ;// create line chartd3;// select metadata container inside chartconst metadataContainer = d3;// call plugin creationmetadataContainer;
CSS
.line-chart .tooltip
.line-chart .tooltip rect
.line-chart .tooltip .tooltip-container
.line-chart .tooltip .tooltip-header
.line-chart .tooltip .tooltip-header p
.line-chart .tooltip .circle
.line-chart .tooltip .topic
.line-chart .tooltip .topic-name
.line-chart .tooltip .topic-value
Options
Name | Description | Type | Default |
---|---|---|---|
chartHeight | Chart height (used to compute tooltip boundaries) | Number | 440 |
chartWidth | Chart width (used to compute tooltip boundaries) | Numner | 700 |
tooltipWidth | Tooltip fixed width | Number | 220 |
horizontalMouseMargin | Tooltip horizontal distance from mouse pointer | Number | 40 |
verticalBorderMargin | Tooltip min distance from chart top and bottom borders | Number | 10 |
headerFormatter | Tooltip header formatter function. Arguments - selected interpolated date and chart dataset values | Function | (selectedDate, data) => d3.timeFormat('%Y-%d-%m %H:%M:%S')(selectedDate) |
topicFormatter | Tooltip path data description formatter | Function | (data) => data.name |
valueFormatter | Tooltip path data value formatter | Function | (data) => d3.format('.1f')(data.interpolatedValue) |
sort | Tooltip path data sorting function. First value will be displayed on top of tooltip | Function | (a, b) => 0 |
Methods
Name | Description | Arguments |
---|---|---|
remove | Hide tooltip | None |
show | Show tooltip | { x: number, y: number, selectedDate: Date, data: ChartLinePointData[] } |
TODO
- Tests
- JSDoc
- Documentation
- Display curve single points in missing data range and add them to tooltip