Skip to main content
SimilarExport ZIP
100%

loreal charts

✓ Published1🌍 Public
HHilario Calderon
Last edited Sep 27, 2019
Created on Sep 25, 2019
Forked from Tutorial

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% 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
85% match
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
79% match
Loading thumbnail…

loreal_data transitioning

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.

HHilario Calderon
77% 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
76% 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
69% match
Loading thumbnail…

Column Chart

This column chart visualizes gender-based frequency data from a CSV file, displaying two bars for Female (8) and Male (32) categories. The chart uses d3.csv for data loading and d3.scaleBand with d3.scaleLinear for positioning, rendering bars as SVG rectangles. Interactive features include mouseover tooltips that show values and click alerts, enabled through chart configuration flags. Axis labels appear for both dimensions, with d3.axisBottom and d3.axisLeft generating the scales.

KKanishka33
67% 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
66% match