Skip to main content
SimilarExport ZIP
100%

loreal parsing

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

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.

AI-generated description

Getting the data in a separated format

MIT Licensed

Similar vizzes

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
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
84% 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
83% 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
80% 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
73% 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
68% match
Loading thumbnail…

Untitled Document

This interactive donut chart displays survey data across gender, age, and race categories from a local JavaScript dataset. Three buttons let users switch between datasets, triggering a new pie chart with animated arc transitions using `d3.pie`, `d3.arc`, and `transition.attrTween`. The SVG rendering applies category-specific colors via a lookup function and shows tooltips on hover using D3 mouse events. SVG paths are drawn with a donut inner radius, and the chart initializes with the gender data on load.

GGerardoFurtado
64% match
Loading thumbnail…

LALA: Build a bar chart!

This visualization is a simple bar chart that displays the population for a set of countries. It uses D3 version 5 to map the data, with a linear scale for the x-axis and a band scale for the y-axis. The chart is rendered as an SVG, with bars drawn as rectangles and axes added using the `axisLeft` and `axisBottom` functions. The data is loaded from a CSV file.

Llinlala
64% match