Skip to main content
SimilarExport ZIP
100%

Double bar chart - application access and user counts

✓ Published0🌍 Public
JJoris Schelfaut
Last edited Oct 20, 2023
Created on Sep 10, 2023

A double bar chart compares user counts and access counts for six application modules. The chart renders horizontally as diverging bars from a central axis, with user counts extending left and access counts extending right, using D3 v7 with SVG. Each bar’s length is normalized against its respective maximum via a custom utility function, and colors encode intensity using dynamic RGB values. Axis labels include counts in parentheses, and the data is loaded asynchronously from a JSON file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bar chart - application access counts

This bar chart shows the number of times each of six applications was accessed. It displays the access counts for Authentication, Lab, Sales Inventory, HR, Accounting, and Website, with each bar labeled with both the application name and its corresponding count. The visualization uses D3 v7 to render SVG rectangles, with a linear scale powering the left axis and tick lines, and the bars’ blue color intensity is normalized against the maximum access count. Data is loaded from a JSON file using `d3.json`.

JJoris Schelfaut
84% match
Loading thumbnail…

Double Bar Chart in D3.js

A double bar chart displays the frequency of words and entities extracted from text data, with quantities plotted along the x-axis and labels along the y-axis. The visualization uses d3.scaleLinear and d3.scaleBand to map the data, rendering SVG rectangles and text labels for each value. It loads data from a CSV file using d3.csv, converting numeric strings to floats before rendering. The chart includes axes generated with d3.axisLeft and d3.axisBottom, with an interactive hover effect that changes the bar color via CSS.

Yyuridrcosta
75% match
Loading thumbnail…

Bar Chart I

This bar chart visualizes six numeric values—4, 8, 15, 16, 23, and 42—as horizontal bars whose widths are proportional to the data. The chart uses D3 v3’s `d3.scale.linear` to map the domain from zero to the maximum value (42) onto a pixel range of 0–420. Each bar is a styled `div` element with a steelblue background, white text, and a width set via the `style` operator. The code appends these divs using `d3.select` and `.selectAll("div").data(...)`, with the data bound to the DOM. The bars’ labels display the original values.

Mmbostock
73% match
Loading thumbnail…

Activity 7

This bar chart displays the number of users for various applications, drawing from a CSV dataset of 50 entries. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles for each bar. The code includes custom `AxisBottom` and `AxisLeft` components for ticks and labels, with tooltips formatted using D3’s `format` function.

Bbogasamudramvamsikrishnareddy
73% match
Loading thumbnail…

Fork of DV Assignment 2

This visualization displays a horizontal bar chart comparing the number of users across different applications. Each bar’s length represents the user count for a specific application, with data loaded from a remote CSV file using d3.csv. The React-based implementation uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, rendering bars as SVG rectangles. Axes are generated through custom React components, and d3.format with SI prefixes formats tick labels into readable abbreviations.

NNagateja99
73% match
Loading thumbnail…

DV Assignment 2

This example shows a horizontal bar chart of application names against their number of users, sourced from a CSV file, with data limited to the first 50 records. The visualization uses React components and d3.scaleBand and d3.scaleLinear for scaling, while d3.max and d3.format handle data aggregation and tick label formatting. Bars are rendered as SVG rects with tooltips, and custom AxisBottom and AxisLeft components place ticks and labels. The CSV is loaded asynchronously with d3.csv, and styling is applied via CSS classes for ticks and marks.

NNagateja99
73% match
Loading thumbnail…

Bar Chart

This bar chart displays six numeric values as horizontal rectangles, with each bar’s length scaled linearly from its minimum to maximum value. The visualization uses D3 v7 to bind the data array to SVG groups, appending a rectangle and a text label per value. The chart positions each row using transform translations, and the x-axis scaling is handled by d3.scaleLinear. The SVG dimensions are fixed at 500 pixels wide with a bar height of 20 pixels, and the chart is rendered directly into the body element.

Jjajinkya
73% match
Loading thumbnail…

Activity 7

This visualization displays a horizontal bar chart comparing the number of users across various applications. Built with React and D3 v5, it renders data from a remote CSV file, loading and displaying the first 50 entries. The chart uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with bars rendered as SVG `<rect>` elements. The code includes custom axis components and formatting, converting large numbers to abbreviated forms with `format('.2s')`, and provides tooltips showing the formatted user counts.

JJayanthKumarkoni
72% match