MyBarChart

100%

✓ Published0🌍 Public

Last edited Oct 16, 2017

Created on Oct 16, 2017

This interactive bar chart, built with D3 v4, displays the percentage of individuals using the internet alongside mobile cellular subscriptions per country across multiple years. The grouped bars, rendered as SVG rectangles, use an ordinal color scale to distinguish the two metrics. The code loads data from a CSV file and constructs the visualization using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` for the axes. A legend and percentage labels are included to clarify the two plotted series.

AI-generated description

Built with blockbuilder.org

forked from <a href='https://bl.ocks.org/mbostock/'>Mike Bostock</a>'s block: <a href='https://bl.ocks.org/mbostock/3887051'>Grouped Bar Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Internet

A horizontal bar chart shows the percentage of individuals using the internet per country, based on the year 2000 column of a CSV file containing data from 2000 to 2014. The visualization initially focuses on the earliest year, with each country represented by a single bar whose length encodes its value. The code uses D3.js version 3.5.6, employing `d3.scale.linear` for bar widths and `d3.scale.ordinal` with `rangeBands` for evenly spaced bar heights, and reads the data via `d3.csv`, appending `rect` elements to an SVG canvas.

PPacsangon

81% match

Loading thumbnail…

Internet

This bar chart displays the percentage of Internet subscribers in the year 2000 for various countries, sorted in descending order. Each green rectangle represents a country, with its width proportional to the subscription percentage, and hovering reveals a tooltip with the exact value. The visualization uses D3.js to load data from a CSV file, sorts the data, and appends rectangles to an SVG canvas. The chart’s height accommodates each country as a separate row, making comparisons straightforward.

PPacsangon

78% match

Loading thumbnail…

Bar chart

This bar chart shows the population of various countries in 2020, with horizontal bars whose lengths are proportional to population values. The chart uses D3 v5 to load data from a CSV file, scale the values linearly for the x-axis, and use a band scale for the categorical y-axis. The SVG rendering is organized within a translated group, with axis elements produced by `axisLeft` and `axisBottom`. Rectangles are appended for each data point, using the scales to position and size them.

JJames

78% match

Loading thumbnail…

Making a Bar Chart

A bar chart displays population estimates for thirteen countries and two placeholder entries, with bars sized by population and colored on a red gradient. Hovering over a bar updates an HTML overlay with the country name and value. A green circle toggles an animation that transitions all bar widths between zero and their original lengths using a custom `transitionWidth` function. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `.transition()`, with SVG rendering and data loaded from a local CSV file.

Jjonsch1

78% match

Loading thumbnail…

Bar Chart

This bar chart visualizes population data for several countries, sourced from a CSV file, with D3.js v5 and SVG rendering. It uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, which is formatted to display billions. The chart features horizontal grid lines and steel-blue bars, with a flipped y-axis to grow bars upward.

Zzhued

78% match

Loading thumbnail…

Bar Chart Basic

A horizontal bar chart displays population figures for ten countries, using data from a local CSV file. The chart initializes D3 via a CDN and employs D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` modules to map population values to bar lengths and country names to vertical positions. Bars render as SVG rectangles with a steelblue fill. Axis tick labels are formatted with `format('.3s')`, converting large numbers into readable values with "B" suffixes.

ZZeeshan

78% match

Loading thumbnail…

Bar chart

A bar chart displays population estimates for eleven countries, including China, India, and the United States, using horizontal bars ordered by country name. The chart uses D3 v5 with SVG rendering, loading data from a local CSV file. It employs `d3.scaleLinear` for the x-axis population scale, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` to generate the axes. Bars are appended as SVG rectangles with heights determined by the band scale’s bandwidth.

TTikiWayne

78% match

Loading thumbnail…

My bar chart

This example shows a horizontal bar chart of national populations with bars proportional to each country’s population value. The chart renders as SVG rectangles positioned within a fixed 960-by-500 viewport using D3 v5’s `select`, `append`, and `scaleLinear` APIs. Population data loads from a CSV via `d3.csv`, with values multiplied by 1,000 before mapping through a linear scale. The underlying framework emphasizes fundamental DOM manipulation techniques demonstrated in the accompanying video.

PPiotrekW2

78% match