KPI Widget 01

100%

✓ Published0🌍 Public

Last edited Jun 22, 2023

Created on Jun 22, 2023

This KPI widget displays 12 months of performance data as a bar chart, contrasting actual values against targets with confidence intervals rendered as error bars. The visualization uses D3 scales and axes (`scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`) within an SVG container. React 18 manages the root element, while the code directly appends SVG elements via D3 selections. Dummy data hard-coded in the script drives the monthly periods, with target bars showing a fixed goal and error bars spanning upper and lower bounds.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This bar chart displays monthly record counts for CKYC in 2020, showing a dramatic decline from January through April. The visualization uses D3 v5 within a React framework, employing `scaleLinear` for the x-axis, `scaleBand` for categorical months on the y-axis, and `axisLeft` and `axisBottom` for tick marks. Data is loaded via `csv()` from an external file, with records parsed as numbers. The horizontal bars are rendered as SVG rectangles, styled with steel blue fill, emphasizing the sharp drop in counts across the first four months.

Aakshaypoojary

71% match

Loading thumbnail…

Test

This visualization uses D3.js to display percentile trends over time for performance metrics. The view combines multiple SVG areas and a line to represent the 5-95%, 25-75%, and median values across dates from August to September 2014. Animated markers slide upward from the bottom to highlight Client and Server release versions, using D3 transitions with dynamic path lengths. The chart includes axes, a custom clip path for the legend area, and smooth basis interpolation for all drawn shapes.

CCheah Peng Huat

70% match

Loading thumbnail…

HTML Starter

This bar chart displays the monthly CKYC success count for 2020, with months on the y-axis and record counts on the x-axis. The visualization uses D3 v5, loading data from a CSV file and rendering as an SVG. It employs `scaleLinear` and `scaleBand` for axes, with bars styled via CSS. The chart includes axis labels and a title, generated through `axisLeft` and `axisBottom`.

Aakshaypoojary

69% match

Loading thumbnail…

SVG

This example visualizes monthly sales data as a bar chart rendered with SVG. Three bars represent January, February, and March, with sales values of 25, 10, and 15, colored red or gray based on a threshold. The code uses D3 v5’s `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the x-axis, and `d3.axisLeft`/`d3.axisBottom` to generate axes. Raw JSON data is loaded via `d3.json`, and bars are drawn using SVG `rect` elements with labels appended as `text` elements.

VVishwas2629

69% match

Loading thumbnail…

Animated Chart

A React component renders an SVG bar chart of annual values, with three bars for the years 2020 through 2022. A button click swaps the dataset, triggering a smooth transition where the bars animate their height and vertical position over one second using d3’s `transition`. The chart uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.selectAll` to build and update the visualization within a `useEffect` hook on data changes.

ZZac02

69% match

Loading thumbnail…

Bar chart

This example renders a simple bar chart using D3 v5 with SVG output within a React framework. Six hardcoded data values are displayed as vertical bars, with bars colored red for values 80 or higher and gray for lower values. Each bar’s height is twice its data value, and the corresponding number labels each bar. The chart uses D3’s `select`, `append`, and `attrs` methods to construct and style the SVG rectangles and text elements, with the page structured by an HTML file loading the D3 libraries and the chart script.

AAlina Sul

68% match

Loading thumbnail…

Fork of Visualizing Percentages

Three alternative views of the current date's progress through the year appear side by side: a rounded progress bar, a donut chart, and a semicircular gauge. Each chart displays the same percentage value, computed from the current day of year divided by the total days in the year. The code uses D3 v6 arc generators for the donut and gauge paths, along with SVG rectangles for the bar, and renders the percentage labels as SVG text elements within a React application.

Cckp8

68% match

Loading thumbnail…

feat1_month_dependent_barchart

A bar chart compares the percentage of children with height or weight deficiencies across eight blocks in Palghar district, India, for three months (August, September, October). Users switch between metrics and months via dropdowns, triggering animated transitions in bar heights, fill colors, tooltips, and axis scales. The React app renders SVG rects and text, using D3 scales, transitions, and a tooltip div, with data from a CSV file.

AAnimesh Nautiyal

68% match