Dataviz 2020_Ep24 - 18. Styling (BarChart Vertical Ver.)

Dataviz 6 - Styling the bar chart

A horizontally oriented bar chart displays the ten most populous countries in 2020, with bars colored teal and axes labeled in muted gray. The visualization uses React components to render SVG elements, with `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. D3’s `csv` loader fetches the UN World Population Prospects 2019 dataset, and tick labels are formatted with `d3.format` to abbreviate values like “1.3B”. A tooltip via SVG `<title>` elements shows exact population figures on hover.

RRyAlpha

Dataviz 2020_Ep21 - 14. Bar Chart (with React and D3) (Vertical Ver.)

This example displays a vertical bar chart of the top ten countries by 2020 population, using the UN Population dataset loaded via D3’s `csv` utility. React manages the component state and renders SVG `rect` elements, while D3’s `scaleBand` and `scaleLinear` compute the bar positions and heights. The chart resizes to the full browser window, and bars extend upward from the bottom edge with the y-axis inverted to match the data scale. D3 v6 and React 17 are loaded from CDNs, and the visualization updates after an asynchronous data fetch.

MMinwoo Pak

Dataviz 2020_Ep23 - 17. Refactoring (BarChart Vertical Ver.)

This example presents a vertical bar chart of the top 10 countries by population for 2020, sourced from a UN Population CSV file. The visualization shows each country's population as a bar with rotated, angled labels on the x-axis. Built with React and D3 version 6, the chart separates axes and bar marks into individual components, using `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for scaling, and rendering as SVG elements. The layout adapts to the browser window’s dimensions.

MMinwoo Pak

Dataviz 2020_Ep22 - 16. Axes (with React and D3) (BarChart Vertical Ver.)

A vertical bar chart displays the top ten countries by 2020 population, sourced from a UN_Population_2019 CSV file. The React component uses `useState` and `useEffect` to load data via D3’s `csv`, then renders SVG rects for bars. Axes are drawn manually with D3 scales (`scaleBand`, `scaleLinear`) and tick marks, including rotated country labels. The visualization updates the chart to fit the window dimensions, with bars positioned using `xScale` and `yScale` and heights derived from population values.

MMinwoo Pak

Stylized Bar Chart

A stylized bar chart displays the populations of ten countries from a 2019 UN dataset, using horizontal bars sorted by country name. The visualization renders in SVG via React, with D3 v5 scales (`scaleBand` for the y-axis and `scaleLinear` for the x-axis) and includes axis components and tooltips showing formatted population values. Data is loaded asynchronously with `d3.csv`, with population values computed from the dataset’s “2020” column. The chart’s styling uses Poppins font and teal bars against a minimal, clean background.

EEvan Misshula

Stylezed Bar Chart

A horizontal bar chart displays the populations of ten countries from a 2019 UN dataset, with country names on the y-axis and population values on the x-axis. The React component uses d3.scaleBand and d3.scaleLinear to map data, while d3.format formats tick labels. SVG rectangles render each bar, with native `<title>` elements providing tooltips. Axis components draw ticks and labels, and the chart updates automatically when data loads via a custom `useData` hook.

FFulvio Vigilante

Stylized Bar Chart

This stylized bar chart displays population data for ten countries from the UN’s 2019 World Population dataset. Using React with D3 v7, it builds a horizontal bar chart with a band scale for countries and a linear scale for population, rendering axes and marks as SVG elements. The chart applies a custom Poppins font, colored tick marks, and teal bars with hover tooltips via SVG `<title>` elements. The `csv` loader fetches the data, while `format` and `scaleBand` handle labeling and spacing.

GGabriel Dias Menezes

Stylized bar chart

A stylized bar chart displays the populations of ten countries from 2019 UN Population data, with horizontal bars ranked by country name. The visualization uses React to render SVG elements, including custom axis components and rectangular marks for each bar. D3 utilities like scaleBand, scaleLinear, and csv loading handle data processing and scales. The chart features a teal color scheme, Poppins font, and tooltips showing population values with abbreviated formatting, such as "1.23B".

Nnncis