Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published1🌍 Public
Jjayjoepark
Last edited Mar 29, 2019
Created on Mar 28, 2019
Forked from Making a Bar Chart

A horizontal bar chart compares population estimates for thirteen world regions, with bar lengths scaled proportionally and fill colors transitioning from IndianRed to Red based on value. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom. A green clickable circle toggles an animated width transition via d3.transition, shrinking or growing all bars simultaneously. Hovering over a bar updates a foreignObject div with the region name and population, while data originates from the 2017 United Nations World Population Prospects.

AI-generated description

This bar chart shows population of the thirteen most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017.

Note: That link doesn't give data for the year 2018 but for the year 2015. In this example, I've used the data provided in the class (which is close to the downloaded data).

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart compares population estimates for thirteen world regions, with bar lengths scaled proportionally and fill colors transitioning from IndianRed to Red based on value. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom. A green clickable circle toggles an animated width transition via d3.transition, shrinking or growing all bars simultaneously. Hovering over a bar updates a foreignObject div with the region name and population, while data originates from the 2017 United Nations World Population Prospects.

Jjayjoepark
100% 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
91% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the happiness scores of nine world regions, using data from a class-provided dataset similar to the United Nations World Population Prospects. A colored bar represents each region, with a color scale from IndianRed to Red indicating higher scores. The visualization includes D3 scales (`scaleLinear`, `scaleBand`), axes, and a circular button that toggles an animated transition, smoothly resizing the bars via a custom `transitionWidth` function. Hovering over a bar updates a separate HTML div with the region’s name and population.

Jjayjoepark
89% match
Loading thumbnail…

Making a Bar Chart

This bar chart shows the estimated 2020 populations of several countries, using data from the United Nations World Population Prospects 2017. Population values are displayed as horizontal bars, sorted alphabetically by country name, with the chart rendered as an SVG. The visualization uses d3.csv to load the data, and d3.scaleLinear and d3.scaleBand to map population values and country names to screen positions. Axes are generated with d3.axisLeft and d3.axisBottom, while bars are appended as SVG rectangles with a steelblue fill.

Vvic126
88% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the world’s most populous countries, using horizontal bars ordered by country name. The visualization scales population values linearly and maps countries to categorical bands. Data from World Population Prospects 2017 is loaded via d3.csv, then rendered as SVG rectangles with axes generated using d3.axisLeft and d3.axisBottom. The chart employs d3.scaleLinear and d3.scaleBand to position elements, with margins computed from the SVG dimensions. Population figures are multiplied by 1000 to reflect actual counts.

Nndhokalelearning
88% match
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the 2018 population estimates for the ten most populous countries from the United Nations World Population Prospects. The visualization uses d3.csv to load the data, then constructs the chart from an SVG with d3.scaleLinear for the population axis and d3.scaleBand for country categories. Axes are rendered via d3.axisLeft and d3.axisBottom, while rectangular bars are appended through a data join with fill styling from the stylesheet.

DDaniel Piqué
87% match
Loading thumbnail…

making a bar chart

A horizontal bar chart displays population estimates for eleven countries, sorted by descending value, using steel-blue bars against a light background. The visualization is built with D3.js v5, utilizing `scaleLinear` for the population axis, `scaleBand` for country categories, and axis generators `axisLeft` and `axisBottom`. Data from `data.csv` is loaded via D3's `csv` method, with population figures multiplied by 1,000, then rendered as SVG rectangles within a 960x500 canvas.

Jjmmoser7
87% match
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the 2018 population estimates for the ten most populous countries, sourced from the United Nations World Population Prospects 2017. The visualization is built with D3 v5, using `scaleLinear` for the population axis and `scaleBand` for the categorical country axis, rendered as SVG rectangles. Axis ticks and labels are added via `axisLeft` and `axisBottom`, with data loaded from a CSV file and population values multiplied by 1000 to reflect actual counts.

AAnne Kerr
87% match