Stylized Bar Chart

100%

Stylized Bar Chart

✓ Published0🌍 Public

Last edited May 15, 2023

Created on May 7, 2023

A stylized horizontal bar chart displays per-capita liters of pure alcohol consumption by country, with values shown via colored bars and a formatted x-axis. Built with React and D3 v5, it loads CSV data from a GitHub gist, uses d3.scaleBand and d3.scaleLinear for positioning, and renders SVG marks. d3.format abbreviates large numbers.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylised bar chart

A stylised bar chart displays population data for various countries, with horizontal bars ranked by value. The visualization uses React state management via a `useData` hook to load CSV data from a gist, while D3 v6 functions `scaleBand`, `scaleLinear`, and `max` handle scaling and layout. SVG rectangles render the bars, with axes generated by custom `AxisBottom` and `AxisLeft` components. Tick labels use D3’s `format` with SI prefixes, and a Poppins font styles the chart.

MmohitPassan

83% match

Loading thumbnail…

Stylized bar chart with React & D3

This stylized bar chart displays the population of 15 countries, with horizontal bars scaled proportionally to their 2020 population estimates and a custom tooltip showing the formatted value on hover. Built with React and D3 v7, the chart uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG elements via React components for axes and marks. The styling employs a light gray grid and dodgerblue bars, with the data loaded from a remote CSV using D3's `csv` parser and formatted with the `format` function.

Rrvdv

83% match

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the population of ten countries for 2020, with horizontal bars ranked vertically. The visualization uses React to render SVG elements, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a CSV file via D3’s `csv` function, then formatted with D3’s `format` for tick labels, using the ’B’ suffix for billions. Bars include a native SVG `<title>` element for tooltips, while the Poppins typeface and custom tick styling give the chart a refined, minimalist appearance.

Nnpelliccia

82% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example shows alcohol consumption by country using a horizontal bar chart, with the top 25 countries sorted by liters consumed. The visualization is built with React and D3, where the D3 scales `scaleBand` and `scaleLinear` map country names and consumption values to screen positions. SVG rectangles render the bars, while D3's `axisLeft` and `axisBottom` utilities generate tick lines and labels. Data is loaded from a CSV file fetched via D3's `csv` function, and the entire chart is rendered inside a single SVG element managed by React's declarative markup.

AAli Shah Solanki

82% match

Loading thumbnail…

Bar Charts : Part 1 - Stylized

This example presents a horizontal bar chart of the 2020 populations for 11 countries, sorted by a pre-defined order. It is rendered as an SVG using React components, with D3.js (v5) handling the scale computations: `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. The visual styling uses a custom Poppins font, a teal color for bars, and grey for tick labels. D3’s CSV loader fetches the data from a gist, and tooltips display formatted values like “1.23B”.

Zzeeeeem

82% match

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays the ten most populous countries in 2020, using CSS named colors and React to render an SVG visualization. The chart loads population data from a CSV source via D3’s `csv` utility and scales it with `scaleBand` and `scaleLinear`. Axes are drawn from custom React components, with formatted tick labels using `format`. Each bar is a simple rectangle with a tooltip, rendered declaratively through React components like `AxisBottom`, `AxisLeft`, and `Marks`.

Wwindwaver

82% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries using horizontal bars, with country names on the y-axis and population counts on the x-axis. The visualization uses React state via hooks to load and manage CSV data from a GitHub gist, while D3 v7 utilities like `scaleBand` and `scaleLinear` handle the scaling. The SVG rendering includes custom axis components and tooltips that format values using D3's `format` function. The chart features a clean, modern aesthetic with Poppins typography and muted teal and gray colors.

Sstephanie0215

81% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of ten countries using horizontal bars, with the x-axis formatted in billions and the y-axis listing country names. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, while custom axis components generate tick marks and labels. The bars are simple rectangles with tooltips showing the population value, and the layout is styled with a custom Poppins font and muted color palette.

Ttharuta

81% match