Medicine Inventory Chart

100%

Medicine Inventory Chart

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 20, 2023

This example shows the quantity of five medicines in a bar chart, with yellow bars representing each inventory level and value labels placed above them. The implementation uses D3 v6 to build the SVG visualization, employing d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft to render the chart axes. Static data is hardcoded in the HTML, and the chart includes rotated x-axis labels for readability. The code demonstrates core D3 data-joining patterns with selectAll, enter, and append to create the bars.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

bar chart

This example shows a small, static bar chart of five categorical values, with each bar colored individually and labeled A through E. The chart displays the data using SVG rectangles, with linear and ordinal scales mapping the values to positions and heights. The code uses d3.js version 3.5, specifically d3.scale.linear and d3.scale.ordinal, along with d3.svg.axis for the x and y axes. The data is hard-coded in the script and rendered on a light grey canvas with margins applied via a group transform.

MMoximillian

72% match

Loading thumbnail…

Untitled Document

This example shows a grouped bar chart of drug counts across five symptom categories (s_category), with each group subdivided into six drug categories (drug_cat) and colored accordingly. The chart animates bar heights from zero to their final values using D3’s `transition.attr` with random delays, and bars darken on mouseover. It loads data from `drug.json` via `d3.json`, nests records by symptom category using `d3.nest`, and builds the SVG with `d3.scaleBand` for both axes and `d3.scaleOrdinal` for color mapping.

GGerardoFurtado

72% match

Loading thumbnail…

Untitled Document

This interactive D3.js visualization displays a grouped bar chart showing the frequency of drug categories (1-6) across different survey categories (2-5), with each group further broken down into colored sub-bars. The chart uses d3.scaleBand for the grouped axes, d3.scaleOrdinal for color encoding, and d3.nest for hierarchical data aggregation. Bars animate from zero to their final heights using randomized delays with SVG transitions. The visualization is built on D3 v4 and Bootstrap, reading data from a local CSV file.

GGerardoFurtado

71% match

Loading thumbnail…

Easy bar chart

A bar chart displays XYZ Foods stock prices across five years, from 2009 to 2021, with annual values ranging from 5,000 to 60,000. The visualization uses SVG rendering with D3 v4, employing `d3.scaleBand` for the x-axis years and `d3.scaleLinear` for the y-axis price range. Rectangles are bound to the data array, with axis labels and a title added via D3’s axis and text APIs. The chart is positioned within an 800×700 SVG canvas, using a margin offset for the plot area.

Hhanulik.ondrej@gmail.com

71% match

Loading thumbnail…

Bar Chart

This bar chart visualizes a simple dataset of five values (10, 20, 30, 40, 50) using D3 v5. Rectangles are rendered as SVG elements, with their heights proportional to the data and their x-positions determined by a band scale (`d3.scaleBand`). A linear scale (`d3.scaleLinear`) maps the values to the vertical axis, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. Bars change color on hover via CSS, and the chart includes a fixed 50-pixel left margin and 20-pixel top offset.

OOluoch Odhiambo

71% match

Loading thumbnail…

Bar Chart Example

This example demonstrates a basic bar chart built with D3 version 6. It visualizes a small dataset of four categorical values using an SVG container. The code creates an SVG, applies d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, then renders steelblue rectangles for each data point. It also appends axes with d3.axisBottom and d3.axisLeft.

VVamshi Amudala

71% match

Loading thumbnail…

New barchart

This stacked bar chart shows how resources are allocated across five categories (ABC, PQR, XYZ, LMN, OPQ), with each bar split into used and unused portions. The chart uses a d3.stack layout with stackOffsetExpand to normalize the bars to equal height, while the y-axis displays the raw total values via a d3.scaleLinear. Draws in SVG using d3.v5, the visualization colors the stacked segments with d3.scaleOrdinal from d3.schemeCategory20c and includes gridlines generated by d3.axisLeft. The data comes from hardcoded JavaScript records with name, total, and used fields.

NNick

71% match

Loading thumbnail…

Bar Chart

A bar chart displays dummy data with nine index-value pairs, using a linear color scale for fill intensity so higher values appear darker blue. The chart renders bars in an SVG, with a quantitative x-axis and categorical y-axis, and includes titles and gridlines. The implementation uses d3.csv to load data, d3.scaleLinear for both the color interpolation and x-axis domain, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom with tick formatting for readable labels.

MMert Gürkan

71% match