bar chart

100%

✓ Published1🌍 Public

Last edited Sep 27, 2019

Created on Sep 27, 2019

This example shows a horizontal bar chart comparing the VALUE of an unspecified indicator across several US states, with each bar labeled by state name. It loads data from a CSV file and uses D3 v5’s `scaleLinear` and `scaleBand` to map values and state categories to SVG rectangles. The chart renders with green bars, and an axis is generated using `d3.axisBottom`. The SVG output is driven by D3 selections and a simple data-join pattern.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

bar chart

This example displays a horizontal bar chart comparing state values from a CSV dataset. The chart uses D3 v5 APIs including `d3.csv`, `scaleLinear`, `scaleBand`, and `axisBottom` to map state abbreviations to proportional bar widths along an x-axis. Bars are rendered as SVG rectangles with fixed color fills, while the axis label appears at the bottom. The data source is a local CSV file containing state statistical indicators for 2004.

GGlenn Henshaw

89% match

Loading thumbnail…

bar chart

This bar chart visualizes the VALUE column (counts of facilities) for nine U.S. states from a CSV data file, with states on the y-axis and values on the x-axis. Using D3 v5, the code employs `d3.scaleLinear` and `d3.scaleBand` to map data, and renders the chart as SVG rectangles. A bottom axis is generated via `d3.axisBottom`, and the chart uses the first color from a predefined color array. The data is loaded asynchronously with `d3.csv` and parsed to numeric values.

GGlenn Henshaw

87% match

Loading thumbnail…

A Bar Chart

A bar chart displays U.S. state populations from a CSV file, sorted descending by value, with white value labels at the end of each steel-blue bar and axis ticks along the top and left. It uses D3 v3 to load and parse the data, then builds scales with `d3.scale.linear` and `d3.scale.ordinal`, rendering SVG elements via `append` and styling with CSS classes. The `d3.svg.axis` component draws the ordinal left axis and linear top axis, while `d3.format` formats the numeric labels.

Mmbostock

82% match

Loading thumbnail…

bar chart

This bar chart example demonstrates how to visualize state-level healthcare data from a CSV file, showing the raw facility counts for each state. Using D3 v5 with SVG rendering, the code loads the data via `d3.csv` and prepares it for display, though the full bar chart rendering is not yet implemented. The example also includes sample city population data and utility modules for colors, showcasing the structure of a VizHub project with ES6 module imports.

GGlenn Henshaw

81% match

Loading thumbnail…

Bar Chart

This example presents an animated bar chart of country values, with data loaded from a CSV file. The chart visualizes numerical values for each country using horizontal bars, with axes positioned on the left and bottom. It imports D3 functions like `csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the visualization. The bars transition in width over 800 milliseconds, with each bar sequentially delayed using `transition.duration` and `delay`. The SVG rendering includes a styled message from a local ES6 module, all within a pink-background container.

Mmok3bat

80% match

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of country sizes, using D3 v5 with an SVG rendering approach. The chart maps country names to the y-axis and size values to the x-axis using `scaleBand` and `scaleLinear`, with axes added via `axisLeft` and `axisBottom`. Data is loaded from a CSV file and parsed with `d3.csv`, and bars are rendered as rectangles with a steelblue fill.

Jjf1978

79% match

Loading thumbnail…

bar

A horizontal bar chart displays population counts for six countries, with bars scaled linearly and labeled by country name. The visualization loads data from a CSV file and renders it as SVG rectangles with steelblue fill. Built with D3 v5, it uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, appending axes and bars to a grouped SVG element within a 960×500 viewport.

HHillKinsh

79% match

Loading thumbnail…

Untitled

Three horizontal bars represent the total counts for three U.S. states, with Michigan leading at 113, Texas at 108, and California at 81. The SVG chart uses d3.select and d3.selectAll with .data().enter().append("rect") to create rectangles whose heights are proportional to the values. Each bar is positioned using a transform attribute that translates the rect horizontally based on its index, while the y attribute is set as the SVG height minus the data value, though the missing .datum reference causes the bars to render incorrectly as undefined heights. The chart has a background class of "bar-chart" with the color #C7D9D9.

KKaitlyn Trudeau

79% match