Skip to main content
SimilarExport ZIP
100%

Bar chart

✓ Published1🌍 Public
Kkavi-kumaran
Last edited Jan 1, 2020
Created on Dec 31, 2019

This bar chart displays the populations of seven global regions using a horizontal layout, with the population values loaded from a CSV file and formatted in billions. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data to SVG rectangles, while `axisLeft` and `axisBottom` generate the chart’s axes. The code also demonstrates DOM manipulation through D3 selections, appending elements, and applying attributes. A title and axis label are added via SVG text elements, and the styling is handled through an external CSS file.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar chart

This bar chart displays the population of seven global regions using circles scaled along a linear axis, with country names on a point scale. Built with D3 v5, the visualization loads data from a CSV file, converts population values, and renders SVG elements. It uses `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `tickFormat` to format values in billions, while custom margins and axis styling enhance readability.

Kkavi-kumaran
96% match
Loading thumbnail…

Bar Chart Practice

This bar chart displays population totals for six global regions, with labeled horizontal bars ordered by continent. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map continent names to y-positions and population counts to bar widths, while `d3.csvParse` ingests inline CSV data sourced from Wikipedia 2021. Text labels, formatted with `d3.format`, appear beside each bar, and the SVG is rendered with static `<rect>` elements.

Mmkwvonmkwson
88% match
Loading thumbnail…

Bar chart

This bar chart displays the area of seven continents, using green bars on a white background with labeled axes. The chart is built with D3 v5, loading data from a CSV file and rendering as SVG. The visualization uses `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis, with axes generated by `axisLeft` and `axisBottom`. The bars are positioned via the `x` and `y` attributes, with heights calculated relative to the inner chart area.

BbeauMarko
87% match
Loading thumbnail…

Bar Chart

This bar chart displays the populations of ten countries, scaled in thousands, with horizontal bars ordered by country name. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and renders SVG rectangles whose widths correspond to population values. Data is loaded from a CSV file via `d3.csv`, and axes are generated with `axisLeft` and `axisBottom`. The chart is styled with red bars and custom font sizes.

NNaveenaS12
85% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of several global cities, with each bar’s length representing a city’s population. The visualization uses D3 v7 to load a CSV file, then applies `scaleLinear` for the x-axis population scale and `scaleBand` for the y-axis city categories. SVG rectangles are appended and sized using these scales, with `axisLeft` and `axisBottom` rendering the labeled axes. The chart is styled with steelblue fills and a fixed 960×500 SVG canvas.

Ssheafallick
85% match
Loading thumbnail…

Bar Chart

A bar chart displays population counts for four countries, with horizontal bars ordered by country name and a log-free linear scale. The visualization uses D3 v7’s `csv` loader to parse `data.csv`, `scaleLinear` and `scaleBand` for axes, and `axisBottom` with a custom tick formatter to abbreviate numbers. Rendered as SVG rectangles filled with steelblue, the chart maps population values to bar widths and country names to row positions, with axes and margins computed from the viewport dimensions.

Oorihash
85% match
Loading thumbnail…

Making a bar chart

A bar chart displays population estimates for six global regions from a CSV file, showing Africa, Asia, Europe, Latin America and the Caribbean, Northern America, and Oceania. The visualization uses D3 v5’s `select` and `csv` methods to load the data, then converts each population value from millions to thousands. The SVG chart is rendered at 960 by 500 pixels, with the page styled to remove margins and hide overflow. The code currently logs the processed data to the console, laying the foundation for drawing bars.

Ppengming0807
85% match
Loading thumbnail…

Bar chart

This bar chart displays population figures for ten countries, with horizontal bars ranked from largest to smallest population. The visualization uses SVG rendering with D3 v7’s scaleLinear and scaleBand to map population values and country names to bar lengths and positions. The x-axis is generated with axisBottom, while the y-axis uses axisLeft. Data is loaded from a CSV file using d3.csv, with the population column multiplied by 1000 before rendering. The chart employs a steelblue fill for the bars and includes margins to accommodate axis labels.

KKelseyXu5
85% match