Skip to main content
SimilarExport ZIP
100%

loreal charts_axes customization

✓ Published3🌍 Public
HHilario Calderon
Last edited Oct 11, 2019
Created on Sep 27, 2019
Forked from loreal charts

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.

AI-generated description

Ths bar char shows the axes customization of the axis to mirror the elements in a similar way as the standard report

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

Customizing Axes

This example shows a horizontal bar chart of population data for ten countries, sourced from a CSV file, with a heavily customized axis layout. The chart uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisLeft with d3.axisBottom to render the axes. The x-axis tick labels are formatted using d3.format to abbreviate large numbers (e.g., "1.41B"), and the axes are manually positioned within an SVG using margin offsets and a transform attribute.

LLichenYang
74% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the female population as a percentage of the total, using 2018 World Bank data for ten countries. The chart customizes both axes by removing their domain lines, formatting the x-axis ticks as percentages, and adding axis labels. It uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisBottom` and `axisLeft` to render the ticks and grid lines.

LLinn
74% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of lion populations in various African countries, with the y-axis listing country names and the x-axis representing population. The chart uses custom tick formatting via `d3.format` with a `.3s` specifier, and the `d3.axisBottom` and `d3.axisLeft` functions for axis generation. Rendered as SVG, it loads data from a local CSV file, and styling is applied through CSS classes like `.tick text` and `.axis-label`, demonstrating how to customize axes with D3 v5.

Mmargaretgoode
73% match