Skip to main content
SimilarExport ZIP
100%

Fork of Dishonest Bar Chart

✓ Published0🌍 Public
AAkbar Nafisa
Last edited Jun 20, 2024
Created on Jun 20, 2024

This bar chart displays population estimates for the top 10 most populous countries from the 2018 United Nations World Population Prospects, intentionally omitting a zero baseline to illustrate how truncated axes exaggerate visual differences. The chart uses d3.scaleLinear and d3.scaleBand to map population values and country names, rendering horizontal bars as SVG rectangles. Axis tick labels are formatted with d3.format, and the data is loaded from a CSV file via d3.csv. The design highlights a common data-visualization pitfall rather than following best practices.

AI-generated description

This bar charts does not use a zero baseline. It's an example of how not to use area.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Dishonest Bar Chart

This bar chart displays the population of the top 10 most populous countries from a 2018 United Nations estimate, but intentionally omits a zero baseline to exaggerate differences between bars. The visualization loads population data from a CSV file and uses d3.csv to parse it, then renders steelblue rectangles with d3.scaleLinear and d3.scaleBand. The x-axis uses d3.axisBottom with a custom tick formatter that abbreviates numbers, while the y-axis labels are drawn without tick lines. The chart updates after a three-second delay and randomly filters data points, creating a deliberately misleading comparison.

AAltxis
93% match
Loading thumbnail…

Dishonest Bar Chart

This bar chart displays the populations of the top 10 most populous countries, but it uses a non-zero baseline, making the differences between countries appear exaggerated. The chart ranks the countries along the y-axis using a d3.scaleBand, while the x-axis uses a d3.scaleLinear that starts at the minimum population value rather than zero, misleadingly emphasizing proportional differences. Data comes from the 2018 United Nations World Population Prospects, imported via d3.csv. The visualization is built with D3 v5, rendering SVG rects, axes via d3.axisLeft and d3.axisBottom, and custom tick formatting with d3.format.

RRdk0
93% match
Loading thumbnail…

Dishonest Bar Chart

This horizontal bar chart compares the populations of the top ten most populous countries, using a non-zero baseline to exaggerate differences between values. The visualization is rendered as SVG with D3 v5, using `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with data loaded from a CSV file via `d3.csv`. The example intentionally demonstrates a misleading charting practice, as noted in its README, with population figures from the United Nations’ 2017 World Population Prospects. Axes and tick labels are styled with custom CSS classes.

JJimMaltby
92% match
Loading thumbnail…

Fork of Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names, with axes customized via `axisBottom` and `axisLeft`. Population values are formatted with `format('.3s')` to abbreviate large numbers, and the data is loaded asynchronously from a CSV file using `d3.csv`. The SVG rendering includes a title and axis label for clarity.

Ooliverkendall99@gmail.com
92% match
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format to render an SVG with labeled axes and a title. A custom tick formatter converts large numbers into abbreviated units, such as billions, while the y-axis labels are cleaned of extra lines. Data is loaded from a local CSV file and rendered with steel-blue bars.

KKELVIN WAMBUA NZIOKI
91% match
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. It uses d3.csv to load the data and d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to construct the visualization, which is rendered as SVG. The chart customizes the axes by removing tick lines, formatting population values with d3.format, and adding axis and title labels.

Bbepnye@gmail.com
91% match
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The chart uses a linear scale for the population values and a band scale for the country labels, with bars rendered as SVG rectangles. The code employs d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.csv to load and process the dataset. The axes are styled by removing the domain and tick lines, and the chart includes a title annotation.

SshanLU999
91% match
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects, with values multiplied by 1,000 for accuracy. It demonstrates customization of D3 axes, including a horizontal linear scale with tick formatting that converts abbreviations (e.g., "G" to "B") and a vertical band scale for country names. The SVG rendering uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft. The chart includes a title, labeled x-axis, and gridlines created via tickSize, while gridlines and axis domains are selectively removed for a cleaner look.

DDanny Stephens
91% match