Skip to main content
SimilarExport ZIP
100%

loreal_data transitioning

✓ Published0🌍 Public
HHilario Calderon
Last edited Oct 3, 2019
Created on Oct 1, 2019

This example demonstrates how demographic survey data can be interactively explored by switching between different categorical groupings. The bar chart displays the percentage distribution of respondents across gender, generation, province, or age group, with the selected category updating the visualization. Built with D3 v5, the code loads data from a CSV file and uses `d3.nest()` with `rollup` functions to aggregate counts into percentages. The SVG rendering employs `scaleLinear` and `scaleBand` for the axes, with buttons triggering the data swap and horizontal bars displaying percentage labels.

AI-generated description

Tis report shows the possibiltiy of using different data set at the same time and customizing the datavis by suing a single DOM

MIT Licensed

Similar vizzes

Loading thumbnail…

loreal dataviz updates

This interactive bar chart displays survey respondent demographics, with buttons to toggle between gender, age group, generation, and province categories. The horizontal bars show the percentage of respondents in each category, with labels indicating the exact values. Using d3.v5, the visualization loads CSV data, computes grouped percentages via `d3.nest()`, and renders SVG rectangles with animated transitions. Axes and labels are generated with `axisLeft`, `axisBottom`, and `scaleBand`, while button clicks trigger the `update` function to swap datasets.

HHilario Calderon
91% match
Loading thumbnail…

loreal charts_data separations

This example shows a horizontal bar chart that visualizes the percentage of survey respondents by Canadian region, with each bar labeled at its end with the corresponding percentage value and a percentage-formatted x-axis. The chart uses D3 v5’s `csv` loader to parse the dataset, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` to render the axes while hiding tick lines via CSS. Data is aggregated using `d3.nest` with a `rollup` function that calculates the proportion of entries per region.

HHilario Calderon
81% match
Loading thumbnail…

loreal parsing

This interactive bar chart visualizes survey responses about RuPaul’s Drag Race viewing habits, makeup use, and demographics. Users can toggle between four views—gender, age group, generation, and province—to see the percentage distribution of respondents for each category. The visualization uses D3 v5 to load CSV data, nest and aggregate counts, and render horizontal bars with SVG. Buttons trigger updates to redraw the chart with different aggregated datasets.

HHilario Calderon
80% match
Loading thumbnail…

loreal charts_axes customization

This example shows a horizontal bar chart of age-group percentages derived from survey data about RuPaul’s Drag Race viewership and makeup habits. The chart customizes the axes by hiding tick lines, formatting x-axis labels with a percentage sign, and positioning value labels at the end of each bar. Using d3.csv, d3.nest, d3.scaleBand, d3.scaleLinear, d3.axisLeft, and d3.axisBottom, the code processes the data and renders the visualization with SVG rect and text elements.

HHilario Calderon
78% match
Loading thumbnail…

loreal charts

This bar chart displays the count of survey respondents grouped by gender, with the data sourced from a CSV file containing responses about RuPaul’s Drag Race viewing habits and makeup usage. The visualization uses d3.nest() to aggregate records and d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.axisLeft and d3.axisBottom to render axes. The SVG rendering shows horizontal bars with steelblue fills, highlighting the distribution of male versus female participants in the dataset.

HHilario Calderon
77% match
Loading thumbnail…

Social Media Survey Demographics Histogram

This visualization displays histograms of demographic survey data, showing the frequency distribution of respondents by gender, race, age, and LGBT status. Users can switch between these categorical variables using a dropdown menu, with each bar’s tooltip revealing the exact response count. The chart uses D3 v7’s `scaleBand`, `scaleLinear`, and `flatGroup` for binning and axes, with data loaded from a CSV via `csvParse`. The code combines demographic fields from the survey and filters out incomplete or underage responses before rendering.

Fflanagancarlie@gmail.com
71% match
Loading thumbnail…

Interactive Demographic Donut Chart

This interactive donut chart visualizes the distribution of players across demographic categories, showing subcategories like age ranges (18–24, 25–34) and gender (male, female) as colored slices with hover tooltips displaying percentages and counts. A dropdown menu lets users switch between age and gender views, triggering animated transitions between datasets. The visualization uses d3.pie, d3.arc, d3.scaleOrdinal, and d3.transition in SVG, with data loaded from a CSV file via d3.csv. Hover interactions and a legend with category labels enhance readability.

Iindira-antgrvty
71% match
Loading thumbnail…

Exploring survey data interactively - d3V6

An interactive bar chart displays survey data grouped by study preferences, letting users select from a dropdown menu to change the y-axis variable. The visualization updates scales, axes, and bar heights dynamically as users explore metrics like average height, stress, or sibling counts. Using d3.rollup to aggregate data and the general update pattern with enter and exit selections, the chart re-renders smoothly. The SVG-based visualization loads JSON survey data and generates dropdown options automatically from dataset fields.

LLaurens
70% match