Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published0🌍 Public
Jjayjoepark
Last edited Mar 29, 2019
Created on Mar 28, 2019
Forked from 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.

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

This bar chart displays the happiness scores of nine world regions, with bars colored on a red gradient by value. A central green circle toggles an animation that shrinks or grows the bars using a custom `transitionWidth` function, which relies on D3’s `transition` and `attr` methods. The chart is rendered as SVG with `d3.scaleLinear` and `d3.scaleBand` axes, and hovering over a bar populates a separate HTML overlay with the region’s name and score. Data comes from the CSV file using `d3.csv`.

Jjayjoepark
93% match
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
89% match
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
89% match
Loading thumbnail…

Making a Bar Chart

This example demonstrates the basics of building a bar chart without axes, showing the top 10 most populous countries with bar lengths proportional to population. Using D3 v5, it employs the `select` and `range` APIs to generate fruit-like circles that animate size and position via `transition()`, while the `scaleOrdinal` API maps categories to colors and radii. The data comes from the United Nations World Population Prospects 2019, loaded from a CSV file, and the visualization updates through a series of timeout-driven state changes.

Jjay
81% 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
81% match
Loading thumbnail…

Bar Chart

This bar chart displays the population of eight countries, scaled by a factor of one thousand. The visualization uses a horizontal bar layout, with country names on the y-axis and population counts on the x-axis, all rendered as red rectangles. The data, sourced from the United Nations World Population Prospects, is loaded from a CSV file and processed with D3 v5. The chart employs D3’s `scaleLinear` and `scaleBand` to map population values and country categories to SVG coordinates.

TTiff
80% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the ten most populated countries in the world, using data from the UN World Population Prospects. It renders the countries on the y-axis with horizontal bars scaled by population via `d3.scaleLinear` and `d3.scaleBand`. The SVG visualization is built with d3 v5, using `d3.csv` to load the data, `d3.axisLeft` and `d3.axisBottom` for labeling, and includes a steelblue fill for each bar.

MMillie White
80% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for ten countries, with the United Nations World Population Prospects data loaded via `d3.csv` and transformed by multiplying each value by 1000. The visualization uses D3 scales (`d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis) and renders SVG rectangles with an ordinal color scale. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the chart is positioned using a margin convention and fixed SVG dimensions.

Aaizazhussain234
80% match