Untitled Document

100%

Untitled Document

✓ Published0🌍 Public

Last edited Apr 21, 2019

Created on Apr 21, 2019

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/lydiawawa/'>lydiawawa</a>'s block: <a href='http://bl.ocks.org/lydiawawa/9efb5df76c08640316efbef702437db7'>fresh block</a>

mit Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Untitled Document

This animated bar chart visualizes the distribution of drug categories across survey responses. The visualization loads a CSV dataset containing two columns—s_category and drug_cat—and renders a grouped bar chart using D3 v4 with SVG. The chart animates between two states, likely comparing the frequency of drug categories by s_category groups. The bars are color-coded and transition smoothly to reflect the data, with axes and labels supporting readability. The animation highlights changes in the dataset, making it easy to compare category distributions dynamically.

GGerardoFurtado

86% match

Loading thumbnail…

Untitled Document

This example visualizes the distribution of drug categories and scores from a CSV dataset as an animated, interactive bar chart. Using D3 v4 with SVG rendering, the chart displays grouped bars for each drug category, with the bars transitioning smoothly when toggling between views. The data, loaded from drug1.csv, maps the s_category values on the x-axis and drug_cat values on the y-axis, with the animation providing a dynamic comparison of the categories. The visualization is built with D3.js and rendered as scalable vector graphics, allowing for crisp, responsive bars that update with user interaction.

GGerardoFurtado

84% match

Loading thumbnail…

Grouped Bar Chart

This example presents a grouped bar chart with 20 samples across 4 series, rendered in SVG using D3 v3. The chart’s bars are positioned by two ordinal scales, `x0` for categories and `x1` for series, with a linear `y` scale mapping values from 0 to 1. Each series is assigned a distinct color via `d3.scale.category10`. Data is randomly generated, and axes are drawn using `d3.svg.axis`. The code emphasizes scale composition and grouped layouts rather than interactivity.

Mmbostock

78% match

Loading thumbnail…

Grouped bar chart v4 - TP3

This example shows a grouped bar chart with ten sample categories across five series, drawn as colored vertical bars in an SVG. The data is randomly generated with `Math.random`, and the chart uses D3 v4’s `d3.scaleBand` for both the outer category scale and the inner series scale, while `d3.scaleOrdinal` assigns a categorical color palette. Bars are positioned by translating each group and placing rectangles with explicit `x` and `y` attributes, with axes formatted via the standard D3 axis components.

AAlxClt

77% match

Loading thumbnail…

Grouped bar chart v4

This grouped bar chart displays five series of ten random samples each, using color to distinguish the series and vertical bars to represent values. Built with D3 v4, it renders as SVG and uses `d3.scaleBand` for the categorical axes, `d3.scaleLinear` for the value axis, and `d3.scaleOrdinal` for color mapping, with data generated in JavaScript via `Math.random`.

BBaptisteL54

76% match

Loading thumbnail…

Untitled

A grouped bar chart shows retrieval counts across six dates, with each date divided into five folders. Bars animate upward from zero using staggered delays and a mouseover darkens their color. The chart uses D3 v3 with ordinal and linear scales, SVG axes, and transition methods. Data is loaded from a JSON file and rendered as colored SVG rectangles with a fading legend.

LLokeyyyy

76% match

Loading thumbnail…

Untitled

This example shows a grouped bar chart comparing values across three categories for multiple groups, with each category represented by a colored bar. The visualization uses D3.js v4 to load data from a remote CSV file, which is parsed with `d3.csv`. Bars are rendered as SVG rectangles, with an ordinal color scale mapping categories to red, blue, and green. The X-axis uses `d3.scaleBand` for group positioning, while a nested subgroup scale positions bars within each group, and a linear scale maps values to the Y-axis.

CCo10

75% match