data

100%

✓ Published1🌍 Public

Last edited Jan 9, 2020

Created on Jan 9, 2020

This example shows a horizontal bar chart of population values over time, with each year displaying two bars representing different data points. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts and years, with SVG rectangles drawn via `selectAll('rect')`. Data is loaded from a CSV file using `d3.csv` and multiplied by 1000 for display, with axes rendered using `axisLeft` and `axisBottom`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

data visulization

This example shows a horizontal bar chart of country populations, with bars scaled by population values and country names on the y-axis. The visualization uses D3 v6’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data, map population counts to bar widths, and render axes. Bars are drawn as SVG `rect` elements within a grouped `<g>` element, with margins applied via a `translate` transform. The data, sourced from `data.csv`, has population values multiplied by 1000 before rendering.

AAkshay

88% match

Loading thumbnail…

Data Visualization with D3

This example shows a bar chart of population values for a list of countries, with each bar’s length scaled linearly and countries arranged along a categorical band scale. It uses D3 v5 with SVG rendering, applying `d3.scaleLinear` and `d3.scaleBand` to map data to positions, and `d3.axisLeft` and `d3.axisBottom` for the axes. Data is loaded from a CSV file via `d3.csv`, and population figures are parsed and multiplied before rendering.

Ssvensonneveld

87% match

Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a horizontal bar chart from CSV data using D3 v5 with SVG rendering. It shows population values for various countries, with each bar’s length scaled linearly and categorical labels positioned along the y-axis via `d3.scaleBand`. The code loads `data.csv`, formats population numbers, and renders axes using `d3.axisLeft` and `d3.axisBottom`, alongside rectangles styled with CSS. The visualization highlights the core workflow of data loading, scaling, and SVG element creation in D3.

DDaniel Weston

87% match

Loading thumbnail…

axes and stuff

This example displays a horizontal bar chart of population by country. The chart uses a linear scale for the population axis and a band scale for country names, with gridlines extending across the plot area. Built with D3 v5, it uses `svg.append`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG bars. The code loads population data from a CSV, multiplies values by 1000, and formats tick labels using D3's `format('.3s')`.

AAndrew Fletcher

87% match

Loading thumbnail…

Making a Bar Chart!

This example displays a horizontal bar chart of country populations, with values read from a CSV file and scaled by 1,000. Using D3 v5, it employs `d3.csv` to load the data, `scaleLinear` and `scaleBand` to map population and country names to positions, and `axisLeft` and `axisBottom` to render axes. Rectangles are appended to an SVG group with margins, sized by the scales, and styled with a steelblue fill.

Vvsapro

86% match

Loading thumbnail…

D3

This example shows a horizontal bar chart of population data for ten countries, with population values scaled by a factor of 1,000. The visualization uses D3 v5 to load the CSV, create linear and band scales, and render SVG rectangles with axes. The code demonstrates `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and the chart is built within a React context, with the SVG element targeted by `d3.select`. The bars are styled with steelblue fill, and axes are labeled with a custom font size.

JJeffrey Miiller

86% match

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population data for ten countries, with each bar’s length proportional to the population value. The chart uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for tick marks. Data is loaded from a CSV file via `d3.csv`, with population values converted from thousands. Bars are rendered as SVG `rect` elements, styled with steelblue fill, within an SVG canvas.

BbeauMarko

86% match

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart of country populations using D3 v5, with the data loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, rendering SVG rectangles with a steelblue fill. Axes are added with `d3.axisLeft` and `d3.axisBottom`, and the population values are incremented by a constant before rendering, as shown in the code.

Oonika123

86% match