Steve's stylized barchart

100%

Steve's stylized barchart

✓ Published1🌍 Public

Last edited Sep 25, 2019

Created on Sep 25, 2019

This example displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population counts on the x-axis. The React app loads United Nations World Population Prospects 2019 data via `csv`, then uses `scaleBand` and `scaleLinear` to position bars. SVG rectangles render the marks with tooltips, while custom `AxisBottom` and `AxisLeft` components draw tick lines and labels using D3's scale methods.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Steve's refactored barchart

This interactive bar chart displays the top 10 most populous countries, using horizontal bars whose lengths represent population figures from the United Nations World Population Prospects 2019 dataset. Built with React and D3 v5, it renders axes and marks as SVG elements, leveraging `scaleBand`, `scaleLinear`, and custom components for the bottom axis, left axis, and rectangular bars. Data is loaded asynchronously via D3’s `csv` function, then sorted and sliced before being passed to the scales. The visualization includes axis lines, tick labels, and country names for clarity.

Bbootshine2

94% match

Loading thumbnail…

Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with a fixed-width SVG layout and a loading state. It uses React with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, while d3.format abbreviates population values (e.g., “1.4B”). The data is loaded via d3.csv from the UN World Population Prospects 2019 dataset, sorted and sliced to the top 10. Axes are custom SVG components, and each bar has a native <title> tooltip.

Iip01

91% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries, using a horizontal layout with a custom band scale for categories and a linear scale for values. The React application, built with D3 v5, renders SVG rectangles that encode population data, with tooltips revealing exact figures. Data comes from the United Nations World Population Prospects 2019, loaded via D3’s CSV parser. The chart includes styled axes with tick marks and labels, a custom axis label, and a Poppins font, all defined within a React component that scales axes and marks based on the parsed dataset.

AAmit Wadhwa

90% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population in billions on the x-axis. The React application uses d3.csv to load United Nations World Population Prospects 2019 data, d3.scaleBand for the categorical axis, and d3.scaleLinear for the quantitative axis. SVG rectangles render the bars via the Marks component, while custom axis components generate ticks and labels.

MMarvin

90% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, with population values formatted in billions (e.g., "1.3B") using d3.format. The React app loads UN World Population Prospects 2019 data via d3.csv and renders SVG bars with Poppins typography. It uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, while custom AxisBottom and AxisLeft components generate ticks. Native SVG `<title>` elements provide hover tooltips.

Dddan0

90% match

Loading thumbnail…

Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the left and population values formatted in billions along the bottom axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and SVG `<rect>` elements for the bars. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and sorted to the ten largest populations. Native SVG `<title>` elements provide hover tooltips with formatted population values.

RRussell Watson

90% match

Loading thumbnail…

Stylized Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart, with population values labeled along the x-axis and country names on the y-axis. Using React for component structure and D3 v5 for scales and data loading, it renders SVG rectangles via the `scaleBand` and `scaleLinear` APIs. Data comes from the United Nations World Population Prospects 2019, loaded through D3’s `csv` function. Native SVG `<title>` elements provide tooltips on hover.

SSartell

90% match

Loading thumbnail…

Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population values on the x-axis formatted as billions. The chart is rendered as an SVG using React components, with d3.scaleBand and d3.scaleLinear mapping the data, and d3.format for tick labels. Data comes from the United Nations World Population Prospects 2019 via a CSV loaded asynchronously with d3.csv, and the axes and bars are styled with teal marks and a Poppins font.

PPaul Chen

90% match