D3 Histogram Bullet Chart
This JavaScript function utilizes the D3 library to draw a histogram bullet chart. The chart visualizes a current value in comparison to a target value across different color-coded ranges. Additionally, it includes interactive features such as tooltips.
drawHistBullet
Function: Parameters:
-
selector
: A string representing the CSS selector of the HTML element where the chart will be rendered. -
config
: An object containing configuration parameters for the chart, includingwidth
,height
,scalesData
, andscales
. -
data
: An object withcurrent
andtarget
properties, each havingvalue
andtext
attributes.
Example Usage:
// Sample data
const data = {
current: { value: 3, text: "Current" },
target: { value: 7, text: "Target" },
};
// Sample configuration
const config = {
width: 400,
height: 50,
scalesData: [
{ start: 0, end: 2, color: "green" },
{ start: 2, end: 4, color: "yellow" },
{ start: 4, end: 6, color: "orange" },
{ start: 6, end: 8, color: "red" },
],
scales: [2, 4, 6, 8],
};
// Call the drawHistBullet function
drawHistBullet("#chart-container", config, data);
### Chart Features:
- Color-Coded Ranges: Different color ranges represent distinct scales in the chart.
- Target Line: A vertical line indicates the target value.
- Current Value: Displayed as a filled rectangle within the chart.
- Tooltips: Interactive tooltips show additional information on hover.
### Customization:
- Adjust the values in the config and data objects to customize the appearance and data displayed by the chart.
- Modify the scalesData array to define color-coded ranges.
- Customize tooltips and other visual elements as needed.