Untitled Document

100%

Untitled Document

✓ Published0🌍 Public

Last edited Apr 22, 2019

Created on Apr 22, 2019

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.

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'>group bar</a>

forked from <a href='http://bl.ocks.org/GerardoFurtado/'>GerardoFurtado</a>'s block: <a href='http://bl.ocks.org/GerardoFurtado/f4c825a5f8c92e87cc5a81591ba1f7c9'>group bar</a>

forked from <a href='http://bl.ocks.org/lydiawawa/'>lydiawawa</a>'s block: <a href='http://bl.ocks.org/lydiawawa/970146c168b2acdcb3598164bb41c2db'>group bar</a>

mit Licensed

Similar vizzes

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

88% 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

88% 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

87% match

Loading thumbnail…

Untitled

This visualization shows survey responses across six professional categories, with bars colored by five response levels ranging from "Not at all" to "Tremendously." Each category displays a cluster of bars for the different response rates. The chart uses d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for the axes. Rectangles are animated into place using transition with random delays, and hover effects darken bar colors. A legend appears sequentially, and the y-axis fades in after the bars animate. The data comes from data.json.

EEagleV22

81% match

Loading thumbnail…

Untitled

This grouped bar chart displays monthly values for three categories (Orange, XPC, and ABC) from a local CSV file. The visualization uses `d3.scaleBand` for the categorical x-axis and subgroup positioning, with `d3.scaleOrdinal` assigning a distinct color to each series. A manual legend is drawn using SVG circles and text elements. The chart renders as an SVG via the `d3.csv` load, with axes generated by `d3.axisBottom` and `d3.axisLeft` on a fixed 20-unit y-domain.

SSeanisgod1994

79% 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

79% match

Loading thumbnail…

Untitled

This stacked bar chart displays eye color frequencies across four hair color categories. The visualization uses d3.csv to load the dataset, d3.stack() to compute stacked segments, and d3.scaleBand/d3.scaleLinear for axes. Each bar segment is colored via a d3.scaleOrdinal palette, with a legend added in the second implementation. The SVG rendering relies on d3.axisBottom, d3.axisLeft, and nested data joins to append rectangles per subgroup.

CCo10

79% match

Loading thumbnail…

Untitled

A nested bar chart displays the distribution of three values across two groups and three categories. The visualization uses D3 v3’s ordinal scales (`d3.scale.ordinal`) and linear scale (`d3.scale.linear`) to position bars, with SVG rendering. Data is loaded from CSV (`data.csv`) and structured via `d3.nest` into hierarchical group and category levels. Axes are drawn with `d3.svg.axis`, and nested `<g>` elements group bars by group and category.

Mmab3105

78% match